jquery mobile 을 이용한 슬라이드 화면전환

jquery mobile의 터치 이벤트를 이용하여 페이지전환 방법

 

swipeleft-----왼쪽으로 쓸어내릴때

swiperight----오른쪽으로 쓸어내릴때

 

 

방법 01

화면을 터치해 이동하는 방향으로 페이지가 전화 되는 방법이다. 한 파일내에 page를  나눈후에 각각의 page에 동작을 설정하는 스크립트

 

<script>

 

$(function(){
    $("#page1").bind("swipeleft", function(event){
     $.mobile.changePage("#page2", {transition:"slide"});
    });
    $("#page2").bind("swipeleft", function(event){
     $.mobile.changePage("#page3", {transition:"slide"});
    });
    $("#page2").bind("swiperight", function(event){
     $.mobile.changePage("#page1", {transition:"slide"});
    });
    $("#page3").bind("swipeleft", function(event){
     $.mobile.changePage("#page2", {transition:"slide"});
    });
    $("#page3").bind("swiperight", function(event){
     $.mobile.changePage("#page4", {transition:"slide"});
    })
    $("#page4").bind("swiperight", function(event){
     $.mobile.changePage("#page3", {transition:"slide"});
    });
   });

 

</script>

 

 

 

방법2

 

왼쪽으로 쓸어 넘기면 다음 페이지로 오른쪽으로 쓸어 넘기면 이전 페이지로 이동 하는 스크립트

 

    <script>
        (function ($) {
            var methods = {
                init: function (options) {
                    var settings = {
                        callback: function () { }
                    };
                    if (options) {
                        $.extend(settings, options);
                    }
                    $(":jqmData(role='page')").each(function () {
                        $(this).bind("swipeleft", function () {
                            var nextPage = parseInt($(this).attr("id").split("page")[1]) + 1;
                            if (nextPage === 4) nextPage = 1;
                            $.mobile.changePage("#page" + nextPage, "slide");
                        });

                        $(this).bind("swiperight", function () {
                            var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
                            if (nextPage === 0) nextPage = 3;
                            $.mobile.changePage("#page" + nextPage, "slide");
                        });
                    });
                }
            }
            $.fn.initApp = function (method) {
                if (methods[method]) {
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' + method + ' does not exist');
                }
            }
        })(jQuery);

        $(document).ready(function () {
            $().initApp();
        });
    </script>