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

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、效果图预览:

JQuery Mobile入门——在正文中显示可折叠的区块_第1张图片点击展开可折叠区块:JQuery Mobile入门——在正文中显示可折叠的区块_第2张图片


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>

你可能感兴趣的:(JQuery Mobile入门——在正文中显示可折叠的区块)