首页
所有分类
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 相关文章推荐
javascript dom 基本操作小结
Apr 11 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
微信小程序 实例应用（记账）详解
Sep 28 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
记录微信小程序 height: calc(xx - xx)；无效问题
Dec 30 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
前端开发之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
greenlet(1) 自动播放(1) 乱码(3) 分区(2) 静态压缩(1) 驱动模型(1) Excel(4) 正则表达式(3) Coroutine(1) 信息校验(1)
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
一个取得文件扩展名的函数
2006/10/09 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
javascript 广告后加载，加载完页面再加载广告
2010/11/25 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
Python简明入门教程
2015/08/04 Python
Apache如何部署django项目
2017/05/21 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
python实现简单的学生管理系统
2021/02/22 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
英国家居用品和床上用品零售商：P&B Home
2020/01/16 全球购物
印度第一网上礼品店：IGP.com
2020/02/06 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
无故旷工检讨书
2014/01/26 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
实习班主任自我评价
2015/03/11 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
党组织结对共建协议书
2016/03/23 职场文书
python文件目录操作之os模块
2021/05/08 Python
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis