> 웹 프론트엔드 > 레이이 튜토리얼 > Layui-tree를 사용하여 왼쪽 메뉴를 아름답게 만드는 방법

Layui-tree를 사용하여 왼쪽 메뉴를 아름답게 만드는 방법

풀어 주다: 2019-11-28 13:56:29
앞으로
5537명이 탐색했습니다.

Layui-tree를 사용하여 왼쪽 메뉴를 아름답게 만드는 방법

layui-tree 왼쪽 메뉴 예쁘게 꾸미기

Layui-tree를 사용하여 왼쪽 메뉴를 아름답게 만드는 방법

html

1

2

3

4

5

<div>

        <div>

            <div></div>

        </div>

</div>

로그인 후 복사
# 🎜🎜#css

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

/*左侧导航*/

.layui-tree-skin-sidebar li i{

    color: rgba(255,255,255,.7);

    display: none;

}

.layui-tree-skin-sidebar li a cite{

    color: rgba(255,255,255,.7)

}

.layui-tree-skin-sidebar li .layui-tree-spread{

    display: block;

    position: absolute;

    right: 30px;

}

.layui-tree-skin-sidebar li{

    line-height: 45px;

    position: relative;

}

.layui-tree-skin-sidebar li ul{

    margin-left: 0;

    background: rgba(0,0,0,.3);

}

.layui-tree-skin-sidebar li ul a{

    padding-left: 20px;

}

.layui-tree-skin-sidebar li a{

    height: 45px;

    border-left: 5px solid transparent;

    box-sizing: border-box;

    width: 100%;

}

.layui-tree-skin-sidebar li a:hover{

    background: #4E5465;

    color: #fff;

    border-left: 5px solid #009688;

}

.layui-tree-skin-sidebar li a.active{

    background: #009688;

}

로그인 후 복사
js

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

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!--layui.js文件必须放到HTML内容的最后-->

<script></script>

layui.use(['element','layer','jquery','tree'], function(){

    var element = layui.element;

    var layer = layui.layer;

    var $ = layui.jquery;

    var menuData =  [ //节点

            {

                name: '常用文件夹'

                ,id: '1'

                ,children: [

                {

                    name: '所有未读'

                    ,id: '11'

                    ,url: 'http://www.layui.com/'

                }, {

                    name: '置顶邮件'

                    ,id: '12'

                }, {

                    name: '标签邮件'

                    ,id: '13'

                }

            ]

            }, {

                name: '我的邮箱'

                ,id: '2'

                ,children: [

                    {

                        name: 'QQ邮箱'

                        ,id: '21'

                        ,spread: true

                        ,children: [

                        {

                            name: '收件箱'

                            ,id: '211'

                            ,children: [

                            {

                                name: '所有未读'

                                ,id: '2111'

                            }, {

                                name: '置顶邮件'

                                ,id: '2112'

                            }, {

                                name: '标签邮件'

                                ,id: '2113'

                            }

                        ]

                        }, {

                            name: '已发出的邮件'

                            ,id: '212'

                        }, {

                            name: '垃圾邮件'

                            ,id: '213'

                        }

                    ]

                    }, {

                        name: '阿里云邮'

                        ,id: '22'

                        ,children: [

                            {

                                name: '收件箱'

                                ,id: '221'

                            }, {

                                name: '已发出的邮件'

                                ,id: '222'

                            }, {

                                name: '垃圾邮件'

                                ,id: '223'

                            }

                        ]

                    }

                ]

            }

        ]

    layui.tree({

        elem: '#sidemenubar' //传入元素选择器

        ,skin: 'sidebar'  //自定义tree样式的类名

        ,nodes:menuData  //节点数据

        ,click: function(node,item){

            //node即为当前点击的节点数据,item就是被点击的a标签对象了

            //导航按钮选中当前

            $('#sidemenubar a').removeClass('active');

            $(item).addClass('active');

            $(item).siblings('.layui-tree-spread').click();

            //添加新tab

            activeTab.init(node.name,node.url,node.id);

        }

    });

    var activeTab = {

        tabTit : ''//tab titile标题

        tabUrl : ''//tab内容嵌套iframe的src

        tabId  : ''//tab 标签的lay-id

        tabCon : function(){

            var result;

            $.ajax({

                type: 'get',

                url: this.tabUrl,

                dataType: 'html',

                success: function(data){

                    result = data;

                }

            })

            return result;

        },

        addTab : function(){ //新增tab项

            element.tabAdd('demo', {

                title: this.tabTit

                ,content: '<iframe></iframe>' //支持传入html

                ,id: this.tabId

            })

        },

        changeTab: function(){ //选中tab项

            element.tabChange('demo', this.tabId);

        },

        ishasTab : function(){ //判断tab项中是否包含

            var _this = this;

            var dataId,isflag;

            var arrays = $('.layui-tab-title li');

            $.each(arrays,function(idx,ele){

                dataId = $(ele).attr('lay-id');

                if(dataId === _this.tabId){

                    isflag = true

                    return false

                }else{

                    isflag = false

                }

            })

            return isflag

        },

        init : function(tabtit,taburl,tabid){

            var _this = this;

            _this.tabUrl = taburl;

            _this.tabId = tabid;

            _this.tabTit = tabtit;

            if(taburl){

                if(!_this.ishasTab()){

                    _this.addTab();

                }

                _this.changeTab();

            }else{

                return false

            }

        }

    }

});

로그인 후 복사
새 탭 항목 논리적 아이디어

왼쪽 탐색을 클릭하면 데이터(url, id . .. 문제

layui-tree 노드를 클릭하면 현재 노드의 HTML 객체가 아닌 현재 노드 데이터만 반환됩니다

Solution

#🎜🎜 #트리.js 소스 코드 변경

1

2

3

4

5

6

e.children("a").on("click",

                    function(e) {

                        layui.stope(e),

                            i.click(o,this)

                    })

i.click(o)改为 i.click(o,this)

로그인 후 복사
사용

더 많은 레이유 지식을 알고 싶다면 주목해주세요 Layui-tree를 사용하여 왼쪽 메뉴를 아름답게 만드는 방법layui 사용법 튜토리얼

컬럼.

위 내용은 Layui-tree를 사용하여 왼쪽 메뉴를 아름답게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿