首页
所有分类
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操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
简单分析javascript中的函数
Sep 10 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
前端开发之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) pandas(7) 读取(1) 数据保存(1) 数组(5) 音频(1) bs4(1) 矩阵(1) mp3Play(1) agg(1)
You might like
php学习之 数组声明
2011/06/09 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue路由插件之vue-route
2019/06/13 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
使用python实现生成用户信息
2017/03/20 Python
Python中字符串与编码示例代码
2019/05/20 Python
python os.fork() 循环输出方法
2019/08/08 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python实现Pyecharts实现动态地图（Map、Geo）
2020/03/25 Python
python 利用百度API识别图片文字（多线程版）
2020/12/14 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
法国隐形眼镜网站：VisionDirect.fr
2020/03/03 全球购物
几个SQL的面试题
2014/03/08 面试题
国际贸易专业个人鉴定
2014/02/22 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
个人租房协议书
2014/11/28 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL