更改控制组活动按钮主题答案

【问题标题】：Change controlgroup active button theme更改控制组活动按钮主题
【发布时间】：2012-08-23 15:51:04
【问题描述】：

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

我希望非活动按钮使用<strong>d</strong> 主题和活动按钮按钮使用<strong>a</strong> 主题。

有人知道我该怎么做吗？

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>

【问题讨论】：

误读问题 - 请忽略我的回复。谢谢。

标签： javascript jquery mobile jquery-mobile

【解决方案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 样式规则下的主题样式表中。

【讨论】：

这解决了我在尝试更改主题时遇到的问题！谢谢！

【解决方案2】：

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

这是一个例子。我不是 jQuery 的专业人士，但这工作正常：Example

【讨论】：

我的切换部分工作得很好。我的问题是：如何让非活动按钮使用 d 主题和活动按钮以使用 a 主题？我不想添加任何自定义 CSS 覆盖。