![](/img/trans.png)
[英]How to dynamically change data-theme of page element in jQuery Mobile
[英]Change data-theme in jQuery mobile
我想在他們按下按鈕后給我的用戶提供一些持久的反饋(比如它的縮進或其他東西)。 我試過了:
$(this).data('theme','b');
但這不起作用。
問:有沒有辦法顯示縮進按鈕,或者動態更改它的data-theme
?
我知道這是一個老問題,但我最近才遇到這個障礙。
這樣做的正確方法如下:
$(this).buttonMarkup({theme: 'b'});
我一直在尋找一種在jQuery Mobile中全局動態更改主題的方法(例如,點擊按鈕)。 原來比我想象的要復雜得多。 無論如何,這是我對此的看法,受到SO和其他網站上的各種解決方案的啟發:
// Dynamically changes the theme of all UI elements on all pages,
// also pages not yet rendered (enhanced) by jQuery Mobile.
$.mobile.changeGlobalTheme = function(theme)
{
// These themes will be cleared, add more
// swatch letters as needed.
var themes = " a b c d e";
// Updates the theme for all elements that match the
// CSS selector with the specified theme class.
function setTheme(cssSelector, themeClass, theme)
{
$(cssSelector)
.removeClass(themes.split(" ").join(" " + themeClass + "-"))
.addClass(themeClass + "-" + theme)
.attr("data-theme", theme);
}
// Add more selectors/theme classes as needed.
setTheme(".ui-mobile-viewport", "ui-overlay", theme);
setTheme("[data-role='page']", "ui-body", theme);
setTheme("[data-role='header']", "ui-bar", theme);
setTheme("[data-role='listview'] > li", "ui-bar", theme);
setTheme(".ui-btn", "ui-btn-up", theme);
setTheme(".ui-btn", "ui-btn-hover", theme);
};
還有一些額外的復雜性,因為我還想更新JQM尚未顯示的頁面主題。 以成對的選擇器和主題類來構造代碼有助於使我更清楚。
您可以調用此函數來動態更新所有UI元素的主題,例如:
$.mobile.changeGlobalTheme("b");
我也喜歡我見過的使用正則表達式的解決方案,但在這種情況下,我更喜歡明確說明選擇器和主題類的方法,因為添加新項目的清晰度和易用性。 我通過檢查DOM樹找出了選擇器/類對。
我必須說我很欣賞現代JavaScript代碼的Lisp風格。
也許這對你很有用: 動態更改jquery mobile color swatch
我認為可以用相同的方式完成按鈕。
對於表單中的提交按鈕,這對我來說使用jQuery Mobile 1.2.0:
$(this).buttonMarkup({theme: 'b'});
$(this).parent().buttonMarkup({ theme: "b" });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.