首页
所有分类
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 相关文章推荐
js读写(删除)Cookie实例详解
Apr 17 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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
KVM(1) Yolov5(1) click(1) Storage(1) 自定义组件(1) TimePickerView(1) Vue(10) 本地化存储(1) Jmerte(1) vue-router-link(1)
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Merrell美国官网：美国登山运动鞋品牌
2018/02/07 全球购物
德国咖啡批发商：Coffeefair
2019/08/26 全球购物
小小商店教学反思
2014/04/27 职场文书
十周年庆典策划方案
2014/06/03 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
MySQL8.0的WITH查询详情
2021/08/30 MySQL
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android