jQueryMobile中窗口大小更改时更改div ID和属性

Question

我当前的代码是

<div id="column-left">
     Test
</div>

当窗口大小小于640px时，如何将其更改为：

<div data-role="panel" id="left-panel" data-position="left">
     Test
</div>

data-role =“ panel”是jquerymobile代码。 问题集中在如何将data-role =“ panel”属性添加到div上。 谢谢！

您可以在http://jsbin.com/wakagumu/11/edit中测试您的代码。 如果成功，则将id =“ column-left”更改为data-role =“ panel” id =“ left-panel”后，测试“ FIRST”将消失。

Answer 1

$(window).resize(function(){
    if ($(this).width() < 640) {
        var myDiv = $('#column-left');
        if (myDiv.length > 0) {
            myDiv.attr('id', 'left-panel').data('role', 'panel').data('position', 'left');
        }
    } else {
        var myDiv = $('#left-panel');
        if (myDiv.length > 0) {
            myDiv.attr('id', 'column-left').data('role', '').data('position', '');
        }
    }
});

Answer 2

更改属性不会将div转换为面板 ，您需要手动对其进行初始化 。 在jQuery Mobile 1.3中，当动态添加面板以对其进行初始化时，应使用.trigger("pagecreate") 。

下面的解决方案创建一个面板，并在页面宽度较小时移动content div的元素。 并移除面板并将content div的元素返回到其原始位置。 此外，它还在标题内创建一个按钮以打开面板 。 它可以用于任何页面事件以及窗口的throttledresize和orientationchange 。

$(window).on("throttledresize", function () {
    var activePage = $.mobile.activePage;
    if ($(window).width() < 500 && activePage.find("[data-role=panel]").length === 0) {
       /* create button */
        var button = $("<a/>", {
            "data-role": "button",
                "data-icon": "bars",
                "id": "panelBtn",
                "data-theme": "e",
            class: "ui-btn-left"
        }).text("Panel");
        /* add click listener to open panel 
           and append it to header         */
        activePage.find(".ui-header").append($(button).on("click", function () {
            $("#left-panel").panel("open");
        }));

        /* save menu */
        var menu = $("#menu");
        /* create a panel 
           append menu
           create page    */
        activePage.prepend($("<div/>", {
            id: "left-panel",
                "data-role": "panel",
                "data-position": "left",
                "data-display": "push"
        }).append($("<div/>", {
            class: "ui-panel-inner"
        }).append(menu))).trigger("pagecreate");
    }

    if ($(window).width() > 500 && activePage.find("[data-role=panel]").length === 1) {
        /* remove panel and button
           return menu to content div */
        if (activePage.hasClass("ui-page-panel-open")) {
            activePage.find("[data-role=panel]").panel("close").on("panelclose", function () {
                var menu1 = activePage.find("[data-role=panel] #menu");
                activePage.find("[data-role=content]").append(menu1);
                activePage.find("[data-role=panel]").remove();
                activePage.find("#panelBtn").remove();
                activePage.trigger("pagecreate");
            });
        } else {
            var menu1 = activePage.find("[data-role=panel] #menu");
            activePage.find("[data-role=content]").append(menu1);
            activePage.find("[data-role=panel]").remove();
            activePage.find("#panelBtn").remove();
            activePage.trigger("pagecreate");
        }
    }
});

演示版