首页
所有分类
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 高亮显示文本中重要的关键字
Dec 24 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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
主从复制(1) Master(1) variables(1) NginxConfig(1) ESXI(1) transaction(1) 表约束(2) SVN(1) caddy(1) Slave(1)
You might like
15种PHP Encoder的比较
2007/03/06 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
js贪吃蛇网页版游戏特效代码分享（挑战十关）
2015/08/24 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
浅析python递归函数和河内塔问题
2017/04/18 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python输入中文的实例方法
2020/09/14 Python
Julep官网：美容产品和指甲油
2017/02/25 全球购物
Speedo速比涛法国官方网站：泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
2019年分享net面试的经历和题目
2016/08/07 面试题
学生手册家长评语
2014/02/10 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
授权收款委托书范本
2014/10/10 职场文书
创业计划书之酒吧
2019/12/02 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript