可折叠内容块 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>
展开前的效果
展开后的效果
相关推荐
`data-collapsed`和`data-collapsed-icon`属性则是与折叠内容区域(Collapsible)相关的,用于控制内容区域默认是否折叠以及折叠状态下的图标。这在构建可扩展的内容区块,如列表或详细信息时非常有用。 总结来说,...
如果需要组合多个可折叠内容,可以使用`data-role="collapsible-set"`,并配置相应的数据属性来统一样式。 `data-role="content"`是页面主要内容的容器,可以使用`data-theme`来设置内容区域的主题颜色,这有助于...
`data-role="collapsible"`属性用于创建这样的区块,而`data-role="collapsible-set"`可以创建一组可折叠区块。例如: ```html <div data-role="collapsible"> 一般简单性 <p>... ``` 此外,学习如何设置页面...
**功能说明**:此组件用于创建可折叠的内容区域,使得页面内容更加紧凑和易于管理。 **代码示例**: ```html <div data-mage-init='{"accordion":{"openedState":"active","collapsible":true,"active":false,...
- `data-role="collapsible"`:定义可折叠区域。 - `data-role="slider"`:定义滑块。 - **data-position**:定义元素的位置。 - `data-position="inline"`:元素内联显示。 - `data-position="fixed"`:元素...
5. **可折叠内容**: - `<div data-role="collapsible">` 用于创建可展开/折叠的内容区域。 6. **弹出框和对话框**: - `<div data-role="popup">` 创建弹出窗口,`<div data-role="dialog">` 创建对话框。 7. *...
例如,`data-role="slider"` 创建滑块,`data-role="collapsible"` 用于折叠展开的内容区域。 七、事件与API jQuery Mobile 提供了一系列与触控和页面交互相关的事件,如 `pageinit`(页面初始化)、`tap`(轻击)...
此外,`data-role="collapsible"` 和 `data-role="accordion"` 可用于创建折叠和展开的内容区域。 ### 4. 表单和表单组件 jQuery Mobile 提供了丰富的表单组件,如按钮、滑块、选择器和文本输入框等。这些组件不仅...
- **折叠集(Collapsible Sets)**:通过`data-role="collapsible"`和`data-collapsed="true"`实现内容的折叠与展开。 **6. 主题和自定义** jQuery Mobile提供了一套基于Sass的可定制主题系统,允许开发者通过修改...
菜单通常是一个可折叠的列表(collapsible listview),可以包含多个相册类别或专辑。每个类别链接到相应的相册页面,展示该类别的图片。在 HTML 中,我们可以这样定义: ```html <div data-role="page" id="album-...
- **Accordion**: 通过`<div data-role="collapsible">`创建折叠式内容区域。 - **Listview**: 通过`<ul data-role="listview">`创建列表视图,可添加分组、筛选和图标。 - **Dialog**: 使用`<div data-role="dialog...
- 类似于单个可折叠内容,但包含多个可折叠内容块,可以一起管理和展示。 - 数据属性与可折叠内容类似,但集合级别的属性如 `data-collapsed-icon` 和 `data-expanded-icon` 会影响整个集合的图标。 5. **Content...
- **可折叠内容**:`<div data-role="collapsible">` 创建可展开/折叠的内容区域。 ### 5. 性能优化 - **异步加载**:使用 `data-ajax="false"` 属性阻止页面的异步加载,以改善页面跳转性能。 - **主题定制**:只...
此外,jQuery Mobile 提供了导航栏(navbar)、工具栏(toolbar)、可折叠面板(collapsible)和弹出对话框(popup)等高级组件,帮助构建复杂的布局。比如,`<div data-role="navbar">` 可以创建一个包含多个按钮的...
它提供了许多移动友好的组件,如可折叠内容块、导航栏和表单。在这个案例中,`<div data-role="collapsible">`是用于创建可折叠内容的关键元素,`data-collapsed="true"`属性默认使其保持关闭状态。 HTML结构通常...
4. **_accordion_ 和 _collapsible_**:`<div data-role="collapsible">` 创建折叠内容,`<div data-role="accordion">` 创建手风琴效果。 ### 五、事件和API 1. **事件**:jQuery Mobile 提供了许多与触摸和页面...
- 创建可折叠内容块,需要一个带有`data-role="collapsible"`的`<div>`容器,内含一个标题元素(如`<h1>`到`<h6>`)和要展开的内容。 - 可以通过组合使用可折叠内容块和列表,创建嵌套的结构,例如在列表项中包含...
在jQuery Mobile中,`data-role="collapsible"`属性用于创建一个可折叠的区域,用户可以点击标题来展开或收起内容。这在展示大量信息时特别有用,因为它允许用户按需查看详细内容,保持页面整洁。 下面是一个基本的...
如需创建一个可折叠的内容块,需要为容器添加 data-role=”collapsible” 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记: 实例 点击我 – 我可以折叠! 我是可折叠的内容...