编程 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 相关文章推荐

实现连缀调用的map方法(prototype)

Aug 05 Javascript

jQuery获取当前对象标签名称的方法

Feb 07 Javascript

jquery选择器原理介绍($()使用方法)

Mar 25 Javascript

js实现checkbox全选和反选示例

May 01 Javascript

[原创]jQuery常用的4种加载方式分析

Jul 25 Javascript

jquery判断对象是否为空并遍历对象的简单实例

Jul 26 Javascript

利用JS屏蔽页面中的Enter按键提交表单的方法

Nov 25 Javascript

文件上传插件SWFUpload的使用指南

Nov 29 Javascript

详解vuejs之v-for列表渲染

Jun 22 Javascript

vue2.0 路由不显示router-view的解决方法

Mar 06 Javascript

微信小程序使用wxParse解析html的实现示例

Aug 30 Javascript

jquery.validate自定义验证用法实例分析【成功提示与择要提示】

Jun 06 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

You might like

php面向对象全攻略（八）重载新的方法

2009/09/30 PHP

PHP代码网站如何防范SQL注入漏洞攻击建议分享

2012/03/01 PHP

Yii框架上传图片用法总结

2016/03/28 PHP

php添加数据到xml文件的简单例子

2016/09/08 PHP

javascript 简单高效判断数据类型系列函数 By shawl.qiu

2007/03/06 Javascript

js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)

2010/04/14 Javascript

Javascript算符的优先级介绍

2013/03/20 Javascript

jQuery源码解读之hasClass()方法分析

2015/02/20 Javascript

Javascript闭包实例详解

2015/11/29 Javascript

基于jQuery仿淘宝产品图片放大镜特效

2020/10/19 Javascript

详谈js对url进行编码和解码(三种方式的区别)

2017/08/16 Javascript

vue解决一个方法同时发送多个请求的问题

2018/09/25 Javascript

iview form清除校验状态的实现

2019/09/19 Javascript

在Layui中实现开关按钮的效果实例

2019/09/29 Javascript

vue 实现单选框设置默认选中值

2019/11/07 Javascript

Vue+ElementUI 中级联选择器Bug问题的解决

2020/07/31 Javascript

Python计算一个文件里字数的方法

2015/06/15 Python

使用Python对MySQL数据操作

2017/04/06 Python

Python调用系统底层API播放wav文件的方法

2017/08/11 Python

Python爬虫之pandas基本安装与使用方法示例

2018/08/08 Python

pyqt 多窗口之间的相互调用方法

2019/06/19 Python

python cumsum函数的具体使用

2019/07/29 Python

配置python的编程环境之Anaconda + VSCode的教程

2020/03/29 Python

Python如何重新加载模块

2020/07/29 Python

python连接手机自动搜集蚂蚁森林能量的实现代码

2021/02/24 Python

巴西最好的男鞋：Rafarillo

2018/05/25 全球购物

MAC Cosmetics巴西官方网站：M·A·C彩妆

2019/04/18 全球购物

php优化查询foreach代码实例讲解

2021/03/24 PHP

Ajax实现页面无刷新留言效果

2021/03/24 Javascript

法院实习人员自我鉴定

2013/09/26 职场文书

学校推普周活动总结

2015/05/07 职场文书

2015初一年级组工作总结

2015/07/24 职场文书

幼儿园毕业致辞

2015/07/29 职场文书

职场干货：简历中的自我评价应该这样写！

2019/05/06 职场文书

vue实现同时设置多个倒计时

2021/05/20 Vue.js

Vue OpenLayer 为地图绘制风场效果

2022/04/24 Vue.js