Lungo.js/example/static/sections/pull.html

<section id="pull" data-pull="arrow-down" data-transition="slide">

    <header data-title="Pull & Refresh" data-back="chevron-left"></header>

    <article class="active list indented">
        <ul>
             <li class="contrast" data-icon="ok">
                    <strong>
                    Test this featury only drag down.
                </strong>
                <small>This element has an associated event</small>
            </li>

            <li>
            <strong>&lt;li&gt; + &lt;strong&gt; </strong>
        </li>

        <li class="selectable">
            <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
        </li>

        <li>
            <a href="#">
                <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
            </a>
        </li>

        <li>
            <strong>&lt;li&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="anchor contrast">colors</li>

        <li class="dark">
            <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="theme">
            <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="arrow light">
            <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="anchor contrast">.arrow class</li>

        <li class="arrow">
            <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
        </li>

        <li class="arrow">
            <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
            <small>&lt;small&gt;</small>
        </li>


        <li class="anchor contrast">.right element</li>

        <li>
            <a href="#">
                <div class="on-right">.right</div>
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
            </a>
        </li>

        <li>
            <a href="#">
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
                <div class="on-right">.right</div>
            </a>
        </li>

        <li>
            <a href="#">
                <div class="right tag blue">.right.tag</div>
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
            </a>
        </li>

        <li>
            <a href="#">
                <div class="right tag blue" data-icon="clock">.right data-icon</div>
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
            </a>
        </li>

        <li>
            <a href="#">
                <a href="#" class="button small red right" data-label="button"></a>
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
            </a>
        </li>

        <li class="anchor contrast">With data-icon or data-image attribute</li>
        <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
            <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
            <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li data-icon="user">
            <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class="thumb" data-icon="user">
            <strong>&lt;li .thumb data-icon&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="anchor contrast">With colours</li>
        <li class="accept">
            <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class="cancel">
            <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class="warning">
            <strong>&lt;li .warning&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class="color">
            <strong>&lt;li .color&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        </ul>
    </article>

</section>