文档介绍:Jquery mobile UI 组件详解
单选框
范例代码:
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1"
checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
呈现效果:
Options
序号属性名称属性注解
1 mini 设置元素的大小到一个更紧凑,迷你版。此选项也暴露数据
属性 data-mini="true"
2 theme 设置组件的主题颜色,这个小工具。它接受一个单一的字母
排序的地图样本包含在你的主题。默认情况下,它将继承同
一样本颜色作为它的父容器,如果不明确
Methods
序号方法名称方法注解
1 enable 设置单选框可用
2 disable 设置单选框禁用
3 refresh 更新自定义选择
Events
序号方法名称方法注解
1 create 当单选框创建的时候被触发
多选框
范例代码:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<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>
</div>
呈现效果:
Options
序号属性名称属性注解
1 mini 设置元素的大小到一个更紧凑,迷你版。此选项也暴露数据
属性 data-mini="true"
2 theme 设置组件的主题颜色,这个小工具。它接受一个单一的字母
排序的地图样本包含在你的主题。默认情况下,它将继承同
一样本颜色作为它的父容器,如果不明确
Methods
序号方法名称方法注解
1 enable 设置多选框可用
2 disable 设置多选框禁用
3 refresh 更新自定义选择
Events
序号方法名称方法注解