回答
您可以定位涉及到具體的小部件的具體類,重設自己的班級,然後添加主題類你所選擇的:
//set your new theme letter
var theme = 'e';
//reset all the buttons widgets
$.mobile.activePage.find('.ui-btn')
.removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
.addClass('ui-btn-up-' + theme)
.attr('data-theme', theme);
//reset the header/footer widgets
$.mobile.activePage.find('.ui-header, .ui-footer')
.removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
.addClass('ui-bar-' + theme)
.attr('data-theme', theme);
//reset the page widget
$.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
.addClass('ui-body-' + theme)
.attr('data-theme', theme);
這絕不是一個全功能的代碼代碼片段中,當您切換主題並將其添加到上面的代碼中時,您需要找到任何其他想要更新的小部件。您可以通過使用FireBug或其他開發者控制檯輕鬆找到每個小部件可以輕鬆使用的類。
UPDATE
當你考慮到data-role="list-divider
元素這變得有點棘手:
var theme = 'c';
//the only difference between this block of code and the same code above is that it doesn't target list-dividers by calling: `.not('.ui-li-divider')`
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider')
.removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
.addClass('ui-btn-up-' + theme)
.attr('data-theme', theme);
//target the list divider elements, then iterate through them to check if they have a theme set, if a theme is set then do nothing, otherwise change its theme to `b` (this is the jQuery Mobile default for list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function (index, obj) {
if ($(this).parent().attr('data-divider-theme') == 'undefined') {
$(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
.addClass('ui-bar-b')
.attr('data-theme', 'b');
}
})
/*The rest of this code example is the same as the above example*/
這裏是一個演示:http://jsfiddle.net/VNXb2/7/
以上回答對我幫助很大,我根據自己的需要修改了一下,因爲我使用了整合器,並期望擁有20多個主題。這是我做了什麼
function updateTheme(newTheme) {
//alert("In refresh");
var rmbtnClasses = '';
var rmhfClasses = '';
var rmbdClassess = '';
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
$.each(arr,function(index, value){
rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
rmhfClasses = rmhfClasses + " ui-bar-"+value;
rmbdClassess = rmbdClassess + " ui-body-"+value;
});
// reset all the buttons widgets
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);
})
現在,當我得到通過JSON服務器新的主題我只是調用這個方法與新的主題爲PARAM。
問候 拉傑什Ĵ
如何更改的主題?我需要在這裏添加什麼課程? – Prasoon 2014-01-05 06:35:46
Rajesh的回答對我幫助很大......但拉傑什,你錯過了一類重要的----「UI-頁面主題 - *」,所以我修改你的答案和現在它是完美的jQuery Mobile的1.4.5(再次)...
var updateTheme = function(newTheme) {
var rmbtnClasses = '';
var rmhfClasses = '';
var rmbdClassess = '';
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's']; // I had themes from a to s
$.each(arr, function(index, value) {
rmbtnClasses = rmbtnClasses + ' ui-btn-up-' + value + ' ui-btn-hover-' + value;
rmhfClasses = rmhfClasses + ' ui-bar-' + value;
rmbdClassess = rmbdClassess + ' ui-body-' + value + ' ui-page-theme-'+ value;
});
// reset all the buttons widgets
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme + ' ui-page-theme-'+ newTheme).attr('data-theme', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
});
};
來自A-S的主題如下:[鏈接](http://www.cnblogs.com/SkyD/p/3999418.html) – 2015-09-18 12:51:44
- 1. 動態更改JQuery Mobile數據主題
- 2. 如何更改動態添加li項目jquery mobile的主題?
- 3. 動態更改jQuery Mobile中的超鏈接主題
- 4. 如何在jQuery Mobile中動態更改列表視圖列表項的主題?
- 5. 動態更改主題
- 6. 動態更改jQuery TimePicker主題
- 7. 如何動態更改prestashop主題
- 8. 更改Android主題動態
- 9. 更改GWT主題動態
- 10. jQuery Mobile 1.4.0:動態更改頁面的標題和標題
- 11. jquery mobile多頁動態頁腳更改
- 12. 更改flipswitch jquery mobile的活動狀態
- 13. 如何在JQuery中動態更改URL
- 14. 如何在mvc3中動態更改主題
- 15. 如何在ASP.Net中動態更改主題和_Layout MVC4
- 16. 動態更改活動主題
- 17. Jquery Mobile:動態更改可摺疊div的標題文本?
- 18. JQuery更改主題
- 19. 在jquery mobile中動態更改表數據優先級
- 20. 在jQuery Mobile列表視圖中動態更改圖標
- 21. 更改jQuery Mobile中點擊按鈕的主題
- 22. WPF和MVVM - 動態更改主題
- 23. 使用PHP動態更改主題
- 24. 如何在點擊主題下拉菜單後動態更改主題
- 25. 如何動態更改extjs 4.2項目中的主題?
- 26. 動態更改JWT主題字段
- 27. Android來動態更改APP主題
- 28. 安卓:更改應用主題動態
- 29. 如何更改jQuery Mobile中的頁面?
- 30. 如何更改jquery mobile中的內容?
我米使用列表分壓器在我的應用程序靜態它正在發生變化,但其動態並沒有改變這是唯一的問題。 – 2012-01-05 17:07:57
@ kanna我更新了我的答案,'data-role =「list-divider」需要一點邏輯才能讓它們正確,但我認爲我的答案非常完整:http://jsfiddle.net/VNXb2/7/ – Jasper 2012-01-05 22:14:51
@ kanna另一個想法是,如果您在widget初始化之前更改widget的主題,那麼它會在您選擇的主題中正確初始化。如果綁定到'pageInit'事件,則不應初始化小部件,並且可以更改頁面的主題或頁面中的任何元素。 – Jasper 2012-01-05 22:21:40