Jquery移动对话框可滚动

Question

我在我的应用程序中使用 jquery mobile，我在选择时使用了data-native-menu="false"。

<select id="chosenpro" data-theme="a" data-native-menu="false">
</select>

Jquery Mobile 打开一个带有这些类的 dialog 弹出窗口：

.ui-popup-container .ui-popup-active

然后我在其中设置了<li>s 的样式，使它们看起来像一个带有display:inline-block; 包括图像的网格。 但我希望这个弹出窗口可以滚动，因为它比我的页面高。

我知道这个答案，但无法适应我的情况： Setting max height of a dialog, then allow scrolling

你能帮忙吗？

http://jsfiddle.net/LzLEw/6/

谢谢

Answer 1

select 菜单和data-menu-native="false" 会根据屏幕的高度和选项数量转换为 popup 或 dialog。

弹出窗口/_dialog_ 包含select 菜单的id 和-dialog。例如。如果select 菜单的id 是foo，则对话框 的id 变为foo-dialog。

要操作该对话框，您需要首先检索其'id，然后绑定任何页面事件以进行任何更改。

进行此类修改的最佳事件是pageinit，因为它每个页面只触发一次。在检索到select 菜单的id 后，将pageinit 绑定到该对话框 以对包含select 菜单的选项的data-role=content 进行更改。

您需要应用于data-role=content 的更改是height 和overflow-y。

更新：你不需要覆盖overflow-y，设置一个固定的height就足够了。

/* when pageX which contains long selectmenu
   is being initialized, retrieve selectmenu's id */

$(document).on("pageinit", "#pageID", function () {

    /* selectmenu's id */
    var selectID = "#" + $("select", this)[0].id + "-dialog";

    /* dialog is being initialized,
       change height to half screen's height */
    $(document).on("pageinit", selectID, function () {
        var height = $.mobile.getScreenHeight() / 2;
        $(".ui-content", this).css({
            height: height
        });
    });
});

Demo - jQM 1.3.2 ⁽¹⁾

⁽¹⁾ 在 iPhone 5 上测试 - Safari 移动版