首页 > web前端 > js教程 > jquery mobile折叠的导航按钮实现教程

jquery mobile折叠的导航按钮实现教程

小云云
发布: 2018-01-22 16:38:06
原创
1689 人浏览过

本文主要为大家详细介绍了jquery mobile实现可折叠的导航按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码,供大家参考,具体内容如下

功能:

当功能较多时,创建可折叠分组导航按钮。只需指定 data-role=" collapsible "创建可折叠面板


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!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>

<p data-role="page" id="pageone">

 <p data-role="header">

 <h1>图书查阅系统</h1>

 </p>

 <!--创建一个可折叠的导航面板-->

 <p data-role="content">

 <p 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>

 </p>

 <!--显示人文社科的可折叠面板-->

 <p 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>

 </p>

 <!--显示计算机应用的可折叠面板-->

 <p 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>

 </p>

 </p>

 <p data-role="footer" data-position="fixed">

 <h1>请单击“+”按钮进行展开</h1>

 </p>

</p>

</body>

</html>

登录后复制

 

代码分析:

        通过data-role=" collapsible "创建可折叠的p,再在其中通过 data-role=" listview "创建列表框
        data-theme : 指定预定义样式  (也可以使用样式构建器创建自定义样式)
        data-collapsed="false" : 表示默认不折叠

效果图:

相关推荐:

js实现的折叠导航示例_javascript技巧

基于jQuery实现以手风琴方式展开和折叠导航菜单_jquery

jQuery实现定位导航位置详解


以上是jquery mobile折叠的导航按钮实现教程的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板