查询jQueryMobile Swipe

时间:2013-08-30 05:21:54

标签: android jquery-mobile cordova swipe swipeview

我已使用以下代码实现了页面滑动。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Swipe Example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" charset="utf-8" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.2.min.js"></script>
    <script>
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 120;
            $(document).on("swiperight", "#home", function() {
                $.mobile.changePage("#page1");
            });
            $(document).on("swipeleft", "#page1", function() {
                $.mobile.changePage("#home");
            });
        }
    </script>
</head> 
<body onload="onBodyLoad()">
    <div data-role="page" id="home">
        <div data-role="content">
            <p>
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Swipe Right to view Page 1</li>
                </ul>
            </p>
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 1
            </p>
        </div>
    </div>
</body>

使用上面的代码,我可以通过滑动来移动前后页面。

以下是我的几个查询

  1. 假设如果要在滑动视图中实现10个页面,我需要编写15种以上的方法来左右滑动哪个页面。有没有像阵列适配器这样的其他简单选项来添加所有页面?
  2. 假设我将这些页面移动了六次,之后如果我按后退键关闭应用程序,则显示两个相同页面的六倍。但它应该只显示一次,需要在第三次点击时退出应用程序 如何实现?

1 个答案:

答案 0 :(得分:1)

对于问题1,这是一个工作示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet"  href="jquery.mobile-1.3.2.css">
    <script type="text/javascript" src="cordova.js"></script>
    <script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
    <script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>AnimeAddicts - Menü</title>
  </head>
  <script language="javascript1.7">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        var pageIds = new Array("#home", "#page1", "#page2", "#page3", "#page4"); // add page id's here, if page id doesn't here, it won't swipe that page
        var pageSwipeSet = new Array(new Array(), new Array()); // this is only to know, which page has swipe function. this need, because if we doesn't use this it will add more then one listener for one or more page and it will bugging
        var actPageNum = 0; // current page

        function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 120;

            swipeFunction();
        }

        function swipeFunction(){
            if(actPageNum>0 && !pageSwipeSet[0][actPageNum-1]){
                var previous = pageIds[actPageNum-1];
                var previousActual = pageIds[actPageNum];
                $(document).on("swipeleft", previousActual, function() {
                    $.mobile.changePage(previous);
                    actPageNum--;
                    swipeFunction();
                });
                pageSwipeSet[0][actPageNum-1] = true;
            }
            if(actPageNum<pageIds.length-1 && !pageSwipeSet[1][actPageNum+1]){
                var next = pageIds[actPageNum+1];
                var nextActual = pageIds[actPageNum];
                $(document).on("swiperight", nextActual, function() {
                    $.mobile.changePage(next);
                    actPageNum++;
                    swipeFunction();
                });
                pageSwipeSet[1][actPageNum+1] = true;
            }
        }
    </script>
</head> 
<body onload="onBodyLoad()">
    <div data-role="page" id="home">
        <div data-role="content">
            <p>
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Swipe Right to view Page 1</li>
                </ul>
            </p>
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 1
            </p>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 2
            </p>
        </div>
    </div>
    <div data-role="page" id="page3">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 3
            </p>
        </div>
    </div>
    <div data-role="page" id="page4">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 4
            </p>
        </div>
    </div>
</body>

此脚本在您滑动时添加左右滑动:D。测试

问题2.在phonegap中,您可以使用此事件监听器:

document.addEventListener("backbutton", yourCallbackFunction, false);

您需要创建历史记录变量,当您在页面上滑动时,您需要在其上添加新元素。按下后退按钮时,您可以从中读取,然后转到该页面。你存放了多少(以及你存储在它上面的东西),这是你的选择。但我不确定这会有效,主要来自后退按钮。