左侧导航栏框架布局

liuyg

2021-06-03 922be9a7b72d9689cc33d59078b938db7968bc22

左侧导航栏框架布局

 config.json

@@ -164,6 +164,9 @@
      }, {
        "name": "左侧信息指示器",
        "uri": "widgets/instructions/Widget"
      }, {
        "name": "左侧导航栏",
        "uri": "widgets/LeftNavigationBar/Widget"
      }
    ],
    "groups": [],

 images/addL/xyou.png

 images/addL/xzuo.png

 widgets/LeftNavigationBar/Widget.html

New file
@@ -0,0 +1,8 @@
<div>
    <div class="left-navigation-bar-but">
        <img src="../../images/addL/xzuo.png" alt="">
    </div>
    <div class="left-navigation-bar-main">

    </div>
</div>

 widgets/LeftNavigationBar/Widget.js

New file
@@ -0,0 +1,73 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2019 zhongsong. All Rights Reserved.
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'jimu/BaseWidget',
    'jimu/utils',
    'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
    'libs/zTree_v3/js/jquery.ztree.all'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget,
        aspect,
        string,
        utils
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-LeftNavigationBar',
            name: 'LeftNavigationBar',
            layers: {},
            startup: function () {
                // 暴露在外的接口
                this.begin();
            },

            closeToolBox: function (item) {
            },

            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },
            begin: function () {
                var that = this;
                $('.left-navigation-bar-but').click(() => {
                    that.changeImg = !that.changeImg;
                    console.log(that.changeImg)
                })
            },
            changeImg: true,
            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/LeftNavigationBar/css/style.css

New file
@@ -0,0 +1,41 @@
.jimu-widget-LeftNavigationBar {
  position: absolute !important;
  /* font-size: 14px; */
  height: calc(100% - 25px) !important;
  width: 220px !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  top: 0 !important;
  /* 240px */
  background: rgba(255, 255, 255, 1);
  color: #fff;
  /* border : 1px solid rgba(0, 0, 0, 0.3); */
  border-radius: 6px 6px 6px 6px;
  /* text-align   : center; */
  /* cursor       : pointer; */
  z-index: 16 !important;
  box-sizing: border-box;
  /* padding: 0 20px 0 20px!important; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.jimu-widget-LeftNavigationBar .left-navigation-bar-but{
  width: 23px;
  height: 60px;
  /* border: 1px solid springgreen; */
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 220px;
  background-color: #fff;
  box-shadow: 2px 2px 15px -5px rgba(0,0,0,.5);
  cursor: pointer;
}
.jimu-widget-LeftNavigationBar .left-navigation-bar-but img{
  width: 20px;
}

 widgets/LeftNavigationBar/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "LeftNavigationBar",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "yuanjy",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/LeftNavigationBar/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "LeftNavigationBar"
  })
);

 widgets/LeftNavigationBar/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "LeftNavigationBar"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/LeftNavigationBar/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "左侧导航栏"
  })
);

 widgets/instructions/css/style.css

@@ -6,8 +6,8 @@
  width: 200px !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(10%) !important;
  top: 20px !important;
  left: 240px!important;
  top: 40px !important;
  /* 240px */
  background: rgba(255, 255, 255, 1);
  color: #fff;