Мой текущий код
<div id="column-left"> Test </div> Когда размер окна меньше 640 пикселей, как я могу изменить его как:
<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 . Если это произойдет, тест «FIRST» исчезнет после изменения id = «column-left» на data-role = «panel» id = «left-panel».
$(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', ''); } } });
Изменение атрибутов не преобразует div в панель , вам необходимо инициализировать его вручную. В jQuery Mobile 1.3 вы должны использовать .trigger("pagecreate") при динамическом добавлении панели для ее инициализации .
В приведенном ниже решении создается панель и перемещается элементы div div, когда ширина страницы мала; и он удаляет панель и возвращает элемент div 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"); } } });
демонстрация