pwa
/
Lungo.js
cermin dari https://github.com/tapquo/Lungo.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!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="a">
        <header data-title="aside a"></header>
        <article>


        </article>
    </aside>

    <aside id="b">
        <header data-title="aside b"></header>
        <article></article>
    </aside>

    <section id="zero" data-transition="slide" data-children="one" data-aside="a">
        <header data-title="Zero">
            <nav class="left">
                <button data-icon="list" data-view-aside="a"></button>
            </nav>
            <nav class="on-right">
                <button data-icon="arrow-right" d-ata-view-section="one" data-action="toSectionOne"></button>
            </nav>
        </header>
        <article id="zero-1" class="scroll">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, numquam, ut unde quia ipsam dolor pariatur? Numquam, facere, necessitatibus soluta possimus quibusdam nihil labore autem repudiandae ducimus repellendus quidem expedita.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, numquam, ut unde quia ipsam dolor pariatur? Numquam, facere, necessitatibus soluta possimus quibusdam nihil labore autem repudiandae ducimus repellendus quidem expedita.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, numquam, ut unde quia ipsam dolor pariatur? Numquam, facere, necessitatibus soluta possimus quibusdam nihil labore autem repudiandae ducimus repellendus quidem expedita.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, numquam, ut unde quia ipsam dolor pariatur? Numquam, facere, necessitatibus soluta possimus quibusdam nihil labore autem repudiandae ducimus repellendus quidem expedita.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, numquam, ut unde quia ipsam dolor pariatur? Numquam, facere, necessitatibus soluta possimus quibusdam nihil labore autem repudiandae ducimus repellendus quidem expedita.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, numquam, ut unde quia ipsam dolor pariatur? Numquam, facere, necessitatibus soluta possimus quibusdam nihil labore autem repudiandae ducimus repellendus quidem expedita.
        </article>

         <footer>
            <nav>
                <a href="#" data-view-article="layout-art1" data-icon="user" class="active" data-label="Hello"></a>
                <a href="#" data-view-article="layout-art2" data-icon="inbox" data-count="80"></a>
                <a href="#" data-view-article="layout-art3" data-icon="comments"></a>
                <a href="#" data-view-article="layout-art4" data-icon="cog"></a>
            </nav>
        </footer>
    </section>

    <section id="one" data-transition="slide" data-children="two" data-aside="b">
        <header data-title="One" data-back="chevron-left">
            <nav class="left">
                <button data-icon="list" data-view-aside="b"></button>
            </nav>
            <nav class="on-right">
                <button data-icon="arrow-right" data-view-section="two"></button>
            </nav>
        </header>
        <article id="one-1"></article>
    </section>

    <section id="two" data-transition="slide" data-children="three">
        <header data-back="chevron-left" data-title="Two">
            <nav class="on-right">
                <button data-icon="arrow-right" data-view-section="three"></button>
            </nav>
        </header>
        <article id="two-1"></article>
    </section>

    <section id="three" data-transition="slide" data-children="four">
        <header data-back="chevron-left" data-title="Three">
            <nav class="on-right">
                <button data-icon="arrow-down" data-view-section="four"></button>
            </nav>
        </header>
        <article id="three-1"></article>
    </section>

    <section id="four" data-transition="cover">
        <header data-back="chevron-left" data-title="Four"></header>
        <article id="four-1"></article>
    </section>

    <!-- Lungo dependencies -->
    <script src="components/quojs/quo.js"></script>
    <script src="components/lungo.brownie/lungo.debug.js"></script>
    <!-- LungoJS - Sandbox App -->
    <script>
        Lungo.init({
            name: 'Flexbox',
            version: '2.2',
            history: false
        });

        Lungo.ready(function() {
            $$("[data-action=toSectionOne]").on("tap", function() {
                Lungo.Notification.show("user", "Please wait", 1, function() {
                    Lungo.Router.section("one");
                    Lungo.Notification.hide();
                });
            });
        });

        // Lungo.Notification.show("user", "Hello world! yeah");

        // Lungo.Notification.error('Title', 'Description', 'ok', 2);

        // Lungo.Notification.show()

        //  Lungo.Notification.confirm({
        //     icon: 'user',
        //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
        //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
        //     accept: {
        //         icon: 'checkmark',
        //         label: 'Accept',
        //         callback: function(){ alert("Yes!"); }
        //     },
        //     cancel: {
        //         icon: 'close',
        //         label: 'Cancel',
        //         callback: function(){ alert("No!"); }
        //     }
        // });

// Lungo.Notification.html('<div class="title">slaida</div><h1>Hello World</h1>', "Close");
    </script>
</body>
</html>