[英]How to dynamically change data-theme of page element in jQuery Mobile
Using jQuery mobile 1.3.2, I have a PhoneGap application in which I would like to update an initial login screen to reflect a data theme, based on the state of the application. 使用jQuery mobile 1.3.2,我有一个PhoneGap应用程序,我想在其中基于应用程序的状态更新初始登录屏幕以反映数据主题。 login page html is:
登录页面html是:
login 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 to change theme of login page: 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");
}
}
linked stylesheets & scripts (just in case): 链接的样式表和脚本 (以防万一):
<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>
And I call displayAppStatus throughout my code, if a user delays a notification, or suspends any notifications, or puts the app to sleep. 如果用户延迟了通知,或者挂起了任何通知,或者使应用进入睡眠状态,那么我会在整个代码中调用displayAppStatus。
What happens is that I will see the login page flash the color of the correct data-theme, but then the theme for the page will switch back to the default quickly. 发生的是,我将看到登录页面闪烁正确数据主题的颜色,但随后该页面的主题将迅速切换回默认值。
I have been here: Changing JQuery Mobile data-theme dynamically and jQuery mobile dynamically added theme to page 我到过这里: 动态更改JQuery Mobile数据主题和jQuery mobile动态向页面添加主题
but neither of these threads have solved my problem. 但是这些线程都不能解决我的问题。
That is very tricky specially because jquery mobile create a lot of CSS not visible in the code, to apply its styles. 这是非常棘手的,特别是因为jquery mobile创建了许多CSS代码中不可见的CSS来应用其样式。
I am pasting my bits of code that are working and allowing me to change the them of a page based on a product category. 我正在粘贴正在运行的代码片段,并允许我根据产品类别更改页面上的代码。 Here I am changing mainly the nav, header and footer styles, but just pass to the function the class you want to change.
在这里,我主要更改了nav,页眉和页脚样式,但只是将要更改的类传递给函数。
Hope it helps! 希望能帮助到你!
Here is how I call my function "Element_theme_refresh", newTheme is basically the jquery mobile theme names. 这就是我如何称呼我的函数“ 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
}
And here the actual function. 这里是实际功能。
/* 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.