2

我有一个使用 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 版本。所以我只能为选择找到一些好的选择。有什么建议么 ?

4

1 回答 1

0

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

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

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

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

当您单击交叉链接时不会关闭的 jqm 内的漂亮而美丽的选择

(请看看我打算实现什么(外观和感觉)http://i.stack.imgur.com/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>
于 2014-10-08T05:28:14.153 回答