Question

我们有一个移动网站将在一段时间内上线。我们需要在页面标题的顶部放置下载[iphone / ipad / mobile]原生应用程序。 但是可以将jquery移动页面标题向下推以显示此通知。 当我们点击此条带上的关闭按钮时，此通知已消失。

我看到同样的事情target site。在标签/手机中试试。

Answer 1

您可以轻松使用第二个标题并在完成后隐藏它：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header" id="custom_header">
            <h3>
                Nothing prevents you to create a custom header
            </h3>
        </div>        
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a href="#" data-role="button" id="test-button">Test button</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  
</body>
</html>

此解决方案还需要自定义css：

#custom_header {
    background: #000 !important;
}

这会隐藏它：

$('#index').live('pagebeforeshow',function(e,data){    
    $('#close-custom-header').live('click', function(e) {
        $('#custom_header').toggle();
    });    
});

示例：http://jsfiddle.net/Gajotres/w6vBK/

使用jquery mobile在移动网站下载移动应用程序通知

1 个答案: