代码：

<!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. 我的第五个程序 java的JDBC连接mysql数据库 实现输入查询

    import java.sql.*; import java.util.Scanner; public class JDBCTest { public static void main(String[ ...

  2. Photoshop脚本之获得文件夹下所有特定后缀文件

    function getAllFiles(folderName,houzhui){ folderName var regthis = new RegExp( '.+\.('+houzhui+')$', ...

  3. 推荐个WIN7下小巧的可转录声音的软件-Audio Record Wizard V6.99

    之前是XP上用的是 WaveCN 2.0.0.5,但这个软件好久没更新了,不支持WIN7 最终找到了Audio Record Wizard V6.99,尽管没 WaveCN 2.0.0.5好用,但也全 ...

  4. WPF-Binding的源

    1. 绑定到其它元素 <Grid> <StackPanel> <TextBox x:Name="textbox1" /> <Label C ...

  5. Laravel5.1 请求

    这篇主要说说Request 每当用户访问我们的网站功能时都会用到它 我们可以使用Request中的一些数据来做出适当的相应. 1 常用的属性和方法 我们可以从Request中取到一些重要属性来做一些逻 ...

  6. System、应用程序进程的Binder线程池和Handler消息循环

    首先看一张Android系统启动流程图:

  7. 字符设备驱动程序--LED驱动

    编写驱动程序需要编写那些代码: 1.硬件相关的驱动程序 2.Makefile的编译程序 3.还需要编写一个相关的测试程序 比如说:一个摄像头驱动程序 1.驱动程序的编写,需要编写一些硬件相关的操作,编 ...

  8. 编写自己的cp命令

    有时候要对整个目录做备份,修改cp1.c使得当两个参数都是目录时,把第一个目录中的所有文件复制到第二个目录中,文件名不变.那么该如何实现? 我们先来看看cp1.c的实现方式,它从一个文件中读取数据然后 ...

  9. Kotlin——初级篇（三）：数据类型详解

    任意一种开发语言都有其数据类型,并且数据类型对于一门开发语言来说是最基本的构成,同时也是最基础的语法.当然,Kotlin也不例外.Kotlin的数据类型和Java是大致相同的,但是他们的写法不同,并且 ...

  10. 【BZOJ4817】[Sdoi2017]树点涂色 LCT+线段树

    [BZOJ4817][Sdoi2017]树点涂色 Description Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路径的权值是:这条路 ...