[英]How to dynamically change data-theme of page element in jQuery Mobile
使用jQuery mobile 1.3.2,我有一個PhoneGap應用程序,我想在其中基於應用程序的狀態更新初始登錄屏幕以反映數據主題。 登錄頁面html是:
登錄html :
<div id="login" data-role="page">
<div data-role="header">
<h1>Survey login</h1>
</div>
<div data-role="content">
<!--div id="logincontent"></div-->
<form id="form-login">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="login-password">Password:</label>
<input type="password" name="login-password" id="login-password" value="" placeholder="Password" />
</div>
<a href="#" id="login-button" data-role="button" onclick="checkLogin()">Login</a>
</form>
</div>
<div data-role="footer" id="login-footer" data-theme="a">
<h4 id="login-footer-header">UIC & EVL</h4>
</div>
</div>
JS功能更改登錄頁面的主題:
function displayAppStatus(type){
if(type == 'suspend'){
$("#login").page({theme:'g'});
$("#login").trigger('create');
$("#login-footer-header").text("Log in to break suspension");
}
else if(type == 'bedtime'){
$("#login").page({theme:'f'});
$("#login").trigger('create');
$("#login-footer-header").text("Log in to break bedtime");
}
else if(type == 'delay'){
$("#login").page({theme:'h'});
$("#login").trigger('create');
$("#login-footer-header").text("Log in to break delayed notification");
}
//Cancel appStatus display
else if(type == 'cancel'){
$("#login").page({theme:'a'});
$("#login").trigger('create');
$("#login-footer-header").text("UIC & EVL");
}
}
鏈接的樣式表和腳本 (以防萬一):
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/themes/ecig/ecig_themes.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.css" />
<script src="cordova.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
如果用戶延遲了通知,或者掛起了任何通知,或者使應用進入睡眠狀態,那么我會在整個代碼中調用displayAppStatus。
發生的是,我將看到登錄頁面閃爍正確數據主題的顏色,但隨后該頁面的主題將迅速切換回默認值。
我到過這里: 動態更改JQuery Mobile數據主題和jQuery mobile動態向頁面添加主題
但是這些線程都不能解決我的問題。
這是非常棘手的,特別是因為jquery mobile創建了許多CSS代碼中不可見的CSS來應用其樣式。
我正在粘貼正在運行的代碼片段,並允許我根據產品類別更改頁面上的代碼。 在這里,我主要更改了nav,頁眉和頁腳樣式,但只是將要更改的類傳遞給函數。
希望能幫助到你!
這就是我如何稱呼我的函數“ Element_theme_refresh”,newTheme基本上是jquery移動主題名稱。
function UpdateNavBarStyles ()
{
var newTheme = AssignMeTheme ( sessionStorage.categoriaID );
Element_theme_refresh ( '#pag_fichaProducto', newTheme );
Element_theme_refresh ( '.ui-header', newTheme );
Element_theme_refresh ( '.ui-footer', newTheme );
Element_theme_refresh ( '.menuPanelButton', newTheme ); // Once the collapsible exists, update its theme
Element_theme_refresh ( '.backButton', newTheme ); // Back button, apply new theme
Element_theme_refresh ( '.quoteBtn', newTheme ); // Quote Cart widget button, update its theme
Element_theme_refresh ( '.syncroBtn', newTheme ); // Data Syncronization button, update its theme
}
這里是實際功能。
/* This function query the element for the current applied jquery mobile theme and change
it to the input data-theme or swatch */
function Element_theme_refresh( element, newTheme )
{
var curTheme = $(element).attr('data-theme') || 'a';
$(element).attr('data-theme', newTheme);
if( $(element).attr('class') ) {
// Theme classes end in "-[a-z]$", so match that
var classPattern = new RegExp('-' + curTheme + '$');
newTheme = '-' + newTheme;
var classes = $(element).attr('class').split(' ');
for( var key in classes ) {
if( classPattern.test( classes[key] ) ) {
classes[key] = classes[key].replace( classPattern, newTheme );
}
}
$(element).attr('class', classes.join(' '));
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.