动态更改 jquery 移动色板 [英] change jquery mobile color swatch dynamically

问题描述

我想用 javascript 动态更改 jquery-mobile 按钮颜色样本，但我找不到方法(除了删除和添加所有类和事件处理程序，但这太麻烦了).
最好的方法是什么?

解决方案

好吧，我做了这样的事情:

• http://jsfiddle.net/Sgrve/20/
• http://jsfiddle.net/Sgrve/28/(所有表单元素)

JS(可能需要稍作调整才能得到您想要的)

$('input[name=theme-options]').change(function() {var currentTheme = $('#home').attr('data-theme');var selectedTheme = $(this).val();alert('CT'+currentTheme+'ST'+selectedTheme);$('.ui-body-' + currentTheme).each(function(){$(this).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme);});$('.ui-btn-up-' + currentTheme).each(function(){$(this).removeClass('ui-btn-up-' + currentTheme).addClass('ui-btn-up-' + selectedTheme);});$('.ui-btn-down-' + currentTheme).each(function(){$(this).removeClass('ui-btn-down-' + currentTheme).addClass('ui-btn-down-' + selectedTheme);});$('#home').find('*[data-theme]').each(function(index){$(this).attr('data-theme',selectedTheme);});$('#home').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');});

HTML(可能需要稍作调整才能得到您想要的)

<div data-role="内容"><div class="content-primary"><p><div data-role="fieldcontain"><fieldset data-role="控制组"><legend>选择一个主题:</legend><input type="radio" name="theme-options" id="theme-option-a" value="a" checked="checked" data-theme="a"/><label for="theme-option-a" data-theme="a">主题A</label><input type="radio" name="theme-options" id="theme-option-b" value="b" data-theme="b"/><label for="theme-option-b" data-theme="b">主题B</label><input type="radio" name="theme-options" id="theme-option-c" value="c" data-theme="c"/><label for="theme-option-c" data-theme="c">主题C</label><input type="radio" name="theme-options" id="theme-option-d" value="d" data-theme="d"/><label for="theme-option-d" data-theme="d">主题 D</label><input type="radio" name="theme-options" id="theme-option-e" value="e" data-theme="e"/><label for="theme-option-e" data-theme="e">主题 E</label></fieldset>
</p><form action="#" method="get"><h2>表单元素</h2><div data-role="fieldcontain"><label for="name">文本输入:</label><input type="text" name="name" id="name" value=""/>

<div data-role="fieldcontain"><label for="textarea">Textarea:</label><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

<div data-role="fieldcontain"><label for="search">搜索输入:</label><input type="search" name="password" id="search" value=""/>

<div data-role="fieldcontain"><label for="slider2">翻转开关:</label><select name="slider2" id="slider2" data-role="slider"><option value="off">Off</option><option value="on">On</option></选择>

<div data-role="fieldcontain"><label for="slider">滑块:</label><input type="range" name="slider" id="slider" value="0" min="0" max="100"/>