这是昨天学习JQuery mobile基本元素的总结，下述代码基本包含了所有元素的用法，需要的同学可以拷去运行运行：
<!DOCTYPE html>
<html>
<head>
<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" id="pageone" >
<div data-role="header" data-position="fixed">
<h1>欢迎访问我的主页1</h1>
<a href="#" data-role="submit" data-transition="slide" data-icon="arrow-l">向左</a>
<a href="#pagetwo" data-role="submit" data-icon="arrow-r"data-transition="slide" data-iconpos="right">向右</a>
</div>
<div data-role="content">
<p>点击链接来查看滑动效果。</p>
<div data-role="collapsible">
<h1>要显示请点击</h1>
<p>这是显示出来的内容
</div>
<div data-role="collapsible">
<h1>多层折叠内容</h1>
<div data-role="collapsible">
<h2>第二层</h2>
<p>这也是点击显示的内容</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">设置</a></li>
<li><a href="#pagethree" data-icon="plus">通讯录</a></li>
<li><a href="#" data-icon="grid">菜单</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎访问我的主页2</h1>
<a href="#pageone" data-role="submit" data-transition="slide" data-icon="arrow-l" data-direction="reverse">向左</a>
<a href="#pagethree" data-role="submit" data-icon="arrow-r"data-transition="slide" data-iconpos="right" >向右</a>
</div>
<div data-role="content">
<!--改变折叠栏图标-->
<div data-role="collapsible" data-collapsed="arrow-d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-mini="true">
<h1>要显示请点击</h1>
<p>这是显示的内容</p>
</div>
<div data-role="collapsible" data-inset="false">
<h1>没有圆角的折叠框</h1>
<p>用到的是：data-inset="false"元素</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">设置</a></li>
<li><a href="#pagethree" data-icon="plus">通讯录</a></li>
<li><a href="#" data-icon="grid">菜单</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>欢迎访问我的主页3</h1>
<a href="#pagetwo" data-role="submit" data-transition="slide" data-icon="arrow-l" data-direction="reverse">向左</a>
<a href="#" data-role="submit" data-icon="arrow-r"data-transition="slide" data-iconpos="right" >向右</a>
</div>
<div data-role="content">
<h2>我的通讯录</h2>
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">设置</a></li>
<li><a href="#pagethree" data-icon="plus">通讯录</a></li>
<li><a href="#" data-icon="grid">菜单</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
8455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
