1

iPad で jQuery Mobile と PhoneGap を使用して分割ビューを実装したいと考えています。多くのサイトが asyraf9 を推奨しています https://github.com/asyraf9/jquery-mobile/

ファイルのバンドルが含まれているzipファイルをダウンロードしました。フォルダーdemos\experiments\には、「splitview」ディレクトリがありました。そのディレクトリの内容を参考にしました。

分割ビュー フォルダーのファイルを使用するすべてのファイルを自分のwwwフォルダーに追加しました。以下に示すようにビューのみを表示しますが、分割ビューは表示しません

また、「 © CS8 」を使用した場合、 index.htms のコードの一部が次のように変更されます。

" © CS8 " 内の任意の構文問題

ここに画像の説明を入力

分割ビューのプラグインとして使用されるファイルはどれですか..?

分割ビューのindex.htmlファイルを使用すると、分割ビューが表示されません

セグメントがテーブル ビューと競合するが、分割ビューと競合しないのと同じように

ここに画像の説明を入力 どうしたの

4

3 に答える 3

3

splitsviewで動作させるには..Splitsview.jsファイルで

$.support.splitview =($query || ($.mobile.browser.ie && $(this).width() >= 480)) 
                      && $.mobile.ajaxEnabled;

as（右側にコメントして$ .support.splitview = 1を実行します;）

$.support.splitview = 1;//($query || ($.mobile.browser.ie && $(this).width() >= 480)) 
                           && $.mobile.ajaxEnabled;

そうすれば、spliviewは、そのサイズが何であれ、どの電話でも機能します。

于 2012-10-18T04:28:17.090 に答える
1

'data-id="menu"' のことですか? 実際、デスクトップの Web ブラウザーでは問題なく動作しますが、Android でアプリを作成するために PhoneGap でビルドした場合にのみ問題が発生します。ここに私のindex.htmlがあります：

 <!DOCTYPE html>
 <html>
  <head>
        <title>Jquery Mobile Splitview</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile.css" />
        <link rel="stylesheet" href="css/jquery.mobile.splitview.css" />
    <link rel="stylesheet"  href="css/jquery.mobile.grids.collapsible.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.splitview.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.js"></script>
    <script type="text/javascript" src="js/iscroll-wrapper.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <!--script type="text/javascript" src="scrollability.js"></script-->        
</head>
<body>
    <div data-role="panel" data-id="menu" data-hash="crumbs" data-context="a#default">
        <!-- Start of main page -->
        <div data-role="page" id="main" data-hash="false">
            <div data-role="header">
                <h1>Left panel</h1>
            </div><!-- /header -->
            <div data-role="content">
                The left content
            </div><!-- /content -->
        </div><!-- /page -->
    </div><!-- panel menu -->

    <div data-role="panel" data-id="main">
        <!-- Start of about page -->
        <div data-role="page" id="about">
            <div data-role="header">
                <h1>Right panel</h1>
            </div><!-- /header -->
            <div data-role="content">
                The right content
            </div><!-- /content -->
        </div><!-- /page -->
    </div><!-- panel main -->
    </body>
 </html>

PhoneGap はこのプラグインをサポートしていないようです。

とにかくありがとうございました

于 2012-08-02T14:12:43.743 に答える
0

index.html に 2 つの div があることを確認します。1 つは data-role="menu" で、もう 1 つは data-role="main" です。したがって、それを取得すると、ポートレートモードでメインページが表示されます. ランドスケープ モードでは、メニューとメイン ページが表示されます。

© コードを削除して、同じコードがない場合に分割ビューを取得できることを確認できますか。

于 2012-08-02T12:41:31.890 に答える