0

Jquery モバイルを学習しようとしていますが、いくつか問題があるようです。これに基づいて、例を拡張し、より多くのことを実行しようとしています。したがって、2 つのリストがあり、各リストにはいくつかのアイテムがあります。項目をクリックして、別の html ファイル (exercise.html) を挿入して表示したいのですが、挿入が機能しません。以下は私のコードです。

演習.html

<!DOCTYPE html>


<head>
    <meta charset="utf-8">
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
    <script src="categoryData.js"></script>
</head>

<body>

    <div data-role="page" id="exercises-page" class="type-interior">

        <script src="categoryData.js"></script>

        <div data-role="header" data-position="fixed" data-id="appHeader">
            <h1>Lists</h1>
        </div><!-- /header -->

        <div data-role="content" >
            <h4>Choose an item</h4>
            <ul id="item_category" data-role="listview" data-inset="true"></ul>
        </div>

    </div><!-- /page -->

</body>

カテゴリデータ.js

(function($) {

var categoryData = {
    list1 : {
        name : "List1",
        items : [{
            name : "l1_item1",
            level : "level1"
        }, {
            name : "l1_item2",
            level : "level1"
        }, {
            name : "l1_item3",
            level : "level2"
        }, {
            name : "l1_item4",
            level : "level2"
        }]
    },
    list2 : {
        name : "List2",
        items : [{
            name : "l2_item1",
            level : "level1"
        }, {
            name : "l2_item2",
            level : "level1"
        }, {
            name : "l2_item3",
            level : "level2"
        }]
    }
};

$(document).ready(function() {

    var exercise_category = $('#item_category');

    var iHtml = '';
    for (var x in categoryData) {
        category = categoryData[x];
        iHtml += '<li>' + category.name + '<ul data-inset="true">';
        iHtml += '<h4 data-role="content" >Choose an item</h4>';
        // The array of items for this category.
        cItems = category.items;
        // The number of items in the category.
        numItems = cItems.length;
        for (var i = 0; i < numItems; i++) {
            iHtml += '<li><a href=exercise.html#item-page?title=' + cItems[i].name + '>' + cItems[i].name + '</a></li>';
        }
        iHtml += '</ul>';
    };

    iHtml += '</ul></li>';
    exercise_category.html(iHtml).listview('refresh');
});

// Listen for any attempts to call changePage().
$(document).bind("pagebeforechange", function(e, data) {
    console.log('BEFORECHANGE');
    // We only want to handle changePage() calls where the caller is asking us to load a page by URL.
    if ( typeof data.toPage === "string" ) {

        var u = $.mobile.path.parseUrl( data.toPage );
        var re = /^#item-page/;

        if (u.hash.search(re) !== -1) {
            showExercise(u, data.options);
            e.preventDefault();
        }
    }
});

function showExercise(urlObj, options) {

    var categoryName = urlObj.hash.replace( /.*title=/, "" );
    var catna = $.trim(categoryName.replace('_', ' '));
    var category = categoryData[ categoryName ],
    pageSelector = urlObj.hash.replace( /\?.*$/, "" );

    if (catna) {
        var $page = $( pageSelector ),
        // Get the header for the page.
        $header = $page.children( ":jqmData(role=header)" ),
        // Get the content area element for the page.
        $content = $page.children( ":jqmData(role=content)" );

        $header.find( "h1" ).html( "pass something to change the Title" );

        $page.page();

        options.dataUrl = urlObj.href;

        $.mobile.changePage( $page, options );
    }
}

})(jQuery);

エクササイズ.html

<!DOCTYPE html>


<head>
    <meta charset="utf-8">
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
    <script src="categoryData.js"></script>

</head>

<body>

    <div data-role="page" class="type-interior" id="item-page" style="text-align: center;">
        <script src="categoryData.js"></script>

        <div data-role="header" data-position="fixed" data-id="exerciseHeader">
            <h1>Title</h1>
        </div><!-- /header -->

        <div data-role="content">
            <h2>Image</h2>
            <div class="article">
                <p><img src="" alt="...">
                </p>
            </div>
        </div>

    </div><!-- /page -->

</body>

内容を、exercise.html のヘッダーの と に渡したいと思います。なぜそれが機能しないのですか？HTMLで定義したタイトルが常に表示されます。

4

0 に答える 0