JQuery 移动按钮：如何在覆盖主题时启用闪烁效果？

Question

我想覆盖其中一个 swathces 按钮的主题，比如 c。当我把它应用到一个按钮上时，当你点击它时按钮失去了闪烁效果。

我可以使用哪些 css 属性来重新启用此效果？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

<title>Buttons</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js">         </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style>
.ui-btn-c{
    color:black;
    background-color:#FED486;
}
</style>

</head>
<body>
    <div data-role="page" id="page1" data-theme="c">
        <section data-role="content">
            <a href="" class="ui-btn ui-btn-a">Theme a</a>  
            <a href="" class="ui-btn ui-btn-b">Theme b</a>  
            <a href="" class="ui-btn ui-btn-c">Theme c</a>  
        </section>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

Answer 1

如果您查看 jQM CSS 文件，您会发现它们对 ui-btn-a:active、:visited、:hover 和 :focus 有规则。您也需要为您的新 'swatch' 覆盖这些。例如：

.ui-btn.ui-btn-c:active {
    background-color:       #dcb264 /*{a-bdown-background-color}*/;
    border-color:           #FED486 /*{a-bdown-border}*/;
    color:                  #111 /*{a-bdown-color}*/;
    text-shadow: 0  1px  0  #FED486 ;
}

.ui-btn.ui-btn-c:focus {
    -webkit-box-shadow: 0 0 12px    #3388cc /*{a-active-background-color}*/;
    -moz-box-shadow: 0 0 12px       #3388cc /*{a-active-background-color}*/;
    box-shadow: 0 0 12px            #3388cc /*{a-active-background-color}*/;    
}

Here a DEMO

JQuery 移动按钮：如何在覆盖主题时启用闪烁效果？

JQuery Mobile Buttons: how to enable the blinking effect when overriding a theme?

html

css

jquery

jquery-mobile