5

jQuery と URL を動的に処理する方法に問題があります。私がやりたいのは、リンクのあるページがあり、それぞれに関数を呼び出すための ID と ID がある場合です。特定のリンクの URL を変更して、その URL をブックマークとして機能させるにはどうすればよいですか。以下は私のコードです

<div data-role="page" id="#listview">
<div data-role="header">
    <h1>List</h1>
</div>

<div data-role="content">   
<ul data-role="listview" id="carlist">
  <li><a href="#" onclick="cardetails('1')">Acura</a></li>
  <li><a href="#" onclick="cardetails('2')>Audi</a></li>
  <li><a href="#" onclick="cardetails('3')>BMW</a></li>
</ul>
</div>

<div data-role="footer">
    <h4>Page Footer</h4>
</div>

したがって、リスト内の車をクリックすると、パラメーター 1 の cardetails という関数がサーバーに戻り、id=1 の車の cardetails を取得します。私の問題はそれではありませんが、JSON データが返されたときに、URL を cardetails#1 などに変更したいと考えています。そのため、ユーザーがどこにいるかを識別でき、ブラウザーはそれを履歴に追加できます。ユーザーが URL をブックマークすると、ブラウザーは同じデータが表示されている正確なページを見つけることができます。

4

1 に答える 1

9

この例では、jQMを使用changePage()して、Ajax ページ要求でデータを送信します。の 'to' 引数がchangePage()URL の場合にのみ使用できます。詳細については、 jQM のドキュメントを確認してください。

例をテストする手順:

  • フォルダを作成する
  • フォルダー内に cars.js という名前のファイルを作成します
  • フォルダー内に cars.html という名前のファイルを作成します
  • フォルダー内に car-details.html という名前のファイルを作成します
  • 各ファイルに、以下にある対応するコードを入力します
  • 最初のページである cars.html を開いて移動します

car.js ファイル内に次のコードを追加します。

$(document).on( "pageinit", "#car-page", function( e ) {
    $('#car-list a').on('click', function(e) {
        e.preventDefault();
        $.mobile.changePage('car-details.html', {
            data: {
                id: this.id
            }
        });
    });
});

$(document).on( "pageinit", "#car-details-page", function( e ) {
    var passedId = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace( /.*id=/, "" );
    $("#details").html(["Selected id is: '", passedId, "'"].join(""));
});

cars.html ページ内に次のコードを追加します。

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                    <li><a href="#" data-transition="flip" id="acura">Acura</a></li>
                    <li><a href="#" data-transition="flip" id="audi">Audi</a></li>
                    <li><a href="#" data-transition="flip" id="bmw">BMW</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

car-details.html ページ内に次のコードを追加します。

<!doctype html>
<html lang="en">
   <head>
        <title>Car Example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

例 2

共有 JS オブジェクトを使用したソリューション:

2 ページ目では、選択した ID が div に表示されます。さらに、URL には ID が含まれているため、ブックマークすることができます。ユーザーが最初のページから 2 番目のページに移動した場合、ID は共有 JS 変数を介して 2 番目のページに渡されます。ユーザーがブックマークされたページを開くと、window.location.href から ID が抽出されます。

共有変数で href 値を渡す代わりに、ユーザーの選択を識別するのに役立つ id またはその他の値を渡すことができることに注意してください。

例をテストする手順:

  • フォルダを作成する
  • フォルダー内に cars.js という名前のファイルを作成します
  • フォルダー内に cars.html という名前のファイルを作成します
  • フォルダー内に car-details.html という名前のファイルを作成します
  • 各ファイルに、以下にある対応するコードを入力します
  • 最初のページである cars.html を開いて移動します

car.js ファイル内に次のコードを追加します。

var passDataObject = { selectedHref: null }

$(document).on( "pageinit", "#car-page", function( e ) {
    $(this).find('a').unbind('click').click(function() {
        passDataObject.selectedHref = this.href;
    });
});

$(document).on( "pageinit", "#car-details-page", function( e ) {
    var passedId = (passDataObject.selectedHref != null ? passDataObject.selectedHref : window.location.href).replace( /.*id=/, "" );
    $("#details").html(["Selected id is: '", passedId, "'"].join(""));
});

cars.html ページ内に次のコードを追加します。

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                    <li><a href="./car-details.html?id=1" data-transition="flip" id="acura">Acura</a></li>
                    <li><a href="./car-details.html?id=2" data-transition="flip" id="audi">Audi</a></li>
                    <li><a href="./car-details.html?id=3" data-transition="flip" id="bmw">BMW</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

car-details.html 内に次のコードを追加します。

<!doctype html>
<html lang="en">
   <head>
        <title>Car Example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

例 3

複数ページの例 (車の選択に基づいてアドレス バーの URL は変更されません)

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script>
            var passDataObject = { selectedId: null }

            $(document).on( "pageinit", "#car-page", function( e ) {
                $(this).find('a').unbind('click').click(function(e) {
                    e.preventDefault();
                    passDataObject.selectedId = this.id;
                    $.mobile.changePage('#car-details-page', { transition: 'flip'} );
                });
            });

            $(document).on( "pagebeforeshow", "#car-details-page", function( e ) {
                $("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join(""));
            });
        </script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                    <li><a href="#" id="acura">Acura</a></li>
                    <li><a href="#" id="audi">Audi</a></li>
                    <li><a href="#" id="bmw">BMW</a></li>
                </ul>
            </div>
        </div>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

これが役立つことを願っています。

于 2013-02-26T21:57:06.417 に答える