更改控制组活动按钮主题

Question

我有一个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>

Answer 1

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

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

回答问题：

事实证明，您无法通过标记覆盖主题。

Global "Active" state

  

jQuery Mobile框架使用一个名为“active”的样本（亮蓝色）   在默认主题中）始终指示所选状态，   无论给定小部件的单个样本如何。我们申请这个   在需要指示时在导航和表单控件中   目前选择的是什么。因为这个主题样本是专为   清晰，一致的用户反馈，它不能通过   标记;它在主题中设置一次并由框架应用   每当需要选定或活动状态时。这样的造型   state位于ui-btn-active样式规则下的主题样式表中。

Answer 2

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

这是一个例子。我在jQuery方面不专业，但这很好用：Example