jquery mobile

jquery mobile 折叠效果演示源码

abloz 2011-09-09
2011-09-09 
<html>

 <head>
 	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1" name="viewport">
 <title>jquery隐藏内容测试</title>
	<link href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" rel="stylesheet"></link>
	<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
 </head>
 <body>
 <div data-role="page" id="home">
 <div data-role="header">
 <h1>测试jquery </h1>
 </div>
 <div data-role="content">
 <div data-role="collapsible-set">

	<div data-role="collapsible" data-collapsed="false">
	<h3>隐藏集合 A</h3>
	<p>隐藏集合内容A.</p>
	</div>

	<div data-role="collapsible">
	<h3>Section B</h3>
	<p>I'm the collapsible set content for section B.</p>
	</div>
    	<div data-role="collapsible">
	<h3>Section B</h3>
	<p>I'm the collapsible set content for section B.</p>
	</div>

    	<div data-role="collapsible">
	<h3>Section B</h3>
	<p>I'm the collapsible set content for section B.</p>
	</div>
		<div data-role="collapsible">
	<h3>Section B</h3>
	<p>I'm the collapsible set content for section B.</p>
	</div>


</div>

 <div data-role="collapsible" data-state="collapsed">
 <h5><span style="color:#f00;"> 好友：</span> 中文测试，哈哈!<div class="ui-grid-a">
	<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
	<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div></h5>
 <p style="color:#f00;">中文测试，哈哈!</p>
  <p>中文测试，哈哈哈哈!</p>
 </div>
 <div data-role="collapsible" data-state="collapsed">
 <h5>About<color="red"> this app</color></h5>
 <p>This app rocks!</p>
  <p>This app rocks!</p>
 </div>
 </div>
 </div>
 </body>

</html>

这是jquery mobile 做的自动隐藏和展示的效果源码。第一行表示html5，低版本浏览器不支持。可以自动收缩和展开，可用于做浏览列表。 效果演示

如非注明转载, 均为原创. 本站遵循知识共享CC协议,转载请注明来源

FEATURED TAGS
css vc6 http automake linux make makefile voip 乱码 awk flash vista vi vim javascript pietty putty ssh posix subversion svn windows 删除 编译 多线程 wxwidgets ie ubuntu 开源 c python bash 备份 性能 scp 汉字 log ruby 中文 bug msn nginx php shell wordpress mqueue android eclipse java mac ios html5 js mysql protobuf apache hadoop install iocp twisted centos mapreduce hbase thrift tutorial hive erlang lucene hdfs sqoop utf8 filter 草原 yarn ganglia 恢复 scrapy django fsimage flume tail flume-ng mining scala go kafka gradle cassandra baas spring postgres maven mybatis mongodb https nodejs 镜像 心理学 机器学习 Keras theano anaconda docker spark akka-http json 群论 区块链 加密 抽象代数 离散对数 同余 欧拉函数 扩展欧几里德算法 ES6 node-inspect debug win10 vscode 挖矿
FRIENDS