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实现可折叠的导航按钮

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解webpack+es6+angular1.x项目构建
May 02 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
JS实现拼图游戏
Jan 29 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
微信小程序反编译的实现
Dec 10 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php结合curl实现多线程抓取
2015/07/09 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python字符串与url编码的转换实例
2018/05/10 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python获取地震信息 微信实时推送
2019/06/18 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
最新教师自我评价分享
2013/11/12 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
工伤私了协议书范本
2014/11/24 职场文书
个人党性分析材料
2014/12/19 职场文书
新闻稿标题
2015/07/18 职场文书
工作报告范文
2019/06/20 职场文书