0

<div id=child>最初のページのボタンクリックで2番目のページを呼び出し<div id = home>、両方のページでjqueryテーマを使用しましたが、問題は2番目のページにあり、最初のページのようにテーマ効果がありません。css ファイルを同じフォルダーに配置しましたが、2 ページ目ではなく 1 ページ目で有効になっていますか?

テーマが2ページ目にも影響を与えるように、誰でも問題を解決できますか? 以下は私のコードです

 <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
        <style>
            /* App custom styles */
        </style>

        <script src="jquerybasic/jquery.min.js" type="text/javascript">
        </script>
        <script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
        $(document).ready(function() {
                $('#buttonid').click(function() {
                    $('#child').toggle();
                    $('#home').toggle();
                });
                $('#buttonchild').click(function() {
                        $('#child').toggle();
                        $('#home').toggle();
                });

                $('#next').click(function() {
                        $('#home').show();
                        $('#child').hide();
                });
                $('#prev').click(function() {
                        $('#home').hide();
                        $('#child').show();
                });



                $('#nextchild').click(function() {
                        $('#home').show();
                        $('#child').hide();
                });
                $('#prevchild').click(function() {
                        $('#home').hide();
                        $('#child').show();
                });
        });

        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-theme="d" data-role="header">
                <h3>
                    The Grand Bhagavati
                </h3>
                <a data-role="button" id="next"  data-inline="true" data-transition="slide"  >
                    &lt;&lt;
                </a>
                <a data-role="button" id="prev"  data-inline="true" data-transition="fade" >
                    &gt;&gt;
                </a>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput1">
                            User:
                        </label>
                        <input id="textinput1" type="text" />
                    </fieldset>
                </div>
                <input id="buttonid" data-theme="d" value="Login" type="button"  />
            </div>
            <div data-theme="d" data-role="footer" data-position="fixed" >
                <h3>
                    Page 1
                </h3>

                </div>
        </div>

        <div data-role="page" id="child">
            <div data-theme="d" data-role="header">
                <h3>
                    The Grand Bhagavati
                </h3>
                <a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
                    &lt;&lt;
                </a>
                <a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
                    &gt;&gt;
                </a>
            </div>
            <div data-role="content">

                        <label>
                            hi khushbu. welcome...!
                        </label>


                <input id="buttonchild" data-theme="d" value="Login" type="button"  class="ui-btn-hidden" aria-disabled="false" />
            </div>
            <div data-theme="d" data-role="footer" data-position="fixed" >
                <h3>
                    Page 2
                </h3>

                </div>
        </div>

        <script>
            //App custom javascript
        </script>
    </body>
4

1 に答える 1

2

わかりました少年:)

ドキュメントを読んで、新しいソフトウェアを使用する際のかなり重要な部分をスキップしたようです。

ページ間を移動するには、これをhrefリンクの属性に配置します。

<a data-role="button" href="#child">...</a>

jQuery Mobile は、次の疑似ページへの遷移を処理します。のドキュメントは次のLinking Pagesとおりです。 http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html

これをプログラムで行いたい場合は、$.mobile.changePage()内部で使用されるものを使用できます。この関数を手動で呼び出す利点 (clickボタンのイベント ハンドラーなど) は、トランジションに既定以外のオプションを指定できることです。

$('#next').on('click', function () {
    $.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});

のドキュメントは次の$.mobile.changePage()とおりです。 http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

独自のトランジションをロールしたい場合は、1 つの div を表示して別の div を非表示にするよりもかなり複雑です。CSS3 (トランスフォーム、トランジション、キーフレームなど) を使用してトランジションをアニメーション化するいくつかの CSS クラスをセットアップする必要があります。

  • 最後に、ヘッダー内のリンクを機能する単一のリンクに置き換えたコードのデモを次に示します: http://jsfiddle.net/MmKK4/
于 2012-04-21T16:18:10.163 に答える