jquerymobile的content高度100%佔滿螢幕剩餘空間
阿新 • • 發佈:2019-01-08
Why
為了讓content佔滿空間, 我們需要一段js程式碼.
<圖片來自參考文章>
before
after
How
在你的初始化方法中呼叫initHeightSetting
, 傳入第一個page的id就可以了.
code
/// 設定高度的函式
function setHeight(nextPage) {
var screen = $.mobile.getScreenHeight();
var header = nextPage.children(".ui-header" ).hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight();
var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight()
var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height();
var content = screen - header - footer - contentCurrent;
nextPage.children(".ui-content").height(content);
}
/// 初始化高度設定函式.
function initHeightSetting(yourFirstPageId) {
// 這段程式碼在初始化的時候執行.設定第一個頁面的高度
setHeight($(yourFirstPageId));
// 在頁面顯示前會執行下面程式碼.設定高度
$( "body" ).on( "pagecontainershow", function( event, ui ) {
var nextPage = $(ui.toPage[0]);
setHeight(nextPage);
});
}