0

我正在尝试学习 Jquery mobile，它似乎有一些问题。基于此，我正在尝试扩展示例并做更多事情。所以我有两个列表，每个列表都有一些项目。通过单击一个项目，我想注入另一个 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>

categoryData.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