Question

在我的项目中我有一些带图标的按钮工作正常，但问题是当我长按按钮时它保持活动状态，除非我按下其他按钮可以说明问题是什么以及如何解决这个问题。登记/> 这是btn活动状态的css代码。

.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif  }

Answer 1

我遇到了类似的问题并用这样的方法解决了这个问题：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test App</title>

    <script type="text/javascript" src="cordova-2.8.0.js"></script>
    <script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />

    <script type="text/javascript" >
        $.mobile.defaultPageTransition = 'none'; // Remove default page transition
        $('div[data-role="page"]').on('pagecreate',function(event, ui){
            $('div[data-role="footer"] a', $(this)).on("taphold",function(e){
                $(this).addClass("ui-btn-active");
                 $(this).one("touchend", function(e){
                       e.preventDefault();
                       $(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
                       $(this).removeClass("ui-btn-down-a ui-btn-active");
                       return false;
                    });
                });
           });
    </script>
</head>
<body>
    <div data-role="page" id="page-1">
        <div data-role="content">                   
            <p>Page 1</p>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page-2">
        <div data-role="content">           
            <p>Page 2</p>

        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

您可以下载我的Eclipse项目并编译APK here

在jquery mobile中长按时按钮保持活动状态

1 个答案: