主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表
代码：
<!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 列表的更多相关文章
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板
左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...
- 主攻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 ...
- 主攻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 ...
- 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API
UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...
- 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用
在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...
- 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息
第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...
- 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据
@{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...
随机推荐
- Import语句
在Java中,如果给出一个完整的限定名,包括包名.类名,那么Java编译器就可以很容易地定位到源代码或者类.Import语句就是用来提供一个合理的路径,使得编译器可以找到某个类. 例如,下面的命令行将 ...
- 集合映射Set（使用xml文件）
如果持久类具有Set对象,可以在映射文件中使用set元素映射Set集合. set元素不需要索引元素. List和Set之间的区别是: Set只存储唯一的值. 我们来看看我们如何在映射文件中实现集合: ...
- php 佛祖保佑 永无bug
<pre name="code" class="java">/* _ooOoo_ o8888888o 88" . "88 (| ...
- cocos2dx-3.0(前言)
说了好久,告诉自己要開始学cocos2dx(在心理里告诉了好久),然后养成良好习惯,记录自己学习cocos2dx的过程.一个是怕自己忘记.还有一个是更加让自己理解透彻(或许哪天我写的好了,组合一下出一 ...
- 26计算限制的异步操作02-CLR
由CLR via C#(第三版) ,摘抄记录... 6 Parallel的静态For,ForEach和Invoke方法 在一些常见的编程情形中,使用任务也许会提升性能.为了简化编程,静态类System ...
- 基于Boost无锁队列实现的内存池
- L - Points on Cycle(旋转公式)
L - Points on Cycle Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- influxDB---Data Exploration
the group clause group by 返回的分组结果是根据用户指定的tag ,time interval. 1.group by tags 2.group by time interva ...
- iOS 静态库的制作
按照公司的想法 要开发一款SDK,于是就抽空学习一下静态枯的制作过程. 在IOS中有静态库和动态库的区分,下面我们就来详细介绍一下. 一.静态库和动态库的详细介绍. 我们平时的工程中或多或少都要引入第 ...
- Oracle中索引名称的唯一性
数据库索引处理是遇到的一点问题,简单记录下 oracle的规定,在同一个SCHEMA下的对象是不能用相同的名字命名的,一般创建索引名用“表名_字段名”,这样能很快知道这个索引,是属于哪个表的. col ...