使用 jquery mobile 在移动网站中下载移动应用通知答案

【问题标题】：download mobile app notification in mobile website with jquery mobile使用 jquery mobile 在移动网站中下载移动应用通知
【发布时间】：2012-12-18 19:28:21
【问题描述】：

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

我看到了同样的东西 target site 。在标签/移动设备中尝试。

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案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/

【讨论】：