2

我有一个controlgroup并且我正在动态添加和删除ui-btn-active类来切换活动按钮。按钮切换得很好，但我似乎找不到更改活动按钮主题的方法。

我希望非活动按钮使用d主题，活动按钮使用a主题。

有谁知道我该怎么做？

在此处输入图像描述

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>
4

2 回答 2

2

好的，这就是我最终要做的。

jQuery：

$('[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');
    });
});

HTML：

<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 Mobile 框架使用一个名为“活动”的样本（默认主题中为亮蓝色）来一致地指示选定状态，而不管给定小部件的各个样本。每当需要指示当前选择的内容时，我们将其应用于导航和表单控件。因为这个主题样本是为清晰、一致的用户反馈而设计的，所以它不能被标记覆盖；它在主题中设置一次，并在需要选择或活动状态时由框架应用。此状态的样式位于 ui-btn-active 样式规则下的主题样式表中。

于 2012-08-29T19:34:11.547 回答
0

您可以使用jQuery 的.addClass和.removeClass函数来执行此操作。只需在 jQuery 的帮助下设置活动和非活动类并在点击时更改它们。

这是示例。我不是 jQuery 专业人士，但这工作正常：示例

于 2012-08-23T16:45:37.927 回答