<!DOCTYPE html> <!--collapsible可折叠的--> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!--宽度就是设备的宽度,缩放1.0,表示不缩放--> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <title></title> <!--jquerymobile必须依赖着3个库文件--> <script src="jquery-2.1.4.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <link href="jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> </head> <body> <div data-role="page"> <div data-role="header"> <h1>头</h1> </div> <div data-role="content"> <!--默认折叠--> <div data-role="collapsible"> <h4>heading</h4> <p>人的生命是有限的,可是为人民服务是无限的</p> <p>我要把有限的生命投入到无限的为人民服务中去</p> </div> <!--去掉展开内容显示的边框--> <div data-role="collapsible" data-content-theme="false"> <h4>heading</h4> <p>我展开了</p> </div> <!--默认展开--> <div data-role="collapsible"data-collapsed="false"> <h4>heading</h4> <p>人的生命是有限的,可是为人民服务是无限的</p> <p>我要把有限的生命投入到无限的为人民服务中去</p> </div> <!--展开一个列表--> <div data-role="collapsible"> <h1>系列</h1> <ul data-role="listview"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> </ul> </div> </div> <div data-role="footer"> <h1>底</h1> </div> </div> </body></html>
源码下载:
http://download.csdn.net/download/zhaihaohao1/9164935
![]()
![]()
jQuery Mobile基础05----jQuery Moblie Widgets-collapsible(可折叠的
最新推荐文章于 2019-06-30 18:11:43 发布