0

Jquery モバイルに基づいて、モバイル アプリのページの端に沿って細いバーを作成しようとしています。その目的は、引き出すことができるサイド パネルの存在を人々に警告することです。私の要点をよりよく説明するために画像を添付しました

ここに画像の説明を入力

jQM はページ コンテンツ フッター システムを使用しているため、これを行う方法がわかりません。content-secodary を使用してサイドバーを作成することについて聞いたことがありますが、これはやり過ぎのようで、タブレットとは対照的に電話では動作が異なると聞いています。

4

1 に答える 1

2

はじめに

私は数ヶ月前にそのようなものを作りました.唯一の違いは、プルボタンの高さが100%に設定されていないことです.

このソリューションは、以下でテストされています。

  • デスクトップ クローム
  • デスクトップ Firefox
  • モバイル Android Chrome

変更する必要があるのは、ボタンの高さだけです。

実施例

jsFiddle の例はここにあります: http://jsfiddle.net/Gajotres/qgDst/

コード

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">              
                <h1>Index page</h1>
            </div>

            <div data-role="content">

            </div>

            <div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
                <img src="small_image_as_button" /><!-- click here to open the panel -->
                <nav id="indice">
                    <!-- content here -->
                </nav>
                <div data-role="button" id="tick-button">>></a>                
            </div>            
        </div>    
    </body>
</html>

Javascript

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click tap', '#tick-button', function(){ 
        $("#left-panel").panel( "open");       
    });      
});

CSS:

.ui-panel-closed {
    visibility: visible !important;  
    width: 100px !important; 
    left: 160px !important;
    overflow: visible !important;
}

.ui-content {
    padding: 0 15px 15px 15px !important;
}

#tick-button {
    position: absolute;
    top: 100px;
    right: -27px;    
    width: 25px;
    height: 100px;
    margin: 0 0 !important;
    border-radius: 0 1em 1em 0;
}

#tick-button .ui-btn-inner {
    padding: 0 0 !important;
    height: 100% !important;
    font:10px 'Courier New', 'Verdana',serif;     
    line-height: 100px;
    color: #555;
    text-shadow: 1px 1px #fff;   
}
于 2013-07-23T11:07:41.053 に答える