【问题标题】:jQuery Mobile custom select not closingjQuery Mobile 自定义选择不关闭
【发布时间】: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">&nbsp;</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


【解决方案1】:

哇...没有答案...几乎一年前!我有相同的(或实际上相似的......很快)的问题。所以,我来谈谈我的经验:

(我需要提及的是,我可以选择多个项目,但是当我点击标题上方的十字按钮时......不会有任何关闭操作。所以 DANG!

我一直试图为此想出某种解决方法.. 所以我开始改变一些其他 jQm 弹出窗口,我现在面临的问题是我的解决方案似乎显示带有 html 对象的不同按钮(每个当你点击这个唯一的按钮时,它会绕过 SELECT 的项目,在这个按钮内一次显示一个,非常奇怪......至少对于我在 jquery mobile 上的新手体验来说,所以也许这是我没有的几个简单的选项膝盖如何设置,但我对解决方案视而不见。

那么,我需要什么才能从一个常见的 SELECT (HTML OBJECT) 中显示一个像图片中的弹出窗口(也粘贴在下面的代码)?

(请看看我打算实现的目标(外观和感觉) h t t p://我。堆 。我是你。 c o m /I5q0I.png

这是我应该拥有的代码(但交叉工作,不是。)

            <div class="ui-popup-container ui-popup-active" id="select-choice-7458-listbox-popup" tabindex="0" style="max-width: 1825px; top: 2788.5px; left: 805.5px;">
                <div id="select-choice-7458-listbox" class="ui-selectmenu ui-popup ui-body-a ui-overlay-shadow ui-corner-all">
                    <div class="ui-header ui-bar-c">
                        <h1 class="ui-title">

                        </h1>
                        <a href="#" class="ui-btn-left ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext" data-iconpos="notext" data-icon="delete" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" title="Close">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">
                                    Close
                                </span>
                                <span class="ui-icon ui-icon-delete ui-icon-shadow">
                                    &nbsp;</span>

                            </span>
                        </a>
                    </div>
                    <ul class="ui-selectmenu-list ui-listview" id="select-choice-7458-menu" role="listbox" aria-labelledby="select-choice-7458-button" data-theme="c" data-divider-theme="b">
                        <li data-option-index="0" data-icon="checkbox-off" data-placeholder="true" class="ui-selectmenu-placeholder ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child" 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"></a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="1" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow 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">
                                        Scribbling</a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;</span>
                            </div>
                        </li>
                        <li data-option-index="2" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow 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">
                                        Letter-like symbols</a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="3" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow 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">
                                        Strings of letters</a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="4" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow 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">
                                        Beginning sounds
                                    </a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="5" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow 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">
                                        Ending and medial sounds
                                    </a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="6" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child 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">
                                        Conventional writing
                                    </a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-04
    • 1970-01-01
    • 1970-01-01
    • 2012-07-13
    • 2012-05-29
    相关资源
    最近更新 更多