The rebirth of ASP.NET MVC4.0: Jquery in Mobile list

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jquery Mobile Web Page</title>
    <link href="~/Content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css" rel="stylesheet" />
    <link href="~/Content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" />
    <script src="~/Content/js/jquery.js"></script>
    <script src="~/Content/js/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>

    <div data-role="page" id="page">
        <h1>The effect of List</h1>

        <div data-role="content">

            <span style="color: red">List</span>
            <br />
            <br />
            <ul data-role="listview">
                <li>Apple</li>
                <li>Banana</li>
                <li>Pears</li>
                <li>Hami melon</li>
                <li>Honey peach</li>
            </ul>
            <br />
            <br />
            <span style="color: red">List of numbers</span>
            <br />
            <br />
            <ol data-role="listview">
                <li>Apple</li>
                <li>Banana</li>
                <li>Pears</li>
                <li>Hami melon</li>
                <li>Honey peach</li>
            </ol>
            <br />
            <br />
            <span style="color: red">The InSet list [data-inset="ture"]</span>
            <br />
            <br />
            <ol data-role="listview" data-inset="ture">
                <li>Apple</li>
                <li>Banana</li>
                <li>Pears</li>
                <li>Hami melon</li>
                <li>Honey peach</li>
            </ol>

            <br />
            <br />
            <span style="color: red">ICO 16*16 list</span>
            <br />
            <br />
            <ul data-role="listview" data-inset="true">
                <li><a href="#">

                    <img src="~/Content/image/gb.png" alt="France" class="ui-li-icon ui-corner-none">The British K</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="Germany" class="ui-li-icon">The British A</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="Great Britain" class="ui-li-icon">The British B</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="Finland" class="ui-li-icon">The British C</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="United States" class="ui-li-icon ui-corner-none">The British D</a></li>
            </ul>
            <br />
            <br />
            <span style="color: red">With map list</span>
            <br />
            <br />

            <ul data-role="listview">
                <li><a href="#">
                    <img src="~/Content/image/1.jpg">
                    <h2>Play alone</h2>
                    <p>¥59.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/5.jpg">
                    <h2>All the pigs are here.</h2>
                    <p>¥26.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/3.jpg">
                    <h2>If you give me three days light</h2>
                    <p>¥32.00</p>
                </a>
                </li>
            </ul>
            <br />
            <br />
            <span style="color: red">Inset list</span>
            <br />
            <br />

            <ul data-role="listview" data-inset="true">
                <li><a href="#">
                    <img src="~/Content/image/1.jpg">
                    <h2>Play alone</h2>
                    <p>¥59.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/5.jpg">
                    <h2>All the pigs are here.</h2>
                    <p>¥26.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/3.jpg">
                    <h2>If you give me three days light</h2>
                    <p>¥32.00</p>
                </a>
                </li>
            </ul>



            <ul data-role="listview" data-split-icon="gear" data-split-theme="b" data-inset="true" data-theme="b">
                <li><a href="#">
                    <img src="~/Content/image/1.jpg">
                    <h2>Play alone</h2>
                    <p>¥59.00</p>
                </a>
                    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Buy now</a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/5.jpg">
                    <h2>All the pigs are here.</h2>
                    <p>¥26.00</p>
                </a>
                    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/3.jpg">
                    <h2>If you give me three days light</h2>
                    <p>¥32.00</p>
                </a>
                    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
                </li>
            </ul>
            <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width: 340px; padding-bottom: 2em;">
                <h3>Buy now?</h3>
                <p>Please confirm whether or not to buy? </p>
                <a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">¥$26.99</a>
                <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
            </div>


            <ul data-role="listview" data-inset="true" data-divider-theme="a">
                <li data-role="list-divider">Fiction books</li>
                <li><a href="#">
                    <h2>[Recommend]</h2>
                    <h1> The youth is not old </h1>
                    <p class="ui-li-aside"><strong>Author:</strong>Kraft</p>
                </a></li>
                <li><a href="#"> See you. Beijing <p class="ui-li-aside"><strong>Year of issue: 2013</strong>The second edition</p>
                </a></li>
                <li data-role="list-divider">Programming books</li>
                <li><a href="#"> C# <p class="ui-li-aside"><strong>06: 51</strong>AM</p>
                </a></li>
                <li><a href="#"> Java <p class="ui-li-aside"><strong>16: 51</strong>PM</p>
                </a></li>
            </ul>
            <br />
            <br />
            <span style="color: red">Foldable list</span>
            <br />
            <br />
            <div data-role="collapsible" data-theme="b" data-content-theme="b">
                <h2>Popular books - click to expand</h2>
                <ul data-role="listview">
                    <li data-role="list-divider">Fiction books</li>
                    <li><a href="#"> The youth is not old <p class="ui-li-aside"><strong>Author:</strong>Kraft</p>
                    </a></li>
                    <li><a href="#"> See you. Beijing <p class="ui-li-aside"><strong>Year of issue: 2013</strong>The second edition</p>
                    </a></li>
                    <li data-role="list-divider">Programming books</li>
                    <li><a href="#"> C# <p class="ui-li-aside"><strong>06: 51</strong>AM</p>
                    </a></li>
                    <li><a href="#"> Java <p class="ui-li-aside"><strong>16: 51</strong>PM</p>
                    </a></li>
                </ul>
            </div>
            <br />
            <br />
            <span style="color: red">Foldable list group</span>
            <br />
            <br />

            <div data-role="collapsible-set" data-theme="a" data-content-theme="a">
                <div data-role="collapsible">
                    <h2>Popular books</h2>
                    <ul data-role="listview" data-inset="true" data-divider-theme="a">
                        <li data-role="list-divider">Fiction books</li>
                        <li><a href="#">
                            <h2>[Recommend]</h2>
                            <h1> The youth is not old </h1>
                            <p class="ui-li-aside"><strong>Author:</strong>Kraft</p>
                        </a></li>
                        <li><a href="#"> See you. Beijing <p class="ui-li-aside"><strong>Year of issue: 2013</strong>The second edition</p>
                        </a></li>
                        <li data-role="list-divider">Programming books</li>
                        <li><a href="#"> C# <p class="ui-li-aside"><strong>06: 51</strong>AM</p>
                        </a></li>
                        <li><a href="#"> Java <p class="ui-li-aside"><strong>16: 51</strong>PM</p>
                        </a></li>
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h2>New Arrivals</h2>
                    <ul data-role="listview" data-inset="true">
                        <li><a href="#">
                            <img src="~/Content/image/1.jpg">
                            <h2>Play alone</h2>
                            <p>¥59.00</p>
                        </a>
                        </li>
                        <li><a href="#">
                            <img src="~/Content/image/5.jpg">
                            <h2>All the pigs are here.</h2>
                            <p>¥26.00</p>
                        </a>
                        </li>
                        <li><a href="#">
                            <img src="~/Content/image/3.jpg">
                            <h2>If you give me three days light</h2>
                            <p>¥32.00</p>
                        </a>
                        </li>
                    </ul>
                </div>
            </div>

             <ul data-role="listview" data-inset="true">
                <li>Apple <span class="ui-li-count">12</span></li>
                <li>Banana <span class="ui-li-count">96</span></li>
                <li>Pears <span class="ui-li-count">163</span></li>
                <li>Hami melon <span class="ui-li-count">912</span></li>
                <li>Honey peach <span class="ui-li-count">212</span></li>
            </ul>
           
            </div>
        </div>
        <div data-role="page" id="dialog">
            <div data-role="header">
                <h1>For the dialog box effect test</h1>
            </div>
            <div data-role="content">
                For testing the effect
            </div>
            <div data-role="footer">
                <h4>Asp.Net Mvc 4.0 +JqueryMobile 1.4.0-beta 1</h4>
            </div>
        </div>
</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Joyce at November 29, 2013 - 3:33 AM