![](/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.