Faster, Higher, Stronger
更快,更高,更强

jQuery Mobile: Collapsibleset Widget

一、基本信息

描述:创建一组可折叠块内容。

1.1、Sets of collapsibles

如果你将一堆可折叠组件包裹于一个带data-role=”collapsibleset”的div容器内,那么jQuery Mobile框架会在视觉上将他们聚合起来,并且在这些视觉上聚合在一起的可折叠组件中,你展开其中一个可折叠组件时,其他的可折叠组件会被折叠,就像手风琴效果一般。

默认情况下,可折叠组件的可折叠区是处于折叠状态的。若想让某个可折叠区在一开始显示时就处于展开状态,可以改可折叠区的头部加上data-collapsed=”false”。

<div data-role=”collapsible-set”>

<div data-role=”collapsible” data-collapsed=”false”>

<h3>Section 1</h3>

<p>I’m the collapsibleset content for section 1. My content is initially visible.</p>

</div>

<div data-role=”collapsible”>

<h3>Section 2</h3>

<p>I’m the collapsibleset content for section 2.</p>

</div>

</div>

1.2、非内嵌collapsibleset组件

通过在data-role=”collapsible-set”容器上应用data-inset=”false”可以获取全宽无角可折叠组件。

1.3、迷你collapsibleset组件

通过在data-role=”collapsible-set”容器上应用data-mini=”true”可获得迷你版collapsibleset组件。

1.4、自定义图标

通过在data-role=”collapsible-set”容器上应用data-collapsed-icon和data-expanded-icon可以自定义所有可折叠组件在折叠和展开状态下需要显示的图标,当然你也可以针对个别可折叠组件对组件本身另外设定data-collapsed-icon和data-expanded-icon。

1.5、定义图标的位置

通过在data-role=”collapsible-set”容器上应用data-iconpos可定义图标的位置。也可以仅在单个collapse组件上应用data-iconpos,只不过这样只会对这单个collapse组件产生效果。

1.6、设定可折叠内容的主题

<div data-role=”collapsible-set” data-theme=”b” data-content-theme=”a”>

1.7、设定collapsibleset组件中单个可折叠区的主题

在单个可折叠区上应用data-theme和data-content-theme。

1.8、提供预渲染标记

<div data-role=”collapsibleset” class=”ui-collapsible-set” data-corners=”false”>
<div data-role=”collapsible”>
<h2>Child collapsible</h2>
<p>This is the collapsible content.</p>
</div>
<div data-role=”collapsible” data-enhanced=”true” class=”ui-collapsible ui-collapsible-inset ui-corner-all” data-collapsed=”false” data-corners=”true”>
<h2 class=”ui-collapsible-heading”>
<a href=”#” class=”ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus”>
Pre-rendered child collapsible
<span class=”ui-collapsible-heading-status”>click to collapse contents</span>
</a>
</h2>
<div class=”ui-collapsible-content” aria-hidden=”false”>
<p>This is the collapsible content.</p>
</div>
</div>
</div>

二、选项

2.1、collapsedIcon

字符串型,默认值为”plus”。

2.2、corners

2.3、defaults

2.4、disabled

2.5、enhanced

2.6、expandedIcon

2.7、iconpos

2.8、initSelector

2.9、inset

2.10、mini

三、方法

destroy()、disable()、enable()、option( optionName )、option()、option( optionName, value )、option( options )、refresh()

四、事件

create( event, ui )

五、DEMO

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>collapsibleset demo</title>
<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
</head>
<body>

<div data-role=”page” id=”page1″>
<div data-role=”header”>
<h1>jQuery Mobile Example</h1>
</div>
<div role=”main” class=”ui-content”>
<div data-role=”collapsibleset”>
<div data-role=”collapsible” data-collapsed=”false”>
<h3>Section A</h3>
<p>I’m the collapsibleset content for section A.</p>
</div>
<div data-role=”collapsible”>
<h3>Section B</h3>
<p>I’m the collapsibleset content for section B.</p>
</div>
</div>
</div>
</div>

</body>
</html>

以上,滕运锋,2016年1月1日于上海。

赞(0) 打赏
未经允许不得转载:峰间的云 » jQuery Mobile: Collapsibleset Widget

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏