jQuery Mobile的复选框造型问题

我设法风格我复选框在JQuery的，因为我想他们看：jQuery Mobile的复选框造型问题

var content = '<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">' + 
    '<div class="ui-controlgroup-controls">' + 
    '<div class="ui-checkbox">' + 
    '<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">' + 
    '<label for="checkbox-1a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-checkbox-on ui-btn-up-c">' + 
    '<span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Food</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">&nbsp;</span></span></label></div>' + 
    '<div class="ui-checkbox">' + 
    '<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">' + 
    '<label for="checkbox-4a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last">' + 
    '<span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Sun Chips</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label></div>' + 
    '</div></fieldset>';

结果是静态的（无操作或单击按钮时，状态变化）。

如何让他们充当正常复选框，点击时更改其检查状态？

谢谢！

来源

2013-03-01 galgo

我想你你的HTML字符串附加到具有ID myCheckBoxes

例如DIV：<div id="myCheckBoxes"></div>

尝试如下

$('#myCheckBoxes').html(content); 
$('#myCheckBoxes').trigger("create");

来源

2013-03-01 06:08:50

检查小提琴似乎你需要进一步的工作风格http://jsfiddle.net/XN5Xt/ – 2013-03-01 06:09:20

jQuery Mobile不仅是样式元素，而且还添加了一些事件处理和类/属性切换（类似于JUI，但在标签中有JQM）。因此，您需要自行添加此行为，或者在JQM开始解析或插入标准元素之前插入标准元素，并使JQM再次解析它们。

为了JQM重新渲染移动网页的标记，你需要调用是这样的：

$jqueryElement.trigger("create");

哪里$jqueryElement是例如：

$jqueryElement = $('#elementId');

编辑：换句话说，你不应该使用类如ui-checkbox。您应该添加标签为一个简单的输入和一个字段是这样的：

<fieldset data-role="controlgroup" data-type="vertical"> 
    <input id="foo1" name="foo" type="checkbox"><label for="foo1">Option 1</label>` 
    <input id="foo2" name="foo" type="checkbox"><label for="foo2">Option 2</label>` 
</fieldset>

来源

2013-03-01 00:49:16 Nux

对不起，但你失去了我：s – galgo 2013-03-01 02:02:39

我试图告诉你，你添加的类是内部JQM类，你不应该是真正的请使用它们。使用标准的HTML和少量的'data-'属性并在容器上创建触发器。这将添加类和行为。 – Nux 2013-03-01 02:17:39

区别在于我可以对实际按钮进行样式设置，如下所示：[链接]（http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html） – galgo 2013-03-01 02:20:50

jQuery Mobile的复选框造型问题

回答

相关问题