Javascript 在jquerymobile中更改窗口大小时更改div id和属性

我现在的代码是

<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。谢谢

您可以在中测试代码。如果成功，将id=“column left”更改为data role=“panel”id=“left panel”后，测试“FIRST”将消失。

$（窗口）。调整大小（函数（）{
if（$（this）.width（）<640）{
var myDiv=$（“#列左”）；
如果（myDiv.length>0）{
myDiv.attr（'id'，'left panel'）。data（'role'，'panel'）。data（'position'，'left'）；
}
}否则{
var myDiv=$（“#左面板”）；
如果（myDiv.length>0）{
myDiv.attr（'id'，'column left'）.data（'role'，''）.data（'position'，''）；
}
}
});

更改属性不会将div转换为面板，您需要手动初始化它。在jquerymobile1.3中，动态追加面板以初始化面板时，应该使用

.trigger（“pagecreate”）

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

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");
        }
    }
});

$（窗口）.on（“throttledresize”，函数（）{
var activePage=$.mobile.activePage；
if（$（window.width（）<500&&activePage.find（“[data role=panel]”）。长度==0）{
/*创建按钮*/
var按钮=$（“

谢谢您的回答。代码不起作用。但是，我发现您可能有正确的方法将数据角色属性添加到div。您是否介意将代码合并到下（此代码可以在调整大小时更改，但无法将数据角色属性添加到div。）试一试？你在使用jQM 1.3.2吗？是的。但我认为添加数据角色属性与jQM版本无关。这是相关的，因为手动初始化jQM小部件有不同的方法。icic！请帮助并试一试！谢谢！对我来说似乎有点复杂。是否可以添加一个if条件来分别显示这两个html？@user2699714是的，这很复杂，这就是你想要的。你说的“显示两个html”是什么意思“？如果宽度>640显示，否则，显示@user2699714在这种情况下，您必须插入一个面板和一个按钮，根据宽度隐藏/显示按钮。这是您想要的吗？您的代码正是我想要的，但有点复杂。您可以简单地输入代码吗？”？
$(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");
        }
    }
});