Javascript 更改controlgroup活动按钮主题
我有一个Javascript 更改controlgroup活动按钮主题,javascript,jquery,mobile,jquery-mobile,Javascript,Jquery,Mobile,Jquery Mobile,我有一个controlgroup,我正在动态添加和删除ui btn active类以切换active按钮。按钮切换得很好,但我似乎找不到改变活动按钮主题的方法 我希望活动中的按钮使用d主题和活动按钮 使用主题的按钮 有人知道我怎么做吗 HTML: <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-inline="true" data-min
controlgroup
,我正在动态添加和删除ui btn active
类以切换active按钮。按钮切换得很好,但我似乎找不到改变活动按钮主题的方法
我希望活动中的按钮使用d
主题和活动按钮
使用主题的按钮
有人知道我怎么做吗
HTML:
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
$('[data-role="page"]').live('pageshow', function () {
$('#myApptBtn').addClass('ui-btn-active');
$('#myApptBtn').click(function () {
$('#allApptBtn').removeClass('ui-btn-active');
$('#myApptBtn').addClass('ui-btn-active');
});
$('#allApptBtn').click(function () {
$('#myApptBtn').removeClass('ui-btn-active');
$('#allApptBtn').addClass('ui-btn-active');
});
});
<li data-theme="d" class="li-state-small" style="text-align: center;">
<div data-role="controlgroup" data-type="horizontal" class="btnFontSize12">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
</li>
您可以使用jQuery的.addClass
和.removeClass
函数来执行此操作。只需设置活动类和非活动类,并在jQuery的帮助下将它们更改为onclick
这是一个例子。我不擅长jQuery,但这很好:好吧,这就是我最后要做的
jQuery:
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
$('[data-role="page"]').live('pageshow', function () {
$('#myApptBtn').addClass('ui-btn-active');
$('#myApptBtn').click(function () {
$('#allApptBtn').removeClass('ui-btn-active');
$('#myApptBtn').addClass('ui-btn-active');
});
$('#allApptBtn').click(function () {
$('#myApptBtn').removeClass('ui-btn-active');
$('#allApptBtn').addClass('ui-btn-active');
});
});
<li data-theme="d" class="li-state-small" style="text-align: center;">
<div data-role="controlgroup" data-type="horizontal" class="btnFontSize12">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
</li>
HTML:
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
$('[data-role="page"]').live('pageshow', function () {
$('#myApptBtn').addClass('ui-btn-active');
$('#myApptBtn').click(function () {
$('#allApptBtn').removeClass('ui-btn-active');
$('#myApptBtn').addClass('ui-btn-active');
});
$('#allApptBtn').click(function () {
$('#myApptBtn').removeClass('ui-btn-active');
$('#allApptBtn').addClass('ui-btn-active');
});
});
<li data-theme="d" class="li-state-small" style="text-align: center;">
<div data-role="controlgroup" data-type="horizontal" class="btnFontSize12">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
</li>
问题的答案:
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
$('[data-role="page"]').live('pageshow', function () {
$('#myApptBtn').addClass('ui-btn-active');
$('#myApptBtn').click(function () {
$('#allApptBtn').removeClass('ui-btn-active');
$('#myApptBtn').addClass('ui-btn-active');
});
$('#allApptBtn').click(function () {
$('#myApptBtn').removeClass('ui-btn-active');
$('#allApptBtn').addClass('ui-btn-active');
});
});
<li data-theme="d" class="li-state-small" style="text-align: center;">
<div data-role="controlgroup" data-type="horizontal" class="btnFontSize12">
<a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
<a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
</li>
因此,事实证明,您不能通过标记覆盖主题
jQuery移动框架使用一个名为“active”(亮蓝色)的样例
在默认主题中),以一致地指示选定的状态,
不管给定小部件的单个样例如何。我们应用这个
在导航和窗体控件中,只要需要指示
当前选择的内容。因为这个主题样例是为
清晰、一致的用户反馈,不能通过
加成它在主题中设置一次,并由框架应用
每当需要选定或活动状态时。这件衣服的款式
状态位于ui btn活动样式规则下的主题样式表中
我的开关部分工作得很好。我的问题是:如何让in-active按钮使用d主题,让active按钮使用a主题?我不想添加任何自定义CSS覆盖。误读问题-请忽略我的回答。这解决了我在尝试改变主题时遇到的问题!谢谢