1

近いうちにモバイルサイトが公開されます。[iphone / ipad/mobile]ネイティブアプリをダウンロードするというページのヘッダーの上にを配置する必要があります。しかし、jqueryモバイルページヘッダーを押し下げてこの通知を表示することは可能ですか？そして、このストリップの閉じるボタンをクリックすると、この通知は消えました。

ターゲットサイトを見たのと同じです。タブ/モバイルで試してみてください。

4

1 に答える 1

0

2番目のヘッダーを簡単に使用して、完了したら非表示にすることができます。

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

于 2013-01-04T11:09:54.017 に答える