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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!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>
    <section id="main" data-transition="slide" data-aside="features" data-children="folk">
        <header>
            <nav class="left">
                <a href="#" data-view-aside="features" data-icon="menu"></a>
                <a href="#" data-view-menu="options" data-icon="star"></a>
                <a href="#" data-icon="user" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
                <a href="#" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
                <a href="#" data-icon="user" class="button" data-article="products" data-view-article="folks"></a>
            </nav>

            <div class="title centered">Folks</div>

            <nav class="right">
                <button data-icon="user" class="button" data-article="folks" data-label="Products" data-view-article="products" data-async="static/articles/products.html"></button>
            </nav>
        </header>

        <nav id="options" data-control="menu" class="icons">
            <a href="#" data-view-article="folks" data-icon="star" data-title="Folks">Folks</a>
            <a href="#" data-view-article="products" data-icon="heart" data-title="Explore">Explore</a>
            <a href="#" data-view-article="article" data-icon="comments">Activity</a>
            <a href="#" data-view-article="article" data-icon="user">Profile</a>
            <a href="#" data-view-section="folk" data-icon="thumbs-up">Folk</a>
        </nav>

        <nav data-control="groupbar" data-os="android" data-article="folks">
            <a href="#" data-view-article="folks" data-label="Folks" data-count="11"></a>
            <a href="#" data-view-article="products" data-async="static/articles/products.html" data-label="Products" id="products"></a>
        </nav>

        <article id="folks" class="active list scroll indente-d">
            <ul>
                <li class="thumb selectable arrow" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
                    <a href="#" >
                        <strong>Javi Jiménez</strong>
                        <small>Founder & CTO</small>
                    </a>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/ina.jpg">
                    <strong>Ignacio Olalde</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aitor.jpg">
                    <strong>Aitor Jimenez</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/manrique.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/josu.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/inigo.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/jany.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/german.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/cata.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/oihane.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aritz.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
            </ul>
        </article>

        <footer data-os="ios">
            <nav>
                <a href="#" data-view-article="folks" data-icon="desktop" data-count="11"></a>
                <a href="#" data-view-article="products" data-icon="tablet" data-count="5"></a>
            </nav>
        </footer>
    </section>

    <section id="test" data-transition="slide">
        <header data-title="Test" data-back="home"></header>
        <article></article>
    </section>

    <section id='folk' data-transition="slide" data-aside="features" data-children="x">
        <header data-title='Javi Jimenez'>
            <nav>
                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
            </nav>
        </header>
        <article id='f1' class='active list scroll'>
            <ul>
                <li>
                    <strong>lorem</strong>
                </li>
            </ul>
        </article>
    </section>

    <section id='quojs' data-transition="slide" data-aside="features2">
        <header data-title='QuoJS'>
            <nav>
                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
            </nav>
        </header>
        <article id='q1' class='active'></article>
    </section>

    <aside id="features" >
        <header data-title="Features">
            <nav class="right">
                <a href="#" class="buttons" data-icon="settings"></a>
            </nav>
        </header>
        <article class="list scroll active">
            <ul>
                <!-- Basic Layout -->
                <li data-view-article="folks" data-title="Profile" data-icon="user">
                    <a href="#">
                        <div class="tag right">11</div>
                        <strong>Folks</strong>
                        <small>Discover our team!</small>
                    </a>
                </li>

                <li data-view-article="products" data-title="Third Parties" data-async="static/articles/products.html">
                    <div class="tag right">5</div>
                    <strong>Products</strong>
                    <small>Fueled by coffee</small>
                </li>
                <li data-view-section="test" data-icon="desktop">
                    <strong>Section TEST</strong>
                </li>

                <li data-view-section="folk" data-view-article="f1" data-icon="desktop">
                    <div class="tag right">5</div>
                    <strong>Folk F1</strong>
                    <small>Fueled by coffee</small>
                </li>
            </ul>
        </article>
    </aside>

    <aside id="features2" class="right">
        <header data-title="Features 2"></header>

        <article class="list scroll active">
            <ul>
                <!-- Basic Layout -->
                <li class="active">
                    <a href="#layout-art1" data-router="article" data-title="Profile" class="active">
                        <strong>Profile</strong></a>
                </li>
            </ul>
        </article>
    </aside>

    <!-- 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() {
            pull = new Lungo.Element.Pull('section#pull article', {
                onPull: "Pull down to refresh",
                onRelease: "Release to get new data",
                onRefresh: "Refreshing...",
                callback: function() {
                    setTimeout(function(){
                        pull.hide();
                    }, 1000)
                }
            });
        });

    </script>
</body>
</html>