动态 JQuery 移动导航 [英] Dynamic JQuery Mobile Navigation

查看：24
本文介绍了动态 JQuery 移动导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在使用 jQuery 以及如何动态处理 url 时遇到问题.如果我有一个带有链接的页面并且每个页面都有一个 id 来调用一个函数和一个 id，那么我想要做的是.如何更改特定链接的 url 并将该 url 用作书签.下面是我的代码

<div data-role="header"><h1>列表</h1>
<div data-role="内容"><ul data-role="listview" id="carlist"><li><a href="#" onclick="cardtails('1')">讴歌</a></li><li><a href="#" onclick="cardtails('2')>奥迪</a></li><li><a href="#" onclick="cardtails('3')>BMW</a></li>

<div data-role="footer"><h4>页脚</h4>

因此，当您单击列表中的汽车时，参数为 1 的名为 cardetails 的函数将返回服务器并获取 id=1 的汽车的 cardetails.我的问题不是，但是当 JSON 数据返回时，我希望 url 更改为 cardtails#1 或类似的内容.因此，它可以识别用户在哪里，浏览器可以将其添加到其历史记录中，如果用户将 url 加入书签，浏览器将能够找到显示相同数据的确切页面.

解决方案

本示例使用 jQM changePage() 发送带有 Ajax 页面请求的数据.仅当 changePage() 的to"参数是 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', {数据: {id:this.id}});});});$(document).on( "pageinit", "#car-details-page", function( e ) {var passId = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace(/.*id=/, "" );$("#details").html(["Selected id is: '", passId, "'"].join(""));});

在cars.html页面中添加以下代码.

<html lang="zh-cn"><头><title>汽车示例</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><身体><div id="car-page" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">汽车列表</a></h1>

<div data-role="内容"><ul data-role="listview" id="car-list"><li><a href="#" data-transition="flip" id="acura">讴歌</a></li><li><a href="#" data-transition="flip" id="audi">奥迪</a></li><li><a href="#" data-transition="flip" id="bmw">BMW</a></li>

在 car-details.html 页面中添加以下代码.

<html lang="zh-cn"><头><title>汽车示例</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><身体><div id="car-details-page" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">汽车详情</a></h1><a data-rel="back">Back</a>

<div data-role="内容"><div id="详细信息"></div>

示例 2

使用共享 JS 对象的解决方案:

在第二页上，选定的 id 出现在一个 div 上.此外，URL 包含 id，因此可以将其添加为书签.如果用户通过第一页导航到第二页，则 id 通过共享 JS 变量传递到第二页.如果用户打开书签页面，则从 window.location.href 中提取 id.

请注意，您可以传递 id 或任何其他有助于识别用户选择的值，而不是在共享变量中传递 href 值.

测试示例的说明:

在 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: '", passId, "'"].join(""));});

在cars.html页面中添加以下代码:

<html lang="zh-cn"><头><title>汽车示例</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><身体><div id="car-page" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">汽车列表</a></h1>
<div data-role="内容"><ul data-role="listview" id="car-list"><li><a href="./car-details.html?id=1" data-transition="flip" id="acura">讴歌</a></li><li><a href="./car-details.html?id=2" data-transition="flip" id="audi">奥迪</a></li><li><a href="./car-details.html?id=3" data-transition="flip" id="bmw">宝马</a></li>

在 car-details.html 中添加以下代码:

<html lang="zh-cn"><头><title>汽车示例</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><身体><div id="car-details-page" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">汽车详情</a></h1><a data-rel="back">Back</a>
<div data-role="内容"><div id="详细信息"></div>

示例 3

多页示例(地址栏 URL 不会根据汽车选择而改变)

<html lang="zh-cn"><头><title>汽车示例</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><脚本>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(""));});<身体><div id="car-page" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">汽车列表</a></h1><a data-rel="back">Back</a>
<div data-role="内容"><ul data-role="listview" id="car-list"><li><a href="#" id="acura">讴歌</a></li><li><a href="#" id="audi">奥迪</a></li><li><a href="#" id="bmw">宝马</a></li>
<div id="car-details-page" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">汽车详情</a></h1><a data-rel="back">Back</a>
<div data-role="内容"><div id="详细信息"></div>

我希望这会有所帮助.

I am having an issue with jQuery and how to dynamically process urls. What I would like to do is this if I have a page with links and each one has an id to call a function and an id. How can I change the url for the specific link and have that url work as a bookmark. Below is my code

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

So when you click on a car in the list a function called cardetails with a parameter of 1 will go back to the server and get cardetails for the car with id=1. My issue is not that but when the JSON data has returned I want the url to change to cardetails#1 or something like that. So it can identify where the user is, the browser can add it to its history and if the user bookmarks the url the browser will be able to find that exact page with the same data displayed.

解决方案

This example uses the jQM changePage() to send data with an Ajax page request. It can be used only when the 'to' argument of changePage() is a URL. Check the jQM documentation for more info.

Instructions to test the example:

Add the following code inside the car.js file:

$(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(""));
});

Add the following code inside the cars.html page.

<!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>

Add the following code inside the car-details.html page.

<!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>

EXAMPLE 2

Solution using a shared JS object:

On the second page the selected id appears on a div. Moreover the URL contains the id so it can be bookmarked. In the case where the user navigates to the second page through the first page then the id is passed to the second page through a shared JS variable. In case the user opens a bookmarked page then the id is extracted from the window.location.href.

Please note that instead of passing the href value in the shared variable you could pass the id or any other value that will help you identify the user's selection.

Instructions to test the example:

Add the following code inside the car.js file:

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(""));
});

Add the following code inside the cars.html page:

<!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>

Add the following code inside the 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>

EXAMPLE 3

Multipage Example (The address bar URL is not changed based on the car selection)

<!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>

I hope this helps.

这篇关于动态 JQuery 移动导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆