如何动态更改JQM可折叠的主题
how to dynamically change theme of JQM collapsible
我有这个可折叠的:
<div id ="optionsDiv" data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Options</h3>
<div data-role="fieldcontain" id="checkboxesDiv">
<label>
<input type="checkbox" name="clearafter" id="cbClearAfter" />Clear After Solving</label>
<label>
<input type="checkbox" name="alwayssimplify" id="alwaysSimplify" />Always Simplify Roots (may be wrong)</label>
<small id="whatsthatinfobox">What's This?</small>
<hr>
<fieldset data-role="controlgroup" data-type="horizontal" id="themeChanger">
<legend>Theme:</legend>
<input type="radio" name="radio-choice" id="radio-choice-day" value="day" checked="checked" />
<label for="radio-choice-day">Day</label>
<input type="radio" name="radio-choice" id="radio-choice-night" value="night" />
<label for="radio-choice-night">Night</label>
</fieldset>
</div>
</div>
这检测水平单选按钮之间的变化:
$("#themeChanger").change(function(){
if ($("#radio-choice-day").is(":checked"))
{
theme = "day";
}
else
{
theme = "night";
}
changeTheme(theme);
});
你会在这里放什么:
function changeTheme(theme)
{
if (theme=="day")
{
//change to day theme
}
else
{
//change to night theme
}
}
为了更改可折叠的data-theme
和data-content-theme
属性?
我试过使用attr("data-theme","a");
,但它不起作用。
谢谢。
您只需要调用带有其他选项的可折叠小部件。
$("#optionsDiv").collapsible({theme: "a", contentTheme: "a"});
$("#optionsDiv").collapsible({theme: "b", contentTheme: "b"});
$("#themeChanger").change(function() {
if ($("#radio-choice-day").is(":checked")) {
theme = "day";
} else {
theme = "night";
}
changeTheme(theme);
});
function changeTheme(theme) {
if (theme == "day") {
$("#optionsDiv").collapsible({
theme: "a",
contentTheme: "a"
});
} else {
$("#optionsDiv").collapsible({
theme: "b",
contentTheme: "b"
});
}
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div id="optionsDiv" data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Options</h3>
<div data-role="fieldcontain" id="checkboxesDiv">
<label>
<input type="checkbox" name="clearafter" id="cbClearAfter" />Clear After Solving</label>
<label>
<input type="checkbox" name="alwayssimplify" id="alwaysSimplify" />Always Simplify Roots (may be wrong)</label>
<small id="whatsthatinfobox">What's This?</small>
<hr>
<fieldset data-role="controlgroup" data-type="horizontal" id="themeChanger">
<legend>Theme:</legend>
<input type="radio" name="radio-choice" id="radio-choice-day" value="day" checked="checked" />
<label for="radio-choice-day">Day</label>
<input type="radio" name="radio-choice" id="radio-choice-night" value="night" />
<label for="radio-choice-night">Night</label>
</fieldset>
</div>
</div>
相关文章:
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 只使用CSS创建可折叠菜单或spry菜单
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- QML中的可折叠面板
- 可折叠容器/柱.添加多个链接
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 如何防止我的引导可折叠框滚动页面
- 如何以可扩展和可折叠的树形结构显示XML模式
- 单击一个后自动折叠所有其他可折叠内容
- 可折叠侧边栏/导航菜单
- 可折叠<UL><李>不起作用
- Ext JS 5.1:当可折叠为true时,无法对面板进行标题设置
- jQuery与可折叠列表冲突
- Postback后保持可折叠潜水打开
- JQM 选择器可折叠字段集
- 如何动态更改JQM可折叠的主题
- jqm更改可折叠的位置
- 使用JQM(jQueryMobile),为什么可折叠嵌套另一个可折叠标题会间歇性切换
- JQM-动态地将图像添加到可折叠的标题中