编程 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上传前预览图片实例

Mar 25 Javascript

解决IE6的PNG透明JS插件使用介绍

Apr 17 Javascript

js实现网页倒计时、网站已运行时间功能的代码3例

Apr 14 Javascript

node.js中的querystring.unescape方法使用说明

Dec 10 Javascript

利用jQuery实现WordPress中@的ID悬浮显示评论内容

Dec 11 Javascript

JS基于构造函数实现的菜单滑动显隐效果【测试可用】

Jun 21 Javascript

使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

Jan 04 Javascript

图文详解Javascript中的上下文和作用域

Feb 15 Javascript

jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】

Mar 09 Javascript

判断js数据类型的函数实例详解

May 23 Javascript

简谈创建React Component的几种方式

Jun 15 Javascript

ionic2.0双击返回键退出应用

Sep 17 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 从数据库提取二进制图片的处理代码

2009/09/09 PHP

ThinkPHP实现简单登陆功能

2017/04/28 PHP

在次封装easyui-Dialog插件实现代码

2010/11/14 Javascript

jquery中ajax学习笔记一

2011/10/16 Javascript

js如何调用qq互联api实现第三方登录

2014/03/28 Javascript

jQuery超酷平面式时钟效果代码分享

2020/03/30 Javascript

Bootstrap Navbar Component实现响应式导航

2016/10/08 Javascript

微信小程序解决swiper不显示图片的方法

2017/01/04 Javascript

vue router学习之动态路由和嵌套路由详解

2017/09/21 Javascript

从parcel.js打包出错到选择nvm的全部过程

2018/01/23 Javascript

JavaScript偏函数与柯里化实例详解

2019/03/27 Javascript

详解vue 2.6 中 slot 的新用法

2019/07/09 Javascript

jquery.pager.js分页实现详解

2019/07/29 jQuery

JSONP解决JS跨域问题的实现

2020/05/25 Javascript

vue 组件间的通信之子组件向父组件传值的方式

2020/07/29 Javascript

Python去除字符串两端空格的方法

2015/05/21 Python

python dataframe astype 字段类型转换方法

2018/04/11 Python

Python enumerate函数功能与用法示例

2019/03/01 Python

Python中return函数返回值实例用法

2020/11/19 Python

python 基于Apscheduler实现定时任务

2020/12/15 Python

Python截图并保存的具体实例

2021/01/14 Python

HTML5单页面手势滑屏切换原理

2016/03/21 HTML / CSS

澳大利亚正品化妆品之家：Cosmetic Capital

2017/07/03 全球购物

C++如何引用一个已经定义过的全局变量

2014/08/25 面试题

施惠特软件测试面试题以及笔试题

2015/05/13 面试题

幼儿园校车司机的岗位职责

2014/01/30 职场文书

网络研修随笔感言

2014/02/17 职场文书

党的群众路线教育实践活动心得体会

2014/03/03 职场文书

内蒙古鄂尔多斯市市长寄语

2014/04/10 职场文书

数控机床专业自荐信

2014/05/19 职场文书

2015年酒店工作总结

2015/04/28 职场文书

个人借条范本

2015/05/25 职场文书

小鞋子观后感

2015/06/05 职场文书

追悼词范文大全

2015/06/23 职场文书

Javascript之datagrid查询详解

2021/09/15 Javascript

Spring Security中用JWT退出登录时遇到的坑

2021/10/16 Java/Android