主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

時間  2019-11-19
標籤 主攻 asp.net asp mvc4.0 mvc 重生 jquery mobile 列表 欄目 ASP 简体版
原文   原文鏈接

代碼：css

<!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>List效果</h1>

        <div data-role="content">

            <span style="color: red">列表</span>
            <br />
            <br />
            <ul data-role="listview">
                <li>蘋果</li>
                <li>香蕉</li>
                <li>梨子</li>
                <li>哈密瓜</li>
                <li>水蜜桃</li>
            </ul>
            <br />
            <br />
            <span style="color: red">數字列表</span>
            <br />
            <br />
            <ol data-role="listview">
                <li>蘋果</li>
                <li>香蕉</li>
                <li>梨子</li>
                <li>哈密瓜</li>
                <li>水蜜桃</li>
            </ol>
            <br />
            <br />
            <span style="color: red">InSet列表 [data-inset="ture"]</span>
            <br />
            <br />
            <ol data-role="listview" data-inset="ture">
                <li>蘋果</li>
                <li>香蕉</li>
                <li>梨子</li>
                <li>哈密瓜</li>
                <li>水蜜桃</li>
            </ol>

            <br />
            <br />
            <span style="color: red">ICO 16*16 列表</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">英國K</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="Germany" class="ui-li-icon">英國A</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="Great Britain" class="ui-li-icon">英國B</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="Finland" class="ui-li-icon">英國C</a></li>
                <li><a href="#">
                    <img src="~/Content/image/gb.png" alt="United States" class="ui-li-icon ui-corner-none">英國D</a></li>
            </ul>
            <br />
            <br />
            <span style="color: red">帶圖列表</span>
            <br />
            <br />

            <ul data-role="listview">
                <li><a href="#">
                    <img src="~/Content/image/1.jpg">
                    <h2>獨自上場</h2>
                    <p>￥59.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/5.jpg">
                    <h2>全部的豬都到齊了</h2>
                    <p>￥26.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/3.jpg">
                    <h2>假如給我三天光明</h2>
                    <p>￥32.00</p>
                </a>
                </li>
            </ul>
            <br />
            <br />
            <span style="color: red">Inset帶圖列表</span>
            <br />
            <br />

            <ul data-role="listview" data-inset="true">
                <li><a href="#">
                    <img src="~/Content/image/1.jpg">
                    <h2>獨自上場</h2>
                    <p>￥59.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/5.jpg">
                    <h2>全部的豬都到齊了</h2>
                    <p>￥26.00</p>
                </a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/3.jpg">
                    <h2>假如給我三天光明</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>獨自上場</h2>
                    <p>￥59.00</p>
                </a>
                    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">當即購買</a>
                </li>
                <li><a href="#">
                    <img src="~/Content/image/5.jpg">
                    <h2>全部的豬都到齊了</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>假如給我三天光明</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>當即購買?</h3>
                <p>請肯定是否購買？</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">取消</a>
            </div>


            <ul data-role="listview" data-inset="true" data-divider-theme="a">
                <li data-role="list-divider">小說類圖書</li>
                <li><a href="#">
                    <h2>【推薦】</h2>
                    <h1>《青春不老》</h1>
                    <p class="ui-li-aside"><strong>做者:</strong>卡夫</p>
                </a></li>
                <li><a href="#">《再見，北京》<p class="ui-li-aside"><strong>發行年份:2013</strong>第2版</p>
                </a></li>
                <li data-role="list-divider">編程類圖書</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">可摺疊列表</span>
            <br />
            <br />
            <div data-role="collapsible" data-theme="b" data-content-theme="b">
                <h2>熱門書籍-點擊展開</h2>
                <ul data-role="listview">
                    <li data-role="list-divider">小說類圖書</li>
                    <li><a href="#">《青春不老》<p class="ui-li-aside"><strong>做者:</strong>卡夫</p>
                    </a></li>
                    <li><a href="#">《再見，北京》<p class="ui-li-aside"><strong>發行年份:2013</strong>第2版</p>
                    </a></li>
                    <li data-role="list-divider">編程類圖書</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">可摺疊列表組</span>
            <br />
            <br />

            <div data-role="collapsible-set" data-theme="a" data-content-theme="a">
                <div data-role="collapsible">
                    <h2>熱門書籍</h2>
                    <ul data-role="listview" data-inset="true" data-divider-theme="a">
                        <li data-role="list-divider">小說類圖書</li>
                        <li><a href="#">
                            <h2>【推薦】</h2>
                            <h1>《青春不老》</h1>
                            <p class="ui-li-aside"><strong>做者:</strong>卡夫</p>
                        </a></li>
                        <li><a href="#">《再見，北京》<p class="ui-li-aside"><strong>發行年份:2013</strong>第2版</p>
                        </a></li>
                        <li data-role="list-divider">編程類圖書</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>新書推薦</h2>
                    <ul data-role="listview" data-inset="true">
                        <li><a href="#">
                            <img src="~/Content/image/1.jpg">
                            <h2>獨自上場</h2>
                            <p>￥59.00</p>
                        </a>
                        </li>
                        <li><a href="#">
                            <img src="~/Content/image/5.jpg">
                            <h2>全部的豬都到齊了</h2>
                            <p>￥26.00</p>
                        </a>
                        </li>
                        <li><a href="#">
                            <img src="~/Content/image/3.jpg">
                            <h2>假如給我三天光明</h2>
                            <p>￥32.00</p>
                        </a>
                        </li>
                    </ul>
                </div>
            </div>

             <ul data-role="listview" data-inset="true">
                <li>蘋果 <span class="ui-li-count">12</span></li>
                <li>香蕉 <span class="ui-li-count">96</span></li>
                <li>梨子 <span class="ui-li-count">163</span></li>
                <li>哈密瓜 <span class="ui-li-count">912</span></li>
                <li>水蜜桃 <span class="ui-li-count">212</span></li>
            </ul>
           
            </div>
        </div>
        <div data-role="page" id="dialog">
            <div data-role="header">
                <h1>用於對話框效果測試</h1>
            </div>
            <div data-role="content">
                用於內容效果測試
            </div>
            <div data-role="footer">
                <h4>Asp.Net Mvc 4.0 +JqueryMobile 1.4.0-beta 1</h4>
            </div>
        </div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程