jquerymobile-10 可折叠内容(Collapsible content)

最新推荐文章于 2019-11-17 21:24:48 发布
最新推荐文章于 2019-11-17 21:24:48 发布
阅读量1.2k 收藏
点赞数
分类专栏： 手持html5phone Gap JQuery moblie 文章标签： html5 jquery mobile 移动浏览器 html5技术 android

可能我们在开发中遇到过这样的问题，我们只是看到一个题目或者简单的介绍，然后一点击会在下面展开对应的详细的内容。在jqm中实现这个效果很简单。下面给出一段例子代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Collapsible Content - 2</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10. <body>  
  11. <div data-role="page" id="first">  
  12.     <div data-role="header">  
  13.         <h1>Collapsible Test</h1>  
  14.     </div>  
  15.     <div data-role="content">  
  16.         <div data-role="collapsible">  
  17.             <h3>First</h3>  
  18.             <p>  
  19.                 Hello World...  
  20.             </p>  
  21.         </div>  
  22.         <div data-role="collapsible">  
  23.             <h3>First</h3>  
  24.             <p>  
  25.                 Hello World...  
  26.             </p>  
  27.         </div>  
  28.         <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">  
  29.             <h3>First</h3>  
  30.             <p>  
  31.                 Hello World...  
  32.             </p>  
  33.         </div>  
  34.         <div data-role="collapsible" data-content-theme="c" data-iconpos="right">  
  35.             <h3>First</h3>  
  36.             <p>  
  37.                 Hello World again...  
  38.             </p>  
  39.         </div>  
  40.     </div>  
  41. </div>  
  42. </body>  
  43. </html>  

页面显示如下：第一个未点开，第二、三、四个都点击开了。



第三个使用了data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"修改icon。

第四个使用data-content-theme="c"修改显示的主题，使其内容被带有边框的内容包围。 data-iconpos="right"使icon显示在右边。


我们可以将所有带有data-role="collapsible"属性的div，包围在一个<div data-role="collapsible-set">中，使其组成一个整体，但是这样点击其中一个的时候，其他的会自动关闭。这样的显示效果如下：

魔都
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquerymobile-20 可折叠内容(Collapsible content)
孟祥月的专栏
02-20 6799
可能我们在开发中遇到过这样的问题，我们只是看到一个题目或者简单的介绍，然后一点击会在下面展开对应的详细的内容。在jqm中实现这个效果很简单。下面给出一段例子代码： Collapsible Content - 2 Collapsible Test First Hello World...
jquery mobile实现可折叠的导航按钮
10-20
在jQuery Mobile中，`data-role="collapsible"`属性用于创建一个可折叠的区域，用户可以点击标题来展开或收起内容。这在展示大量信息时特别有用，因为它允许用户按需查看详细内容，保持页面整洁。 下面是一个基本的...
jQuery Mobile基础05----jQuery Moblie Widgets-collapsible（可折叠的
翟浩浩Android专栏
10-09 792
html> html> head lang="en"> meta charset="UTF-8"> title>title> meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport
EXT属性，collapsible：true 可以使Grid折叠
spt_dream的博客
02-07 2374
EXT折叠属性，grid实现折叠效果
collapsible: true GridPanel的滚动条不出现了!
yinyun594230的博客
09-22 183
我在一个页面中定义了一个viewport ,一个Panel,二个gridPanel, Panel在viewport中,gridPanel1和gridPanel2在Panel中 viewPort，layout:'border', Panel，layout:'anchor', 如下([size=medium]以下代码可以直接运行查看效果[/size]): [code="java"] ...
EasyUI的使用
乔木晨子的博客
11-17 231
1.需要的js文件和引入js文件的写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导入easyui相关文件</title> <!-- 导入easyui的样式 --> <link rel="stylesheet" type="...
JqueryMobile data-属性
05-19
- `data-content-theme`: 决定可折叠内容区域的主题颜色，同时也影响圆角。 - `data-expanded-icon`: 当内容展开时，可折叠按钮显示的图标。 - `data-iconpos`: 图标位置。 - `data-inset`: 是否应用内嵌样式，...
jQuery Mobile 所需要的部署文件
03-01
学习jQuery Mobile，你将了解到如何创建可滚动的列表（listviews），可滑动的面板（panels），可滑动的选项卡（tabs），可折叠的块（collapsible sets），以及各种表单组件的优化。它还支持动态页面加载，这意味着你...
jQuery Mobile快速入门245页完整版（附源码）
11-07
文档还会详细阐述jQuery Mobile的UI组件，如工具栏（header, footer）、表单（forms）、按钮（buttons）、列表视图（listviews）、网格（grids）和可折叠内容块（collapsible content blocks）。这些组件都是构建...
顶部点击展开层再次点击折叠(jquery)
12-10
顶部点击展开层再次点击折叠(jquery)
EXT中panel表头折叠方向
weixin_30608131的博客
12-14 298
panel中表头折叠属性为：collapsible:true,视为有折叠按钮，false为没有。panel默认为向上， 而用来改变折叠方向的是：collapseDirection:'left',设置为向左折叠。 这里需要要注意是宽度，若是百分比，设置不好，折叠后将不会再还原成原来宽度，固定的宽度是可以的。 转载于:https://www.cnblogs.com/Cuimc/p/10119860...
jQuery Mobile 可折叠
aihou3725的博客
12-01 171
可折叠的内容块 可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。 如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记： 实例: <div data-role="collapsible"> ...
jQueryMobile的组件——可展开项（collapsible）
bboyjoe的博客
08-27 3925
data-role="collapsible"——指明div为可展开项组件； data-collapsed="false"——初始化组件为展开状态； data-content-theme="false"——指明展开项内容为去掉边框的样式； collapsible实例 欢迎来到主页
jquerymobile之collapsible可折叠块标题内容动态显示
上善若水任方圆
04-11 435
jquery mobile提供了一种可折叠的组件--data-role="collapsible"，这种组件可以通过点击折叠块头部来展开/折叠块内的内容，详细组件说明可参考w3cshool可折叠块。   在做一个小项目的时候，我有一个模块用到了可折叠块这个组件：初始页面时collapsible的标题是空的，只有用户在collapsible下面的文本框输入内容后，标题会跟文本框内容同步。  ...
Dynamic collapsible动态加载collapsible
laywl的专栏
05-22 732
$(document).on("pageinit", function() { var nextId = 1; $("#add").click(function() { nextId++; var content = "Section " + nextId + "I am the collapsible content in a set so thi
Jquery mobile各种折叠块及图表的例子
不负此生
12-09 804
Document     可折叠块               首页         页面二         搜索           点击即可折叠 折叠的内容 折叠层2 折叠内容 折叠2 点击后即可隐藏 one one content two two content
jQuery Mobile 快速入门指南：快速构建移动应用
下面是 jQuery Mobile 的教程，涵盖了 jQuery Mobile 的概述、快速上手、开始使用、构建自己的 jQuery Mobile 页面等内容。 jQuery Mobile 概述 ----------------- jQuery Mobile 是一个基于 jQuery 框架的移动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值