問題描述

我當前的代碼是

測試

當窗口大小小于640px時，我如何將其更改為:

測試

data-role="panel" 是 jquerymobile 代碼.問題集中在我們如何將 data-role="panel" 屬性添加到 div 上.謝謝！

您可以在 http://jsbin.com/wakagumu/11/edit.如果成功，將 id="column-left" 更改為 data-role="panel" id="left-panel" 后，測試FIRST"將消失.

更改屬性不會將div轉換為面板，您需要初始化 手動.在 jQuery Mobile 1.3 中，您應該在動態附加 panel 時使用 .trigger("pagecreate") 以初始化它.

下面的解決方案創建一個面板并在頁面的寬度較小時移動內容 div的元素；它刪除 panel 并將 content div 的元素返回到它們的原始位置.此外，它會在 header 內創建一個按鈕來打開 面板.它可以用于任何頁面事件以及窗口的throttledresize和orientationchange.

$(window).on("throttledresize", function () {var activePage = $.mobile.activePage;if ($(window).width() <500 && activePage.find("[data-role=panel]").length === 0) {/* 創建按鈕 */var button = $("", {"數據角色": "按鈕","數據圖標": "條","id": "panelBtn","數據主題": "e",課程:ui-btn-left"}).text("面板");/* 添加點擊監聽器以打開面板并將其附加到標題 */activePage.find(".ui-header").append($(button).on("click", function () {$("#left-panel").panel("open");}));/* 保存菜單 */var menu = $("#menu");/* 創建一個面板附加菜單創建頁面 */activePage.prepend($("
", {id:左面板"，數據角色":面板"，數據位置":左"，數據顯示":推送"}).append($("
", {課程:ui-panel-inner"}).append(menu))).trigger("pagecreate");}if ($(window).width() > 500 && activePage.find("[data-role=panel]").length === 1) {/* 移除面板和按鈕返回菜單到內容 div */如果(activePage.hasClass(ui-page-panel-open")){activePage.find("[data-role=panel]").panel("close").on("panelclose", function () {var menu1 = activePage.find("[數據角色=面板] #menu");activePage.find("[data-role=content]").append(menu1);activePage.find("[數據角色=面板]").remove();activePage.find("#panelBtn").remove();activePage.trigger("pagecreate");});} 別的 {var menu1 = activePage.find("[數據角色=面板] #menu");activePage.find("[data-role=content]").append(menu1);activePage.find("[數據角色=面板]").remove();activePage.find("#panelBtn").remove();activePage.trigger("pagecreate");}}});

<塊引用>

演示

My current code is

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

When the window size is smaller than 640px, how can I change it as:

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

data-role="panel" is jquerymobile code. The question is focusing on how we can add the data-role="panel" attribute to the div. Thanks!

You may test your code in http://jsbin.com/wakagumu/11/edit. If it success, the test "FIRST" will disappear after changing the id="column-left" to data-role="panel" id="left-panel".

Changing attributes won't convert a div into a panel, you need to initialize it manually. In jQuery Mobile 1.3, you should use .trigger("pagecreate") when appending a panel dynamically in order to initialize it.

The below solution creates a panel and moves content div's elements when page's width is small; and it removes panel and returns content div's element to their original position. Also, it creates a button inside header to open the panel. It can be used in any page events as well as on window's throttledresize and 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");
        }
    }
});

Demo

這篇關于當 jquerymobile 中的窗口大小更改時更改 div id 和屬性的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！