Clever Geek Handbook

How do I carry only some of the elements?

I have several divs

, but they are not semantically related. So I want to have multiple sets divs

.

Example:

I want to be able to scroll left and right between {1,2,3,4,5}. Some of these pages have a button that should open (with a page transition slideup

) subpages. For example, button 4 will move up page 4.1. Then I want to be able to scroll left and right again, between 4.1, 4.2 and 4.3.

example

Mine divs

looks like this:

<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">
            <strong>Page 1</strong>
        </h2>
    </div>
    <div data-role="content">
        <strong>You are in page one.</strong>
    </div>
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">
            <strong>Page 2</strong>
        </h2>
    </div>
    <div data-role="content">
        <strong>You are in page two.</strong>
        <a href=#third data-transition="slideup">Go to page 3</a>
    </div>
 </div>
<div data-role="page" id="third">
    <div data-role="header">
        <h2 class="ui-title">Page three</h2>
    </div>
    <div data-role="content">
        <strong>You are in page three.</strong>
    </div>
</div>

With the following Javascript I can draw left and right between data-role="page"

divs, however there is no way for me to distinguish between subpages and main pages. Can I define swipes for the main pages (mostly using the one I already have) and then another one for the subpages (maybe distinguish them using ids

or something?)?

$(document).ready( function() {
    $(document).on('swipeleft', 'div.ui-page', function () {
        var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length >= 0) {
        $.mobile.changePage(nextpage, {
            transition: "slide",
            reverse: false,
            allowSamePageTransition: true
        });
    }
     });

    $(document).on('swiperight', 'div.ui-page', function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length >= 0) {
        $.mobile.changePage(prevpage, {
            transition: "slide",
            reverse: true, 
            allowSamePageTransition: true
        });
    }
    });
});

Possibly from https://stackoverflow.com/questions/14688983/using-javascript-in-subpages-loaded-with-jquerys-changepage .

+3


source to share


1 answer


Try this code, it works fine =).

HTML:

<!--PAGE 1-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">
            <strong>Page 1</strong>
        </h2>
    </div>
    <div data-role="content">
        <strong>You are in page one.</strong>
        <a href="#subpage1_1" name="lnk" data-transition="slideup">Go to page 1.1</a>
    </div>
</div>
<!--PAGE 2-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">
            <strong>Page 2</strong>
        </h2>
    </div>
    <div data-role="content">
        <strong>You are in page two.</strong>
        <a href="#subpage2_1" name="lnk" data-transition="slideup">Go to page 2.1</a>
    </div>
 </div>
 <!--PAGE 3-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page 3</h2>
    </div>
    <div data-role="content">
        <strong>You are in page three.</strong>
    </div>
</div>
<!--PAGE 4-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page 4</h2>
    </div>
    <div data-role="content">
        <strong>You are in page four.</strong>
        <a href="#subpage4_1" name="lnk" data-transition="slideup">Go to page 4.1</a>
    </div>
</div>
<!--PAGE 5-->
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page 5</h2>
    </div>
    <div data-role="content">
        <strong>You are in page five.</strong>
    </div>
</div>
<!--SUBPAGE 1.1-->
<div data-role="page" id="subpage1_1">
    <div data-role="header">
        <h2 class="ui-title">Page 1.1</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 1.1.</strong>
    </div>
</div>
<!--SUBPAGE 1.2-->
<div data-role="page" id="subpage1_2">
    <div data-role="header">
        <h2 class="ui-title">Page 1.2</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 1.2.</strong>
    </div>
</div>

 <!--SUBPAGE 2.1-->
 <div data-role="page" id="subpage2_1">
    <div data-role="header">
        <h2 class="ui-title">Page 2.1</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 2.1.</strong>
    </div>
</div>
<!--SUBPAGE 4.1-->
<div data-role="page" id="subpage4_1">
    <div data-role="header">
        <h2 class="ui-title">Page 4.1</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 4.1.</strong>
    </div>
</div>
<!--SUBPAGE 4.2-->
<div data-role="page" id="subpage4_2">
    <div data-role="header">
        <h2 class="ui-title">Page 4.2</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 4.2.</strong>
    </div>
</div>
<!--SUBPAGE 4.3-->
<div data-role="page" id="subpage4_3">
    <div data-role="header">
        <h2 class="ui-title">Page 4.3</h2>
    </div>
    <div data-role="content">
        <strong>You are in page 4.3.</strong>
    </div>
</div>


JAVASCRIPT:

var num_pages = 5;
var curr_subpage = 0;
var subpage = false;
var curr_subnum = 0;
var curr_url;

$(document).ready( function() {

    var links = document.getElementsByName("lnk");

    links[0].onclick = function(e) { curr_subpage = 1; curr_subnum = 1; };
    links[1].onclick = function(e) { curr_subpage = 2; curr_subnum = 1; };
    links[2].onclick = function(e) { curr_subpage = 4; curr_subnum = 1; };

    $(document).on('swipeleft', 'div.ui-page', function () {
        var nextpage = $(this).next('div[data-role="page"]');
        var url = $(this).next('div[data-role="page"]').attr('data-url');
        console.log("1: "+url);

        curr_url = $('div.ui-page').attr('data-url');
        console.log("2: "+curr_url);

        if (nextpage.length >= 0)
        {
            if(curr_url == url)
            {
                $.mobile.changePage(nextpage, {
                    transition: "slide",
                    reverse: false,
                    allowSamePageTransition: true
                });
            }else{
                var subpage_url = "subpage"+curr_subpage+"_"+(curr_subnum+1);
                if( url == subpage_url)
                {
                    curr_subnum++;
                    $.mobile.changePage(nextpage, {
                        transition: "slide",
                        reverse: false,
                        allowSamePageTransition: true
                    });
                }
            }
        }
     });

    $(document).on('swiperight', 'div.ui-page', function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        var url = $(this).prev('div[data-role="page"]').attr('data-url');
        console.log(url);

        curr_url = $('div.ui-page').attr('data-url');

        if (prevpage.length >= 0)
        {
            if(curr_url == url && curr_subnum == 0)
            {
                $.mobile.changePage(prevpage, {
                    transition: "slide",
                    reverse: true, 
                    allowSamePageTransition: true
                });
            }else{
                var subpage_url = "subpage"+curr_subpage+"_"+(curr_subnum-1);
                if( url == subpage_url)
                {
                    curr_subnum--;
                    $.mobile.changePage(prevpage, {
                        transition: "slide",
                        reverse: false,
                        allowSamePageTransition: true
                    });
                }
            }
        }
    });
});
+2


source






More articles:


All Articles