【发布时间】:2013-09-20 12:52:58
【问题描述】:
我有一个使用 jQuery 1.6.2 和 jQuery Mobile 1.0b3 的 Web 应用程序。我需要显示一个选项列表,所以我使用了自定义选择。我无法使用标题按钮关闭选择,也无法选择选项。
nativeMenu = false 是全局设置的。 我使用
创建选择 <select data-mini="true">
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
HTML 看起来像这样(还有更多选项,所以选择全屏):
<div data-role="dialog" data-theme="c" data-overlay-theme="a" tabindex="0"
class="ui-page ui-body-c ui-dialog ui-overlay-a ui-page-active" style="min-height: 480px;">
<div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow">
<div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner">
<a href="#" data-icon="delete" data-iconpos="notext"
class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-a" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Close</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
<div class="ui-title"></div>
</div>
<div data-role="content" class="ui-corner-bottom ui-content ui-body-c" role="main">
<ul class="ui-selectmenu-list ui-listview" id="undefined-menu" role="listbox" aria-labelledby="undefined-button"
data-theme="c">
<li data-option-index="0" data-icon="false" class="ui-btn ui-btn-icon-right ui-li ui-btn-active ui-btn-up-c"
role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div"
data-iconpos="right" data-theme="c" aria-selected="true">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">Option1</a>
</div>
</div>
</li>
<li data-option-index="1" data-icon="false" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option"
data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right"
data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">Option2</a>
</div>
</div>
</li>
</div>
</div>
</div>
标题按钮适用于 jQuery 1.8.3 和 jQm 1.2.1(选择一个选项仍然不起作用),但更改此版本会导致我的旧应用程序出现其他问题,因此我更喜欢 1.6 的解决方案。 2 & jQm 1.0。 任何想法为什么选择不起作用?
编辑: 经过几天的搜索,我发现对话框没有关闭,因为我设置了 hashListeningEnabled = false。不幸的是,我无法改变这一点。我偶然发现了这个:https://github.com/jquery/jquery-mobile/issues/2285,但我无法升级 jQm/jQuery 版本。所以我只能为选择找到一些好的选择。有什么建议吗?
【问题讨论】:
-
标题按钮是什么意思?一旦选择了一个选项,菜单就会关闭。 jsfiddle.net/Palestinian/7vFqs
-
如果您使用长选择菜单,则会弹出一个对话框,其中包含选项列表。我从来没有在 1.6.4 上工作过,但你可以试试这个 jsfiddle.net/Palestinian/7vFqs
-
它不适用于全屏自定义选择(不是通过选择选项,也不是通过单击标题按钮)。
-
很抱歉未能在此问题上为您提供帮助。
-
@Omar:我已经尝试过您的解决方案,绑定更改事件,它可以工作。但是,它不能解决标题按钮问题,如果选择没有改变,菜单仍然保持打开状态。所以我不想要一个解决方法,我想弄清楚我的代码中有什么问题破坏了 jQm 提供的默认行为。
标签: jquery-mobile select menu