编程 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 完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造而来

Nov 21 Javascript

jQuery div层的放大与缩小简单实现代码

Mar 28 Javascript

jquery选择器之内容过滤选择器详解

Jan 27 Javascript

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

Jun 07 Javascript

JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

Mar 30 Javascript

jQuery实现QQ空间汉字转拼音功能示例

Jul 10 jQuery

详解vue-cli之webpack3构建全面提速优化

Dec 25 Javascript

vue 微信授权登录解决方案

Apr 10 Javascript

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

Sep 04 Javascript

JavaScript数据结构与算法之二叉树添加/删除节点操作示例

Mar 01 Javascript

Ant Design Vue 添加区分中英文的长度校验功能

Jan 21 Javascript

JavaScript实现简单计算器

Mar 19 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

You might like

php include的妙用,实现路径加密

2008/07/29 PHP

全面了解PHP中的全局变量

2016/06/17 PHP

PHP实现文件上传下载实例

2016/10/18 PHP

CodeIgniter框架常见用法工作总结

2017/03/16 PHP

让getElementsByName适应IE和firefox的方法

2007/09/24 Javascript

PPK 谈 JavaScript 的 this 关键字 [翻译]

2009/09/29 Javascript

js字符串的各种格式的转换 ToString，Format

2011/08/08 Javascript

json的前台操作和后台操作实现代码

2012/01/20 Javascript

JS控件ASP.NET的treeview控件全选或者取消(示例代码)

2013/12/16 Javascript

avascript中的自执行匿名函数应用示例

2014/09/15 Javascript

js动态切换图片的方法

2015/01/20 Javascript

bootstrap modal弹出框的垂直居中

2016/12/14 Javascript

jQuery实现动态生成表格并为行绑定单击变色动作的方法

2017/04/17 jQuery

JavaScript 自定义事件之我见

2017/09/25 Javascript

基于angular-utils-ui-breadcrumbs使用心得(分享)

2017/11/03 Javascript

JS实现的tab页切换效果完整示例

2018/12/18 Javascript

聊聊鉴权那些事(推荐)

2019/08/22 Javascript

详解微信小程序开发之formId使用（模板消息）

2019/08/27 Javascript

Layui 数据表格批量删除和多条件搜索的实例

2019/09/04 Javascript

JavaScript 实现下雪特效的示例代码

2020/09/09 Javascript

如何手写一个简易的 Vuex

2020/10/10 Javascript

vue-amap根据地址回显地图并mark的操作

2020/11/03 Javascript

Python中实现参数类型检查的简单方法

2015/04/21 Python

python自动翻译实现方法

2016/05/28 Python

Python WXPY实现微信监控报警功能的代码

2017/10/20 Python

简单实现python聊天程序

2018/04/01 Python

深入浅析Python中list的复制及深拷贝与浅拷贝

2018/09/03 Python

pandas如何处理缺失值

2019/07/31 Python

详解pycharm连接不上mysql数据库的解决办法

2020/01/10 Python

欧洲最大的笔和书写专家：The Pen Shop

2017/03/19 全球购物

碧欧泉Biotherm加拿大官方网站：法国高端护肤品牌

2019/10/18 全球购物

原材料检验岗位职责

2014/03/15 职场文书

感恩寄语大全

2014/04/11 职场文书

离婚协议书范文2014（夫妻感情破裂）

2014/12/14 职场文书

公司会议开幕词

2015/01/29 职场文书

唐山大地震的观后感

2015/06/05 职场文书