pwa
/
Lungo.js
зеркало из https://github.com/tapquo/Lungo.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lungo Flexbox - SDK</title>
    <meta name="description" content="">
    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="cleartype" content="on">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">

</head>

<body>

    <aside id="aside1" data-transition="left">
        <header data-title="Aside 1"></header>
        <article id="aside1_article" class="active list scroll">
            <ul>
                <li data-view-section="s1" data-icon="plus">Section 1</li>
                <li data-view-section="s2" data-icon="plus">Section 2</li>
                <li data-view-section="s3" data-icon="plus">Section 3</li>
            </ul>
        </article>
    </aside>

    <aside id="aside2" data-transition="left">
        <header data-title="Aside 2"></header>
        <article id="aside2_article" class="active list scroll">
            <ul>
                <li data-view-section="s3" data-icon="plus">Section 3</li>
                <li data-view-section="s4" data-icon="plus">Section 4</li>
            </ul>
        </article>
    </aside>

    <!-- ===================================================================================== -->
    <!-- ===================================================================================== -->

    <section id="s1" data-transition="slide" data-aside="aside1" data-children="s2 s3">
        <header data-title="S1">
            <nav class="left">
                <button data-icon="list" data-view-aside="aside1"></button>
            </nav>
        </header>
        <article id="incoming" class="list scroll">
            aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
            <button data-view-section="s2">S2 go!</button>
            <button data-view-section="s3">S3 go!</button>
            <button data-view-section="s4">S4 go!</button>
        </article>
    </section>

    <section id="s2" data-transition="slide" data-aside="aside1">
        <header data-title="S2">
            <nav class="left">
                <button data-view-section="back">BaCk</button>
            </nav>
        </header>
        <article id="art_2">
            bbbbbb bbbbbbbbbb bbbb bbbb
        </article>
    </section>

    <section id="s3" data-transition="slide" data-aside="aside1">
        <header data-title="S3">
            <nav class="left">
                <button data-view-section="back">BaCk</button>
            </nav>
        </header>
        <article id="art_3">
            cccc c cccccccc cccc c cccccccc cccc c cccccccc
        </article>
    </section>

    <section id="s4" data-transition="slide" data-aside="aside2" data-children="s5">
        <header data-title="S4">
            <nav class="left">
                <button data-view-section="back">BaCk</button>
            </nav>
        </header>
        <article id="art_4">
            dddd d dddddddd dddd d dddddddd dddd d dddddddd
            <button data-view-section="s5">S5 go!</button>
        </article>
    </section>

    <section id="s5" data-transition="slide" data-aside="aside2" data-children="s6">
        <header data-title="S5">
            <nav class="left">
                <button data-view-section="back">BaCk</button>
            </nav>
        </header>
        <article id="art_5">
            eee eeee eeee eeeee eeeeee
            <button data-view-section="s6">S5 go!</button>
        </article>
    </section>

    <section id="s6" data-transition="slide" data-aside="aside2">
        <header data-title="S6">
            <nav class="left">
                <button data-view-section="back">BaCk</button>
            </nav>
        </header>
        <article id="art_6">
            eee eeee eeee eeeee eeeeee
        </article>
    </section>

    <script src="components/quojs/quo.js"></script>
    <script src="components/lungo.brownie/lungo.debug.js"></script>
    <script>
        Lungo.init({
            name: 'Flexbox',
            version: '2.2',
            history: false
        });
        $$("[data-router=back]").tap(function(event) { Lungo.Router.back(); });
    </script>
</body>
</html>