自己学习jQuery mobile的一些小的东西，不怎么样，发上来记录一下自己的成长。（大神见笑）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><!--头部工具栏 ==== 一般包含一到两个按钮，再多不适合，页脚不限制-->
<a href="" data-icon="home" data-role="button">首页</a>
<h1>页头</h1>
<a href="" data-icon="search" data-role="button">搜索</a>
</div>
<div data-role="content">内容
<a href="#se" data-transition="slide">#se</a>
<a href="#third" data-transition="slide">#third</a>
<a href="#forth" data-transition="pop">#fourth</a>
<div data-role="controlgroup"><!--jq mobile组合按钮垂直分布（默认），horizontal水平， vertical垂直分布-->
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--默认情况时的样子-->
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--水平情况时的样子-->
</div>
<div data-role="controlgroup" data-type="vertical">
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--水平情况时的样子-->
</div>
<button>按钮（一般用来提交表单）</button>
<input type="button" value="按钮（一般用来提交表单）"/>
<a href="" data-shadow="true" data-role="button">true(有阴影)|false(没有阴影)</a>
<a href="" data-role="button" data-shadow="false" >true(有阴影)|false(没有阴影)</a>
<a href="#" data-role="button" data-shadow="false">123</a>
<a href="" data-role="button" data-iconpos="left" data-icon="arrow-l">左按钮</a><!--按钮图标位置-->
<a href="#third" data-role="button" data-iconpos="right" data-icon="arrow-r" data-transition="pop">右按钮</a>
<a href="" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
</div>
<div data-role="footer" class="ui-btn">
<!-- <h1>页尾</h1>- ==== 在footer里h1默认的是居中显示，如果在footer里加上class="ui-btn"之后，不会显示-->
<a href="" data-role="button" data-icon="plus">转发新浪微博</a><!--页脚工具栏不限制，页脚具有伸缩性，更实用更多变，可以包含多种按钮。-->
<a href="" data-role="button" data-icon="plus">转发腾讯微博</a>
<a href="" data-role="button" data-icon="plus">转发到QQ空间</a>
<div data-role="controlgroup" data-type="horizontal"><!--按钮图标，排列水平-->
<a href="" data-role="button" data-icon="plus">转发新浪微博</a><!--页脚工具栏不限制，页脚具有伸缩性，更实用更多变，可以包含多种按钮。-->
<a href="" data-role="button" data-icon="plus">转发腾讯微博</a>
<a href="" data-role="button" data-icon="plus">转发到QQ空间</a>
</div>
</div>
</div>
<div data-role="page" id="se"><!--页面跳转第二页 ==== 在一个html里写上两个data-role="page"-->
<div data-role="header" data-position="fixed" data-fullscreen="true"><h1>页头</h1></div>
<div data-role="content">
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
</div>
<div data-role="footer" data-position="fixed"><h1>页尾</h1></div>
</div>
<div data-role="page" id="third"><!--页面跳转第二页 ==== 在一个html里写上两个data-role="page"-->
<div data-role="header"><h1>页头</h1></div>
<div data-role="navbar"><!--导航栏 ==== 按钮个数一行最多有5个，再多之后会折行下来，然后会每两个按钮一行。-->
<ul><!--导航栏在header之下，content之上（情况一）-->
<li><a href="" data-icon="home" class="ui-btn-active">首页</a></li>
<li><a href="" data-icon="arrow-r">选项</a></li>
<li><a href="" data-icon="search">搜索</a></li>
<li><a href="" data-icon="search">搜索</a></li>
</ul>
</div>
<button>经常用来提交表单，不作页面链接按钮</button>
<div data-role="footer">
<div data-role="navbar" data-iconpos="left"><!--导航栏 ==== 按钮个数一行最多有5个，再多之后会折行下来，然后会每两个按钮一行。-->
<ul><!--导航栏在footer中-->
<li><a href="" data-icon="home" class="ui-btn-active ui-btn-persist">首页</a></li>
<li><a href="" data-icon="arrow-r">选项</a></li>
<li><a href="" data-icon="search">搜索</a></li>
<li><a href="" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="forth">
<div data-role="header"><h1>页头</h1></div>
<div data-role="content" data-inset="false">
<div data-role="collapsible-set" data-inset="false">
<div data-role="collapsible" ><!--默认折叠框是闭合的，如果想让他不在折叠，在页面加载的时候也显示，所以加上data-collapsed="false"属性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
<div data-role="collapsible"><!--默认折叠框是闭合的，如果想让他不在折叠，在页面加载的时候也显示，所以加上data-collapsed="false"属性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
<div data-role="collapsible" ><!--默认折叠框是闭合的，如果想让他不在折叠，在页面加载的时候也显示，所以加上data-collapsed="false"属性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
<div data-role="collapsible"><!--默认折叠框是闭合的，如果想让他不在折叠，在页面加载的时候也显示，所以加上data-collapsed="false"属性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
</div>
</div>
<div data-role="footer"><h1>页尾</h1></div>
</div>
</body>
</html>
扫一扫
7475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
