选择菜单 Select menus

优质

小牛编辑

136浏览

2023-12-01

选择菜单摒弃了原生的select 元素的样式，原生的select元素被隐藏，并被一个由jquery mobile框架自定义样式的按钮和菜单替代。菜单是ARIA的（即Accessible Rich Internet Applications)并且桌面电脑的键盘也是可访问的。

当被点击时，手机自带的原生的菜单选择器会打开。菜单内某个值被选中后，自定义的选择按钮的值更新为你选择的那一个。

要添加这样的选择菜单组件，使用标准的select 元素和位于其内的一组option元素。注意要把label的for属性设为select的id值，使他们能够在语义上相关联。把它们包裹在data-role="fieldcontain" 的div 里面进行分组。

框架会自动找到所有的select 元素并自动把他们增强为自定义的选择菜单。

选择菜单 Select menus

<div data-role="fieldcontain">
　 <label for="select-choice-1" class="select">Choose shipping method:</label>
　 <select name="select-choice-1" id="select-choice-1">
　　 <option value="standard">Standard: 7 day</option>
　　 <option value="rush">Rush: 3 days</option>
　　 <option value="express">Express: next day</option>
　　 <option value="overnight">Overnight</option>
　 </select>
</div>

选择菜单 Select menus　

就会形成这样的列表菜单

注意：原生的选择菜单不能通过multiple="multiple" 属性进行多项选择，如果你有这个需求，我们建议使用自定义菜单。

使用自定义菜单的选项 Option to use custom menus

你可以自己选择使用自定义样式的选择菜单，而不是原生的。这样可以给菜单定义主题，使你的网站在视觉和体验上更加出色，而且在跨平台时也能够保持一致性。并且，他提供了对菜单的多项选择，并且修复了某些平台缺失的功能，比如Android对于optgroup的支持，并且增加了一种优雅的方式来处理占位符值。（下面会解释）。最后，自定义的菜单在桌面电脑浏览器上视觉上会更出色，因为原生的菜单在桌面电脑上看上去比移动设备上要小一些，那如果你的项目主要面对桌面用户的话，那视觉上就有点奇怪了。

注意，把原生菜单解析为自定义菜单的话会有性能开销。如果你页面里面有很多选择菜单，，或者某个菜单有很多选项，就会影响页面性能，所以我们的建议是不要滥用自定义菜单。

给菜单添加data-native-menu="false"属性，就可以把菜单转为自定义菜单。或者，在页面的mobileinit事件的回调函数中将选择菜单的nativeMenu设为false也可以达到相同的效果。这将会在全局把所有的选择菜单都默认设为自定义菜单。以下代码必须在jQuery加载后且 jQuery Mobile加载前添加：

$(document).bind('mobileinit',function(){
　　$.mobile.selectmenu.prototype.options.nativeMenu = false;
});

如果菜单的选项不多的话，会以小弹出框的形式和动画出现。

如果选择菜单太多的选项而不能显示在屏幕中，框架会自动创建一个新 "page"，表现为一个标准的列表，包含了所有的选项。使我们能通过设备原生的滚动条在很长的一个列表内选择所有的选项。页面的标题就是label的文本。

占位符选项 Placeholder options

• 没有值的option（或者一个空值属性）

• 没有文本节点的option

• 带有data-placeholder="true"属性的option。（使你将带有值以及文本节点的选项用来作为占位符。）

你可以通过插件的 hidePlaceholderMenuItems 选项禁用该特性，方法如下：

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;

禁用选项 Disabled options

jQuery Mobile会把带有disabled 属性的选项禁用并且在样式上标记。

在下面的实例中，第二个选项 "Rush: 3 days"被设置为禁用：

对于选项组的支持 Optgroup support

如果一个选择菜单包含 optgroup元素，jQuery Mobile会根据label的文本创建一个分割项的选项：

多项选择 Multiple selects

如果给你的选单加入multiple 属性，jQuery Mobile通过一系列的方式来增强元素：

• 菜单里面会创建一个header元素并在占位符文本旁边显示一个关闭按钮。

• 点击选项时不会关闭弹出菜单。

• 选项旁边会出现类似checkbox的图标。

• 超过2项被选择时会在选择按钮里出现一个表示当前选项数目的气泡。

• 选择的各项文本会在按钮里变成一行用逗号分隔的文本。如果按钮不够宽，多余的部分则会变成省略号。

• 如果没有选项被选择，按钮文本会保持占位符的文本

• 如果占位符元素不存在，默认按钮文本会是空白的，header也仅仅显示一个关闭按钮。因为这不是友好的用户体验，我们建议你在使用多选菜单时总是指定一个占位符元素。。

当选项太多以至于菜单会在一个新的页面出现时，占位符文本会在没有选项是显示在按钮中，label文本会在菜单的header中显示。这与小对话框式的选择菜单不同的，小对话框式的选择菜单的占位符文本会同时显示在按钮和header中。

Data 属性的支持 Data attribute support

你可以对select指定jqmobile的针对button 的data- 属性。例如：我们给下面的例子添加了 theme, icon and inline 属性。

刷新选择菜单 Refreshing a select

如果你通过js操作了选择菜单，务必通过refresh 方法来更新他的样式。

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");