您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 可折叠

jQuery Mobile 可折叠_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 可折叠

jQuery Mobile 可折叠

此节有 108 人学习过     更新时间:2017-08-06 12:17   参与评论

可折叠的内容块

可折叠(Collapsibles)同意您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建可折叠的内容块,请向某个容器分配 data-role="collapsible" 属性。在容器(div)中,添加一个标题元素(h1-h6),其后是您需要扩展的任意 HTML 标志:

实例

<div data-role="collapsible">
  <h1>点击我 - 我能够折叠!</h1>
  <p>我是可折叠的内容。</p>
</div>

亲自试一试

默认地,该内容是关闭的。如需在页面加载时扩展内容,请使用 data-collapsed="false":

实例

<div data-role="collapsible" data-collapsed="false">
  <h1>点击我 - 我能够折叠!</h1>
  <p>现在我默认是展开的。</p>
</div>

亲自试一试

嵌套的可折叠块

能够嵌套可折叠内容块:

实例

<div data-role="collapsible">
  <h1>点击我 - 我能够折叠!</h1>
  <p>我是被展开的内容。</p>
  <div data-role="collapsible">
    <h1>点击我 - 我是嵌套的可折叠块!</h1>
    <p>我是嵌套的可折叠块中被展开的内容。</p>
  </div>
</div>

亲自试一试

提示:可折叠内容块能够被嵌套您希望的任意次数。

可折叠集合

可折叠集合(Collapsible sets)指的是被组合在一起的可折叠块(常被称为手风琴)。当新块被打开时,一切其余块会关闭。

创建若干内容块,然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块:

实例

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我能够折叠!</h1>
    <p>我是被展开的内容。</p>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我能够折叠!</h1>
    <p>我是被展开的内容。</p>
  </div>
</div>

亲自试一试

澳门赌城国际官网实例

通过 data-inset 属性来删除圆角
如何移除 collapsibles 上的圆角。
通过 data-mini 最小化 collapsibles
如何使 collapsibles 更小巧。
通过 data-collapsed-icon 和 data-expanded-icon 改变图标
如何改变 collapsibles 的图标(默认是 + 和 -)。

如对本文有疑问,请提交到交流e路发官网 下载安装,广大热心网友会为你解答!! 点击进入e路发官网 下载安装


公布评论 (108人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换丰博娱乐官网
最新评论
------分隔线----------------------------
条评论
Sitemap