更改控制组活动按钮主题 [英] Change controlgroup active button theme

问题描述

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

I have a controlgroup and I am dynamically adding and removing ui-btn-active class to toggle the active button. The button toggles just fine, but I can't seem to find a way to change the active button theme.

我希望活动按钮使用 d 主题和有效
按钮，使用 a 主题。

I want the in-active buttons to use the d theme and the active buttons to use the a theme.

有谁知道我怎么做？

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>

推荐答案

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

OK so this is what I ended up doing.

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>

回答问题：

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

So as it turns out, you can't override the theme via the markup.

全球有效状态

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

The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the ui-btn-active style rules.

这篇关于更改控制组活动按钮主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！