首页 > web前端 > Bootstrap教程 > bootstrap有树状菜单吗

bootstrap有树状菜单吗

(*-*)浩
发布: 2019-07-18 11:42:18
原创
3307 人浏览过

bootstrap-treeview.js是一款强大的树菜单插件,本文演示bootstrap-treeview.js的调用方法。

bootstrap有树状菜单吗

它可一次性加载数据,也可异步加载。支持Checkbox,selectable,节点级联等,而且还能承载大数据。

使用方法(推荐学习:Bootstrap视频教程

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

51

52

53

54

55

56

57

58

59

60

61

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>treeview+bootstrap多级下拉树插件</title>

        <link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <style type="text/css">

            .shouce-header{margin-bottom: 15px;font-family: "Segoe UI""Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans""wenquanyi micro hei""Hiragino Sans GB""Hiragino Sans GB W3""FontAwesome", sans-serif;}

            .shouce-icon{color: #fff;}

        </style>

        <!--[if IE]>

                <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

        <![endif]-->

    </head>

<body>

<div id="treeview1"></div>

<script>

var defaultData = [ 

    

        text: 'Parent 1'

        href: '#parent1'

        tags: ['4'], 

        nodes: [ 

            

                text: 'Child 1'

                href: '#child1'

                tags: ['2'], 

                nodes: [ 

                    

                        text: 'Grandchild 1'

                        href: '#grandchild1'

                        tags: ['0'

                    }, 

                    

                        text: 'Grandchild 2'

                        href: '#grandchild2'

                        tags: ['0'

                    

                

            }, 

            

                text: 'Child 2'

                href: '#child2'

                tags: ['0'

            

        

    }, 

    

        text: 'Parent 2'

        href: '#parent2'

        tags: ['0'

    }, 

];

$('#treeview1').treeview({ 

    data: defaultData 

});  

</script>

</body>

</html>

登录后复制

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

以上是bootstrap有树状菜单吗的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
没有bootstrap自定义的视频教程
来自于 1970-01-01 08:00:00
0
0
0
引入bootstrap无效
来自于 1970-01-01 08:00:00
0
0
0
angular.js - angular对于ui-bootstrap的使用
来自于 1970-01-01 08:00:00
0
0
0
html5 - bootstrap修改样式的问题
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板