首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 11, 2017

本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码，供大家参考，具体内容如下

功能：

当功能较多时，创建可折叠分组导航按钮。只需指定 data-role=" collapsible "创建可折叠面板

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>可折叠的导航面板</title> 
 <!--使用名为viewport的meta值，其content指定自适应设备的宽度--> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
 
 </head>   
<body> 
<div data-role="page" id="pageone"> 
 <div data-role="header"> 
 <h1>图书查阅系统</h1> 
 </div> 
 <!--创建一个可折叠的导航面板--> 
 <div data-role="content"> 
 <div data-role="collapsible" data-theme="e"> 
 <h4>文学历史</h4> 
 <ul data-role="listview"> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >明代</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >宋代</a></li> 
 </ul> 
 </div> 
 <!--显示人文社科的可折叠面板--> 
 <div data-role="collapsible" data-theme="b" data-collapsed="false"> 
 <h4>人文社科</h4> 
 <ul data-role="listview"> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >财务</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >心理</a></li> 
 </ul> 
 </div> 
 <!--显示计算机应用的可折叠面板--> 
 <div data-role="collapsible" data-theme="e"> 
 <h4>计算机应用</h4> 
 <ul data-role="listview"> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >软件开发</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据库</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >移动开发</a></li> 
 </ul> 
 </div> 
 </div> 
 <div data-role="footer" data-position="fixed"> 
 <h1>请单击“+”按钮进行展开</h1> 
 </div> 
</div> 
</body> 
</html>
 

代码分析：

        通过data-role=" collapsible "创建可折叠的div，再在其中通过 data-role=" listview "创建列表框
        data-theme : 指定预定义样式  （也可以使用样式构建器创建自定义样式）
        data-collapsed="false" : 表示默认不折叠

效果图：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

qq_32468225

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
理解javascript对象继承
Apr 17 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
ionic2自定义cordova插件开发以及使用（Android）
Jun 19 Javascript
vue内置指令详解
Apr 03 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
js实现点击生成随机div
Jan 16 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
前端开发之CSS原理详解
Mar 11 #Javascript
JS实现简易刻度时钟示例代码
Mar 11 #Javascript
js鼠标跟随运动效果
Mar 11 #Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 #Javascript
基于Node.js的WebSocket通信实现
Mar 11 #Javascript
js原生Ajax的封装和原理详解
Mar 11 #Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 #Javascript
MVCC(4) 复读(1) 幻读(5) 间隙锁(2) ctypes(1) C/C++(1) DBLink(1) 事务并发(1) innoDB(3) 经纬度(1)
You might like
PHP中如何定义和使用常量
2013/02/28 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP反射实际应用示例
2019/04/03 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
js this函数调用无需再次抓获id，name或标签名
2014/03/03 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
seajs下require书写约定实例分析
2018/05/16 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue+mock.js实现前后端分离
2019/07/24 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
澳大利亚头发和美容产品购物网站：OZ Hair & Beauty
2020/03/27 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
军训自我鉴定200字
2014/02/13 职场文书
写给老婆的检讨书
2014/02/21 职场文书
企业新年寄语
2014/04/04 职场文书
车辆转让协议书
2014/04/15 职场文书
党员批评与自我批评
2014/10/15 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
MySQL的join buffer原理
2021/04/29 MySQL