카테고리 없음
[자바 스크립트] jquerymobile에서 창 크기가 변경되면 div ID 및 속성 변경
행복을전해요
2021. 1. 20. 17:04
$(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', '');
}
}
});
변경 속성이 에 사업부를 변환하지 않습니다 패널 , 당신은 할 필요가 초기화 수동으로. jQuery Mobile 1.3에서는 패널 을 초기화 하기 위해 동적으로 패널을.trigger("pagecreate") 추가 할 때 사용해야 합니다.
아래 솔루션은 패널을 만들고 페이지 너비가 작을 때 콘텐츠 div의 요소를 이동 합니다 . 패널 을 제거 하고 콘텐츠 div의 요소를 원래 위치로 되돌립니다. 또한 헤더 안에 버튼을 만들어 패널 을 엽니 다 . 모든 페이지 이벤트 는 물론 창 및 .throttledresizeorientationchange
$(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");
}
}
});
데모
출처
https://stackoverflow.com/questions/22008851