作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在使用 jQuery Mobile 创建一个移动网络应用程序。
我正在为每个页面使用 theme-b
,我想为每个页面动态更改为另一个主题。如何动态更改主题?
最佳答案
您可以定位与特定小部件相关的特定类,重置它们的类,然后添加您选择的主题类:
//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 或其他开发人员控制台轻松找到每个小部件的类。
更新
当您考虑 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/
关于jquery - 如何在 jQuery Mobile 中动态更改主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8656801/
我是一名优秀的程序员,十分优秀!