设计jQuery移动复选框

Question

我对CSS的经验很少。

我想设置默认JQuery Checkboxes的样式，以便将选中的图标从左向右移动。

我使用了我的badass Paint技能来说明我正在寻找的东西。

所以我不是要求其他人去做这个工作，只是指向正确的方向。

实现这一目标的最佳方式是什么？

谢谢！

Answer 1

jquery-mobile v1.0有一个自定义数据属性，可用于调整图标定位。这包括复选框，单选按钮，导航栏和其他元素。

文档： http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html

要创建您在上面的问题中绘制的复选框，您的代码将是：

  <input type="checkbox" name="checkbox-name" id="checkbox-id" />
  <label for="checkbox-id" data-iconpos="right">I agree</label>

请注意，data-iconpos已应用于label。那是因为jQuery Mobile对这个元素进行了大量设计，以充当前端的UI元素。换句话说，使用此属性，您将已选中/未选中图标定位到label的右侧。

注意：如果您尝试解决此属性并将class="ui-btn-icon-right"添加到元素中，则jQuery Mobile可能会在页面呈现时删除这些类。

Answer 2

在jQuery Mobile使用Firebug解析您的代码后，尝试查看呈现的输出。

您将能够看到添加到表单元素的结构和类。 jQuery Mobile添加的类名非常容易理解。

- UPDATE -

以下是来自firebug的用于复选框的jQuery Mobile文档的HTML：

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
        <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">

            <div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>

        </div></fieldset>
    </div>

注意“ui-btn-icon-left”类，我会玩它，你可能不仅可以将它改为“ui-btn-icon-right”，但你可以玩这个结构。我已经为其他元素做了这个，但我还没有用复选框测试过。

Answer 3

现在，通过设置data-iconpos="right"，这是使用标准API的JQM的一部分 有关详细信息，请参阅http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition