javascript 样式化 jQuery 移动复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7001124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling jQuery mobile Checkboxes
提问by JFFF
I have very little experience with CSS.
我对 CSS 的经验很少。
I'd like to style the default JQuery Checkboxesto move the checked icon from left to right.
我想设置默认的JQuery 复选框的样式，以便从左到右移动选中的图标。
I have used my badass Paint skills to illustrate what I'm looking for.
我用我的坏蛋绘画技巧来说明我在寻找什么。
So I'm not asking for someone else to do the job, just some pointers in the right direction.
所以我不是在要求其他人来做这项工作，只是在正确的方向上提供一些指示。
What would be the best way to achieve this ?
实现这一目标的最佳方法是什么？
Thank you !
谢谢 ！
采纳答案by Jasper
Try looking at the rendered output after jQuery Mobile parses your code using Firebug.
在 jQuery Mobile 使用Firebug解析您的代码后，尝试查看呈现的输出。
You will be able to see the structure and classes added to the form element. The class names added by jQuery Mobile are pretty strait-forward to understand.
您将能够看到添加到表单元素的结构和类。jQuery Mobile 添加的类名很难理解。
--UPDATE--
- 更新 -
Here is the HTML from firebug for the jQuery Mobile documentation for check-boxes:
下面是来自 firebug 的 HTML，用于复选框的 jQuery Mobile 文档：
<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>
Notice the "ui-btn-icon-left" class, I'd play with that, you may not just be able to change it to "ui-btn-icon-right" but you can play with the structure. I've done this for other elements however I have not tested with check-boxes.
请注意“ui-btn-icon-left”类，我会使用它，您可能不仅可以将其更改为“ui-btn-icon-right”，还可以使用该结构。我已经为其他元素这样做了，但是我还没有用复选框进行测试。
回答by Chris C.
jquery-mobilev1.0 has a custom data attribute that you can use to adjust icon positioning. This includes checkboxes, radio buttons, nav bars, and other elements.
jquery-mobilev1.0 有一个自定义数据属性，您可以使用它来调整图标定位。这包括复选框、单选按钮、导航栏和其他元素。
Documentation: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
文档：http: //code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
To create the checkbox you've drawn in your question above, your code would be:
要创建您在上面的问题中绘制的复选框，您的代码将是：
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
Notice that data-iconposis applied to the label. That's because jQuery Mobile styles this element heavily to act as the UI element in the front-end. In other words, with this attribute, you're positioning the checked/unchecked icon to the right side of the label.
请注意，data-iconpos适用于label. 那是因为 jQuery Mobile 对该元素进行了大量样式设置，以充当前端中的 UI 元素。换句话说，使用此属性，您将选中/未选中的图标定位到label.
Note: If you attempt to workaround this attribute and add class="ui-btn-icon-right"to your elements, jQuery Mobile may drop those classes when the page renders.
注意：如果您尝试解决此属性并将其添加class="ui-btn-icon-right"到您的元素，jQuery Mobile 可能会在页面呈现时删除这些类。
回答by Oded Peer
This is now part of JQM using the standard APIs by setting data-iconpos="right"See http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconpositionfor more details
这现在是使用标准 API 的 JQM 的一部分，data-iconpos="right"请参阅http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition了解更多详细信息
