在 JQuery Mobile 中添加复选框列表非常容易,脚本会自动设置/更改以下 html 的样式并为其提供功能:
<fieldset data-role="controlgroup" id="liste" class="liste">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
然而,更改现有列表很困难,因为必须调用这个不想为我工作的刷新方法:
$(".selector").checkboxradio( "refresh" );
这是我的列表,其中尝试将项目添加到 JsFiddle 中的列表失败:
http://jsfiddle.net/b92anmqw/
请帮助我,谢谢!
不要恐慌。由于您使用的是 jQuery Mobile,这也可以非常容易地完成。首先,您应该设置页面的结构:
<div data-role="page" id="page-1">
<div data-role="main" class="ui-content">
...here goes your fieldset
</div>
</div>
您应该将新复选框附加到控制组容器内:
$(document).on("pagecreate", "#page-1", function() {
var item5 = $("<label for='checkbox-5a'>Flips</label><input type='checkbox' id='checkbox-5a'></input>"),
liste = $("#liste");
liste.controlgroup("container").append(item5);
$(item5[1]).checkboxradio();
liste.controlgroup("refresh");
});
顺便说一句,你也可以使用$(document).on("pagecreate")
代替$(document).ready
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)