JQuery Mobile入门——在正文中显示可折叠的区块

来源：互联网发布：matlab提取数组元素编辑：程序博客网时间：2024/05/06 01:45

1、实现对区块的折叠需要创建一个<div>容器，将该容器的data-role属性设为collapsible，表示是一个可折叠的区块。

2、示例代码：

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div data-role="page">
<div data-role="header"><h1>头部栏标题</h1></div>
<div data-role="collapsible" data-collapsed="true">
<h1>点击查看更多</h1>
<p>JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上，当 JQM 致力于统一和优化这个代码基时，jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。</p>
</div>
<div data-role="footer"><h4>@2013 3I Studio</h4></div>
</div>
</BODY>
</HTML>

3、效果图预览：

点击展开可折叠区块：

4、JQuery Mobile 允许对折叠的区块进行嵌套显示，即在一个折叠区块的内容中，再添加一个折叠区块，以此类推，代码如：

<div data-role="collapsible" data-collapsed="true">
<h1>点击查看更多</h1>
<p>这是第一个区块</p>
<div data-role="collapsible" data-collapsed="true">
<h1>这是嵌套的区块</h1>
<p>这是嵌套区块的内容</p>
</div>
</div>