代码：

<!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>

主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表的更多相关文章

  1. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  2. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板

    左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...

  4. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

  5. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  6. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API

    UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...

  7. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  8. 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息

    第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...

  9. 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据

                @{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 整理mp4协议重点，将协议读薄

    MP4 实际代表的含义是 MPEG-4 Part 14.它只是 MPEG 标准中的 14 部分.它主要参考 ISO/IEC 标准来制定的.MP4 主要作用是可以实现快进快放,边下载边播放的效果.他是基 ...

  2. SourceInsight 不断无响应的有关问题

    SourceInsight 不断无响应的问题 sourceinsight3使用过程中,如果是大工程,总是出现抽筋的现象,CPU使用.内存占用都很高,阅读android源码不断出现无响应.后发现主要是因 ...

  3. CodeIgniter框架——知识要点汇总

    NO1.学习要点: 一.CodeIgniter 框架的简介 二.CodeIgniter 框架的安装 三.CodeIgniter 框架的目录结构分析 四.CodeIgniter 框架是如何工作的? 五. ...

  4. poj 3270(置换 循环)

    经典的题目,主要还是考思维,之前在想的时候只想到了在一个循环中,每次都用最小的来交换,结果忽略了一种情况,还可以选所有数中最小的来交换一个循环. Cow Sorting Time Limit: 200 ...

  5. 郭大侠与Rabi-Ribi (优先队列)

    最近郭大侠迷上了玩Rabi-Ribi这个游戏. Rabi-Ribi呢,是一个打兔子的动作冒险游戏,萌萌哒的兔子在地上跑来跑去,好萌好萌呀~ 这个游戏是这样玩的,郭大侠作为一个主角,拿着一个小锤子,他的 ...

  6. Xamarin.Forms学习之Page Navigation(一)

    在最初接触Xamarin.Forms的时候,我是跟着Xamarin官方的名为“learning-xamarin-ebook”的pdf文档进行学习的,我在成功运行Hello world程序之后,我开始跟 ...

  7. puppeteer,webdriverio, chrome webdriver

    http://www.r9it.com/20171106/puppeteer.html Puppeteer 至少需要 Node v6.4.0,如要使用 async / await,只有 Node v7 ...

  8. Docker + ElasticSearch + Node.js

    最近有空就想研究下ElasticSearch. 此篇文章用来记录研究过程.备注:需要有一定的docker基础,ElasticSearch的基本概念 Docker安装ElasticSearch 首先,就 ...

  9. ES6学习笔记(三)——数值的扩展

    看到这条条目录有没有感觉很枯燥,觉得自己的工作中还用不到它所以实在没有耐心看下去,我也是最近得闲,逼自己静下心来去学习去总结,只有在别人浮躁的时候你能静下心来去学去看去总结,你才能进步.毕竟作为前端不 ...

  10. jquery生成二维码图片

    1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...