jQueryMobile中窗口大小更改时更改div ID和属性 [英] Change div id and property when window size change in jquerymobile
问题描述
我当前的代码是
<div id="column-left">
Test
</div>
当窗口大小小于640px时,如何将其更改为:
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"是jquerymobile代码.问题集中在如何将data-role ="panel"属性添加到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!
您可以在 http://jsbin.com/wakagumu/11/edit.如果成功,则将id ="column-left"更改为data-role ="panel" id ="left-panel"后,测试"FIRST"将消失.
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".
推荐答案
更改属性不会将div转换为 panel ,您需要初始化手动.在jQuery Mobile 1.3中,当动态添加 panel 以便对其进行初始化时,应使用.trigger("pagecreate")
.
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.
以下解决方案创建 panel 并在 page 的宽度较小时移动 content div的元素;并删除 panel 并将 content div的元素返回到其原始位置.另外,它在 header 内创建一个按钮以打开 panel .它可以用于任何 page事件以及窗口的throttledresize
和orientationchange
.
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和属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!