可折叠内容块 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>
展开前的效果
展开后的效果
相关推荐
<div data-options="region:'east',split:true,title:'East',collapsible:true" <table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', showGroup: ...
如需创建一个可折叠的内容块,需要为容器添加 data-role=”collapsible” 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记: 实例 点击我 – 我可以折叠! 我是可折叠的内容...
React原生可折叠视图 基于React Native 动画可折叠视图组件 概述 可折叠的常见用例的一个简单组件 ...$ npm install @eliav2/react-native-collapsible-view // or with yarn $ yarn add @eliav2/react-native-collapsi
React导航可折叠 react-navigation的扩展,使标题可折叠。 在上试用演示 兼容性 :construction: :pushpin: 在v5.7.0所有内容都已迁移为使用钩子。 请根据本自述文件应用重大更改。 react-navigation react-...
React本能的使用Animated API的React Native的可动画折叠组件纯JavaScript支持动态内容高度和知道其collapsed状态的组件(适用于切换箭头等)。安装npm install --save react-native-collapsible可折叠用法import ...
只需指定 data-role=” collapsible “创建可折叠面板 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>可折叠的导航面板</title> <!--使用名为viewport的meta...
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与... data-target=”#id” 属性是对应折叠的内容 ( )。 注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 Collapsible Lorem ipsum dolo
React原生可折叠 tabview 示例这只是一个实现带有可折叠标题的 tabview 的简单示例。 在这里,我们在我们的实现中使用 。依赖关系请注意,我们在此示例中使用的是 react-native 0.62.2 ,一些重大更改可能会导致崩溃...
雨果普遍可折叠 一个Hugo插件,仅使用原始JavaScript和CSS即可折叠部分(如剧透标签)。 标签分为两部分-折叠above和below 。 任一部分均支持任意复杂的Markdown和HTML内容。 您甚至可以嵌套多个可折叠对象! 安装 ...
角材料可折叠 可折角材料是可折角材料的组件。 可折叠是单击时会扩展的手风琴元素。 它们使您可以隐藏与用户不立即相关的内容。 依存关系 取决于以下库: AngularJS AngularJS材质 用法 使用凉亭安装 bower ...
制作此组件的灵感来自于此 ,但由于react-native-collapsible使用Animated ,我决定基于<Collapsible>编写自己的组件。 安装 npm install --save react-native-pixfactory-accordion PixAccordion用法 import ...
肉桂系统托盘可折叠 与 2.6 版本兼容的 Cinnamon 可折叠系统托盘小程序。 这基本上是到 Cinnamon 2.6 代码库的的 rebase。 我暂时删除了大多数自定义选项以启动并运行第一个版本。 因此,目前小程序隐藏了所有系统...
使用Vue3构建的易于使用,可定制的可折叠面板/手风琴库。 安装 使用yarn或npm将软件包安装为项目依赖项: $ yarn add @dafcoe/vue-collapsible-panel --- or --- $ npm install --save @dafcoe/vue-collapsible-...
react-native-collapsible 列表上、下滚动可以实现导航栏或者自定义header隐藏、显示的效果。 介绍 因为此效果不易写成通用的组件,因此只写了一个demo。各位可以根据项目的需求进行定制。 效果 在安卓上会有一定...
可折叠资源管理器 提供一种简单的方法来在侧边栏上对资源进行排序和分组。安装您可以通过composer安装该软件包: composer require digital-creative/collapsible-resource-manager接下来,您必须在Nova中注册该工具...
React响应式可折叠部分组件(可折叠) React组件将内容包装在可折叠元素中,并使用触发器打开和关闭。 就像手风琴一样,但是可以同时打开任意数量的部分。 受支持。从v1.x迁移到v2.x 版本2是版本1的100%API完整版本...
React可折叠组件 安装 npm install --save @mtburdon/react-collapsible 用法 import React , { Component } from 'react' import { Collapsible , CollapsibleHead , CollapsibleBody } from '@mtburdon/react-...
本机UI Tableview可折叠 这是具有可折叠功能的本机UITableView。 在此项目上,我们隐藏部分,并使用第一行作为标题。 如何使用: 将常见问题解答单元文件夹导入到您的项目。 注册单元格和tableview委托。 如本...
Bootstrap 3 教程 94 - 可折叠组 以下视频教程的代码
项必须使用.collapsible-item类标记,并且必须具有两个子项: .item-header和.item-content 。 plastik-collapsible的样式最少,因此必须对其应用样式。 元素只会在项目,样式背景和元素的布局之间及其周围提供...