1

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

我看到目标站点的相同。在标签/移动设备中尝试。

4

1 回答 1

0

You can easily use second header and hide it when you are done:

<!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>

This solution also need a custom css:

#custom_header {
    background: #000 !important;
}

This will hide it:

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

Example: http://jsfiddle.net/Gajotres/w6vBK/

于 2013-01-04T11:09:54.017 回答