Question

我想覆盖其中一个条带的按钮主题，比如说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}*/;    
}

这是 DEMO

JQuery Mobile Buttons：如何在覆盖主题时启用闪烁效果？

1 个答案: