qileilove

blog已经转移至github,大家请访问 http://qaseven.github.io/

jQuery Mobile 表单选择菜单

jQuery Mobile 选择菜单

iPhone 上的选择菜单:

Android 设备上的选择菜单:

<select> 元素创建带有若干选项的下拉菜单。

<select> 元素中的 <option> 元素定义列表中的可用选项:

实例

<form method="post" action="demoform.asp">   <fieldset data-role="fieldcontain">     <label for="day">选择日期</label>     <select name="day" id="day">       <option value="mon">星期一</option>       <option value="tue">星期二</option>       <option value="wed">星期三</option>     </select>   </fieldset> </form> 

亲自试一试

提示:如果列表中包含了一长列相关的选项,请在 <select> 中使用 <optgroup> 元素:

实例

<select name="day" id="day">    <optgroup label="Weekdays">     <option value="mon">Monday</option>     <option value="tue">Tuesday</option>     <option value="wed">Wednesday</option>    </optgroup>    <optgroup label="Weekends">     <option value="sat">Saturday</option>     <option value="sun">Sunday</option>    </optgroup> </select> 

亲自试一试

自定义选择菜单

本页上方的图片,展示了移动平台显示选择菜单的独特方式。

如果您希望在所有移动设备上显示一致外观的选择菜单,请使用 jQuery 的自定义选择菜单,data-native-menu="false" 属性:

实例

<select name="day" id="day" data-native-menu="false">

亲自试一试

Multiple Selections

如需在选择菜单中选取多个选项,请在 <select> 元素中使用 multiple 属性:

实例

<select name="day" id="day" multiple data-native-menu="false">

亲自试一试

更多实例

使用 data-role="controlgroup"
如何组合一个或多个选择菜单。
使用 data-type="horizontal"
如何水平地组合选择菜单。
预选选项
如何预选择一个选项。
可折叠表单
如何创建可折叠表单。

posted on 2014-05-26 22:31 顺其自然EVO 阅读(216) 评论(0)  编辑  收藏 所属分类: jQuery Mobile 教程


只有注册用户登录后才能发表评论。


网站导航:
 
<2024年3月>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

导航

统计

常用链接

留言簿(55)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜