举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > jquery表单选择器的使用 jQuery Mobile 表单选择

jquery表单选择器的使用 jQuery Mobile 表单选择

2023-06-13 23:18 jQueryMobile教程

jquery表单选择器的使用 jQuery Mobile 表单选择

jquery表单选择器的使用 jQuery Mobile 表单选择

jquery表单选择器的使用

jQuery Mobile 表单选择菜单


jQuery Mobile 选择菜单

Iphone 上的选择菜单:
Android/SGS4 设备上的选择菜单:

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

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

实例

<form method="post" action="demoform.html">
<fieldset data-role="fieldcontain">
<label for="day">Select Day</label>
<select name="day" id="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</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">



多个选择

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

实例

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



实例

更多实例

使用 data-role="controlgroup"
如何组合一个或多个选择菜单。

使用 data-type="horizontal"
如何水平组合选择菜单。

预选中选项
如何预选中一个选项。

可折叠表单
如何创建可折叠表单。


通过jQuery Mobile可以让表单的选择具有更加的效果,通过以上的使用实例你应该感受到了,在下一节的内容中,我们加一起来了解一下jQuery Mobile的表单滑动条该怎么使用!
阅读全文
以上是编程学为你收集整理的jquery表单选择器的使用 jQuery Mobile 表单选择全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部