`

可折叠内容块 data-role="collapsible"

阅读更多

可折叠内容块 data-role="collapsible"

要创建内容折叠块。首先,创建一个容器,并添加 data-role="collapsible" 属性。并且给此容器使用 data-content-theme 属性,为可折叠的内容块,进行主题样式设计。

其次,在容器中,添加任何头部区域的标题(h1-h6)或图例元素(egend element)。JQuery Mobile框架将样式化头部,使其看起来像一个可点击的按钮,并添加一个“+”图标左边表示它的膨胀。

最后,在头部区域后,添加任何HTML标记作为被折叠的内容区域。JQuery Mobile框架将把这个标记为包裹起来。当点击头部标题的时候,内容将被折叠隐藏或者显示出来。

默认情况下,内容是被折叠起来的。

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

折叠起来的样式
折叠起来的样式

点击被打开样式
点击被打开样式

  

展开折叠 data-collapsed="false"

默认情况下,可折叠容器是收缩的,可以通过通过点击头部展开。给容器添加 data-collapsed="false" 属性,可实现当加载页面的时候,折叠内容区域为展开样式。

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

  

取消圆角 data-inset="false"

默认情况下折叠区域有插图的外观(两头有圆角等)。若要让他们全屏宽度无角造型,给容器添加 data-inset="false" 属性。

<div data-role="collapsible" data-inset="false" >

  

迷你型 data-mini="true"

一个更紧凑的版本,在工具栏和紧空间是有用的,添加 data-mini="true" 属性即可

<div data-role="collapsible" data-mini="true" >

  

自定义图标 data-collapsed-icon

可折叠的标题的默认图标可以通过使用data-collapsed-icon和data-expanded-icon属性数据扩展。

在以下情况下,data-collapsed-icon="arrow-r"和data-expanded-icon="arrow-d"。

<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
	<h3>I have custom icons</h3>
	<p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
</div>


展开前的效果


展开后的效果

  

图标定位 data-iconpos

默认情况下,图标位于左侧。但可是使用 data-iconpos 属性来自定义。下例子中,使用了data-iconpos="right"来自定义:

<div data-role="collapsible" data-iconpos="right">
	<h3>I'm a header</h3>
	<p><code>data-iconpos="right"</code></p>
</div>

  

折叠内容区的主题样式 data-content-theme

在可折叠的标题和内容之间,提供一个强大的视觉美化效果,给容器添加 data-content-theme 属性的和指定的主题样本的字母(如,a、b、c、d、e)。使内容块有:边界线和平坦的背景颜色(非渐变色)和底部圆角。使他们看起来像是一组。

<div data-role="collapsible" data-content-theme="c">
  <h3>Header</h3>
  <p>I'm the collapsible content with a themed content block set to "c".</p>
</div>


展开前的效果


展开后的效果

  

折叠标题区的主题样式 data-theme

设置在一个可折叠的主题标题按钮,添加 data-theme 属性的包装和指定一个样本的字母(如,a、b、c、d、e)。请注意,你可以分别设置标题和内容的这些主题匹配属性。

<div data-role="collapsible" data-theme="a" data-content-theme="a">
  <h3>Header swatch A</h3>
  <p>I'm the collapsible content with a themed content block set to "a".</p>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h3>Header swatch B</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>


展开前的效果


展开后的效果

  

嵌套折叠区

根据需要折叠区可以彼此嵌套。在下面例子中,我们设置的内容主题提供清晰的视觉效果。

 

		<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
			<h3>I'm a header</h3>
			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			
			<div data-role="collapsible" data-theme="c" data-content-theme="c">
				<h3>I'm a nested collapsible with a child collapsible</h3>
				<p>I'm a child collapsible.</p>
					<div data-role="collapsible" data-theme="d" data-content-theme="d">
						<h3>Nested inside again.</h3>
						<p>Three levels deep now.</p>
					</div><!-- /section 1A -->
			</div><!-- /section 1 -->
			
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 3: Form elements</h3>
				<form action="#" method="get">
					<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
					</div>
					<div data-role="fieldcontain">
						<label for="slider">Input slider:</label>
					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
					</div>
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
				    </fieldset>
				</form>
			</div><!-- /section 2 -->
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 4: Collapsed list</h3>
				<p>Here is an inset list:</p>
				<ul data-role="listview" data-inset="true" data-theme="d">
					<li><a href="index.html">Acura</a></li>
					<li><a href="index.html">Audi</a></li>
					<li><a href="index.html">BMW</a></li>
					<li><a href="index.html">Cadillac</a></li>
					<li><a href="index.html">Chrysler</a></li>
					<li><a href="index.html">Dodge</a></li>
					<li><a href="index.html">Ferrari</a></li>
					<li><a href="index.html">Ford</a></li>
				</ul>
			</div><!-- /section 3 -->
		</div>


展开前的效果


展开后的效果

转自:http://www.lampweb.org/jquerymobile/10/34.html

分享到:
评论

相关推荐

    html5的data-role的属性

    `data-collapsed`和`data-collapsed-icon`属性则是与折叠内容区域(Collapsible)相关的,用于控制内容区域默认是否折叠以及折叠状态下的图标。这在构建可扩展的内容区块,如列表或详细信息时非常有用。 总结来说,...

    方便打印的jQuery mobile data属性

    如果需要组合多个可折叠内容,可以使用`data-role="collapsible-set"`,并配置相应的数据属性来统一样式。 `data-role="content"`是页面主要内容的容器,可以使用`data-theme`来设置内容区域的主题颜色,这有助于...

    《响应式网页开发实战》教学教案—第8章 制作介绍jQuery Mobiler的网页.pdf

    `data-role="collapsible"`属性用于创建这样的区块,而`data-role="collapsible-set"`可以创建一组可折叠区块。例如: ```html &lt;div data-role="collapsible"&gt; 一般简单性 &lt;p&gt;... ``` 此外,学习如何设置页面...

    Magento内置前端

    **功能说明**:此组件用于创建可折叠的内容区域,使得页面内容更加紧凑和易于管理。 **代码示例**: ```html &lt;div data-mage-init='{"accordion":{"openedState":"active","collapsible":true,"active":false,...

    jquery_mobile

    - `data-role="collapsible"`:定义可折叠区域。 - `data-role="slider"`:定义滑块。 - **data-position**:定义元素的位置。 - `data-position="inline"`:元素内联显示。 - `data-position="fixed"`:元素...

    jquerymobile中文文档

    5. **可折叠内容**: - `&lt;div data-role="collapsible"&gt;` 用于创建可展开/折叠的内容区域。 6. **弹出框和对话框**: - `&lt;div data-role="popup"&gt;` 创建弹出窗口,`&lt;div data-role="dialog"&gt;` 创建对话框。 7. *...

    jquery_molibe_file

    例如,`data-role="slider"` 创建滑块,`data-role="collapsible"` 用于折叠展开的内容区域。 七、事件与API jQuery Mobile 提供了一系列与触控和页面交互相关的事件,如 `pageinit`(页面初始化)、`tap`(轻击)...

    jQuery_Mobile中文手册

    此外,`data-role="collapsible"` 和 `data-role="accordion"` 可用于创建折叠和展开的内容区域。 ### 4. 表单和表单组件 jQuery Mobile 提供了丰富的表单组件,如按钮、滑块、选择器和文本输入框等。这些组件不仅...

    jquery.mobile-1.4.5.zip

    - **折叠集(Collapsible Sets)**:通过`data-role="collapsible"`和`data-collapsed="true"`实现内容的折叠与展开。 **6. 主题和自定义** jQuery Mobile提供了一套基于Sass的可定制主题系统,允许开发者通过修改...

    jQuery mobile菜单式的相册

    菜单通常是一个可折叠的列表(collapsible listview),可以包含多个相册类别或专辑。每个类别链接到相应的相册页面,展示该类别的图片。在 HTML 中,我们可以这样定义: ```html &lt;div data-role="page" id="album-...

    JqueryMobile 开发文档速查

    - **Accordion**: 通过`&lt;div data-role="collapsible"&gt;`创建折叠式内容区域。 - **Listview**: 通过`&lt;ul data-role="listview"&gt;`创建列表视图,可添加分组、筛选和图标。 - **Dialog**: 使用`&lt;div data-role="dialog...

    JqueryMobile data-属性

    - 类似于单个可折叠内容,但包含多个可折叠内容块,可以一起管理和展示。 - 数据属性与可折叠内容类似,但集合级别的属性如 `data-collapsed-icon` 和 `data-expanded-icon` 会影响整个集合的图标。 5. **Content...

    JQuery Mobile需要的包

    - **可折叠内容**:`&lt;div data-role="collapsible"&gt;` 创建可展开/折叠的内容区域。 ### 5. 性能优化 - **异步加载**:使用 `data-ajax="false"` 属性阻止页面的异步加载,以改善页面跳转性能。 - **主题定制**:只...

    jQuery Mobile类库

    此外,jQuery Mobile 提供了导航栏(navbar)、工具栏(toolbar)、可折叠面板(collapsible)和弹出对话框(popup)等高级组件,帮助构建复杂的布局。比如,`&lt;div data-role="navbar"&gt;` 可以创建一个包含多个按钮的...

    jQuery手机端常见问题列表展开收缩代码

    它提供了许多移动友好的组件,如可折叠内容块、导航栏和表单。在这个案例中,`&lt;div data-role="collapsible"&gt;`是用于创建可折叠内容的关键元素,`data-collapsed="true"`属性默认使其保持关闭状态。 HTML结构通常...

    ( jQuery Mobile-chs 中文手册

    4. **_accordion_ 和 _collapsible_**:`&lt;div data-role="collapsible"&gt;` 创建折叠内容,`&lt;div data-role="accordion"&gt;` 创建手风琴效果。 ### 五、事件和API 1. **事件**:jQuery Mobile 提供了许多与触摸和页面...

    第10讲jQueryMobile(布局和表单).pptx

    - 创建可折叠内容块,需要一个带有`data-role="collapsible"`的`&lt;div&gt;`容器,内含一个标题元素(如`&lt;h1&gt;`到`&lt;h6&gt;`)和要展开的内容。 - 可以通过组合使用可折叠内容块和列表,创建嵌套的结构,例如在列表项中包含...

    jquery mobile实现可折叠的导航按钮

    在jQuery Mobile中,`data-role="collapsible"`属性用于创建一个可折叠的区域,用户可以点击标题来展开或收起内容。这在展示大量信息时特别有用,因为它允许用户按需查看详细内容,保持页面整洁。 下面是一个基本的...

    jQuery Mobile 可折叠块

    如需创建一个可折叠的内容块,需要为容器添加 data-role=”collapsible” 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记: 实例 点击我 – 我可以折叠! 我是可折叠的内容...

Global site tag (gtag.js) - Google Analytics