jQueryMobile的(十) 可折叠内容块

最新推荐文章于 2020-05-23 10:43:28 发布

游可

最新推荐文章于 2020-05-23 10:43:28 发布

阅读量2.5k

点赞数

分类专栏： jQuery Mobile 文章标签： jQuery Mobile

本文链接：https://blog.csdn.net/bao990423420/article/details/14003267

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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

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

展开折叠 data-collapsed="false"

<!DOCTYPE html>
<html>
<head>
   <title>导航栏</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, 
          initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>

<body>
  
  <div data-role="page">

    <div data-role="header"><h1>头部标题栏</h1></div>

     <div data-role="content">
    <div data-role="collapsible" data-collapsed="false">
    <h3>点击查看更多</h3>
    <p>默认情况下，可折叠容器是收缩的，可以通过通过点击头部展开。给容器添加 data-collapsed="false" 属性，可实现当加载页面的时候，折叠内容区域为展开样式。</p>
    </div>
  

     </div>


</body>
</html>

取消圆角 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="right"来自定义：

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

游可

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryMobile的(十) 可折叠内容块

要创建内容折叠块。首先，创建一个容器，并添加 data-role="collapsible" 属性。并且给此容器使用 data-content-theme 属性，为可折叠的内容块，进行主题样式设计。其次，在容器中，添加任何头部区域的标题（h1-h6）或图例元素(egend element)。JQuery Mobile框架将样式化头部，使其看起来像一个可点击的按钮，并添加一个“+”图标左边表
复制链接

扫一扫