左侧导航栏推拉效果

liuyg

2021-06-04 c37e7bbec4d1361b7e78e021114087ccea54b0eb

左侧导航栏推拉效果

 widgets/LeftNavigationBar/Widget.js

@@ -30,13 +30,13 @@
            startup: function () {
                // 暴露在外的接口
                this.begin(this.data);
                $('#left-navigation-bar-main-search').click(()=>{
                $('#left-navigation-bar-main-search').click(() => {
                    var val = $('#left-navigation-bar-main-input').val();
                    if(val){
                    if (val) {
                        console.log(val);

                    }else{
						
                    } else {

                    }
                })
            },
@@ -68,49 +68,321 @@
                $('.left-navigation-bar-but').click(() => {
                    that.changeImg = !that.changeImg;
                    if (that.changeImg) {
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");//打开
                        console.log($('.jimu-widget-LeftNavigationBar'))
                        $('.jimu-widget-LeftNavigationBar').css({'left': '0px'});
                    } else {
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xyou.png");
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xyou.png");//关闭
                        $('.jimu-widget-LeftNavigationBar').css({'left': '-250px'});
                    }
                })

                layui.use(function () {
                    var tree = layui.tree
                        , layer = layui.layer
                        , util = layui.util;
                        , layer = layui.layer;
                    tree.render({
                        elem: '#test1' //默认是点击节点可进行收缩
                        , data: data
                        , id: 'demoId1'
                        , showCheckbox: true  //是否显示复选框
                        , click: function (obj) {
                            var data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                            // layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                            // console.log(obj);
                            var ot = $('.layui-tree-iconArrow');
                            ot.removeClass("left-navigation-bar-main-down");
                            var jt = $(`[data-id='${data.id}']`).find('.layui-tree-iconArrow').eq(0);
                            jt.addClass('left-navigation-bar-main-down');

                        }
                        , showLine: false  //是否开启连接线
                        , oncheck: function (obj) {
                            console.log(obj.data.id, '--', obj.checked); //得到当前点击的节点数据
                            // console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                            // console.log(obj.elem); //得到当前节点元素
                        }
                    });

                    // util.event('lay-demo', {
                    //     getChecked: function (othis) {
                    //         var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                    //         layer.alert(JSON.stringify(checkedData), { shade: 0 });
                    //         console.log(checkedData);
                    //     }
                    //     , setChecked: function () {
                    //         tree.setChecked('demoId1', [12, 16]); //勾选指定节点
                    //     }
                    //     , reload: function () {
                    //         //重载实例
                    //         tree.reload('demoId1', {

                    //         });

                    //     }
                    // });
                })

            },
            changeImg: true,
            // concheckData: [
            //     {
            //         id: 1,
            //         choseIt: true,
            //         child: [
            //             {
            //                 id: 11,
            //                 choseIt: true,
            //                 child: [
            //                     {
            //                         id: 111,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 112,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 113,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 114,
            //                         choseIt: true,
            //                     },
            //                 ]
            //             },{
            //                 id: 12,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 121,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 122,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 123,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 124,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 13,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 131,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 132,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 133,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 134,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 14,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 141,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 142,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 143,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 144,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },

            //         ]
            //     },{
            //         id: 2,
            //         choseIt: true,
            //         child: [
            //             {
            //                 id: 21,
            //                 choseIt: true,
            //                 child: [
            //                     {
            //                         id: 211,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 212,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 213,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 214,
            //                         choseIt: true,
            //                     },
            //                 ]
            //             },{
            //                 id: 22,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 221,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 222,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 223,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 224,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 23,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 231,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 232,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 233,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 234,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 24,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 241,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 242,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 243,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 244,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },

            //         ]
            //     },
            //     {
            //         id: 3,
            //         choseIt: true,
            //         child: [
            //             {
            //                 id: 31,
            //                 choseIt: true,
            //                 child: [
            //                     {
            //                         id: 311,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 312,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 313,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 314,
            //                         choseIt: true,
            //                     },
            //                 ]
            //             },{
            //                 id: 32,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 321,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 322,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 323,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 324,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 33,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 331,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 332,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 333,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 334,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 34,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 341,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 342,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 343,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 344,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },

            //         ]
            //     },
            // ],
            data: [{
                title: '采集站点'
                , id: 1

 widgets/LeftNavigationBar/css/style.css

@@ -6,7 +6,8 @@
  width: 250px !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  /* left: -250px !important; */
  left: 0;
  top: 0 !important;
  /* 240px */
  background: rgba(255, 255, 255, 1);
@@ -22,6 +23,7 @@
  align-items: center;
  justify-content: center; */
  box-shadow: 5px 5px 13px -10px rgba(0, 0, 0, .5);
  transition: all 0.5s;
}

.jimu-widget-LeftNavigationBar .left-navigation-bar-but {
@@ -104,9 +106,44 @@
  color: #000;
  font-size: 14px;
}
.jimu-widget-LeftNavigationBar .left-navigation-bar-main .layui-tree-entry{

.jimu-widget-LeftNavigationBar .left-navigation-bar-main #test1 {
  height: calc(100% - 58px);
  overflow: auto;
}

.jimu-widget-LeftNavigationBar .left-navigation-bar-main .layui-tree-entry {
  height: auto !important;
}
.layui-tree-iconArrow:after{

.layui-tree-iconArrow:after {
  /* border-color: #c0c4cc transparent transparent transparent !important; */
  /* border-color: attr(data-attr) !important; */
}

/* #11 .layui-tree-iconArrow:after{
  border-color: #c0c4cc  transparent transparent transparent !important;
} */

/* .downsAfter {
  border-color: #c0c4cc transparent transparent transparent !important;
}
.rightsAfter {
  border-color: #c0c4cc transparent transparent transparent !important;
} */

.left-navigation-bar-main-down:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  z-index: 100;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #c0c4cc;
  /* border-color: #c0c4cc transparent transparent transparent; */
  transform: rotate(90deg);
  transition: .5s;
}