表单元素，文本输入组件，滑动选择器、范围选择器， 选择菜单组件，轻触开关组件，复选框和单选按钮
尽可能少地让用户输入 让用户选择（使用复选框或单选框）
在多页表单之间使用导航 清晰指示，无需滚动页面
去掉任何不必要的元素 精简
1. 表单元素
data-clear-btn clearBtn 默认false，若为true则生成一个X按钮，点击会清除已输入的内容
data-mini mini 默认false，若为true，则以紧凑模式显示
data-prevent-focus-zoom preventFocusZoom 若为true，当文本框获得焦点时，禁止浏览器对文本框进行放大或缩小
textinput("disable")
textinput("enable")
<script> $(document).bind("pageinit",function(){ $("button").tap(function{ //按钮绑定点击切换是否支持输入事件 $("#name").textinput(e.target.id); e.preventDefault(); //阻止自动提交 }); }); </script>
<form action="" method="get"> <div data-role="fieldcontain"> //设置同行显示 <label for="name">Name:</label> <input id="name" data-clear-btn="true" data-mini="true"> //紧凑显示，带清除内容按钮 </div> <div id="btnContainer"> //按钮点击切换input是否可以输入 <button id="enable">Enable</button> <button id="disable">Disable</button> </div> </form>
2. 滑动选择器、范围选择器
<form action="" method="get"> <div data-role="fieldcontain"> <label for="name">滑块:</label> <input id="quantity" type="range" value="10" min="1" max="20">//type="range" 滑块，初始值10，范围1-20
</div>
</form>
范围选择器组件
data-highlight highlight 默认false,若为true则选中值部分会突出显示
data-track-theme trackTheme 为滑动条指定主题（滑轨，长）
data-theme theme 影响滑动把手
<form action="" method="get"> <div data-role="fieldcontain">
<div data-role="rangeslider" data-highlight="false"
data-theme="b" data-track-theme="a"> 轨道a, 把手b
<label for="name">滑块:</label> <input id="quantityL" type="range" value="10" min="1" max="20">
<input id="quantityH" type="range" value="15" min="1" max="20">
</div>
</div>
</form>
3. 选择菜单组件
data-corners corners 默认true，指定控制选项列表显示的按钮是否为圆角
data-divider-theme dividerTheme 若nativeMenu选项为false，指定optgroup元素使用的主题
data-icon icon 按钮上的图标
data-iconpos
data-inline
data-mini
data-native-menu nativeMenu 默认true，指定是否使用原生选择菜单
data-overlay-theme overlayTheme 若nativeMenu为false，指定弹出选择菜单所用的主题
带下拉按钮的选择菜单组件
<form action="" method="get"> <div data-role="fieldcontain"> <label for="speed"><span>Speed:</span></label> <select name="speed" id="speed" data-iconpos="left" data-icon="gear" data-mini="true"> <option value="vfast">Very Fast</option> <option value="fast">Fast</option> <option value="normal" selected>Normal</option> <option value="slow">Slow</option> </select> </div> </form>
配置弹出菜单
当用户点击按钮时，弹出菜单组件默认使用浏览器内建的原生弹出菜单，在iOS,Android,Opera中效果各不一样
把data-native-menu属性设置为false，就可以禁用原生菜单，界面风格与网站其他部分更一致。
<select name="speed" id="speed" data-native-menu="false" data-overlay-theme="a">
指定占位符
select元素中的option看作占位元素，添加data-placeholer="true"属性，则不可点击
<option value="placeholder" data-placeholder="true">Select a Speed</option>
选择菜单组件方法
selectmenu("open")
selectmenu("close")
selectmenu("disable")
selectmenu("enable")
selectmenu("refresh")
4. 轻触开关组件
select元素只有两个选项，只需把select元素的data-role="slider"
<style type="text/css"> #btnContainer{ text-align: center;} [data-role=fieldcontain]{ margin: 10px; text-align: center; } </style>
<form action="" method="get"> <div data-role="fieldcontain"> <label for="speed"><span>Speed:</span></label> <select name="speed" id="speed" data-role="slider"> <option value="fast"> Fast</option> <option value="slow" selected>Slow</option> </select> </div>
<div data-role="fieldcontain"> <label for="trueA"><span>确认:</span></label> <select name="trueA" id="trueA" data-role="slider"> <option value="true"> 打开</option> <option value="false">关闭</option> </select> </div> </form>
5. 复选框和单选按钮
自动增强input的type属性：radio 单选；checkbox 复选
<input type="checkbox" name="check" id="check"/>
<label for="check">I agree</label>
另：一行显示
<form action="" method="get"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>修改文本</legend> <input type="checkbox" name="check" id="check"> <label for="check">I agree</label> </fieldset> </div> </form>
对复选框分组：
<form action="" method="get"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> //垂直依次排列 <legend>选择城市</legend> <input type="checkbox" name="bj" id="bj"> <label for="bj">北京</label> <input type="checkbox" name="bj" id="bj"> <label for="bj">北京</label> <input type="checkbox" name="bj" id="bj"> <label for="bj">北京</label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> //同在一行显示 <legend>选择城市</legend> <input type="checkbox" name="bj" id="bj"> <label for="bj">北京</label> <input type="checkbox" name="bj" id="bj"> <label for="bj">北京</label> <input type="checkbox" name="bj" id="bj"> <label for="bj">北京</label> </fieldset> </div> </form>
转载于:https://www.cnblogs.com/zhangchen2015/p/4579689.html
