HlsNavigationBar.md 4.07 KB
Newer Older
Jefferyne's avatar
Jefferyne committed
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 146 147 148 149 150 151 152
# HlsNavigationBar

左侧导航栏

说明:前期仅封装了一些常用的属性

### 一般属性:

| 属性 | 类型 |
| :--- | :--- |
| navigationBarTitle | String |
| navigationBar | String |
| navigationBarContent | String |
| treeTitle | String |
| navigationBarId | String |
| navigatonBarClass | String |
| barType | String |
| nodeLevel | String |

### 使用:

说明:目前系统遇到的是普通不分层的导航和分两层的导航,以下针对这两种使用说明

##### 1.hlsNavigationBar

说明:导航栏的标志标签,在这个标签内书写需要生成标签的内容

```html
 <h:hlsNavigationBar>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </hlsNavigationBar>
```

##### 2.barType

说明:bartype有两种类型:tree(分层),normal(不分层)

```html
<h:hlsNavigationBar barType="tree">
    <div></div>
</hlsNavigationBar>
```

##### 3.navigationBar

说明:加上此属性并设为“true”表示该块内容需要导航栏

```html
<h:hlsNavigationBar barType="tree">
    <div navigationBar="true"></div>
</hlsNavigationBar>
```

##### 4.navigationBarTitle

说明:在导航栏中显示标题(如果是分层的导航栏这个就作为子标题显示),如果不写则取标签中title,若都为空则自动根据位置系统命名为"x.第x模块" x是数字

```html
<h:hlsNavigationBar barType="tree">
    <div navigationBar="true" navigationBarTitle="标题1"></div>
</hlsNavigationBar>
```

##### 5.treeTitle

说明:作为分层导航栏的父标题,如果不写则取标签中的title,若都为空则系统自动命名为"x.第x模块" x是数字

```html
<h:hlsNavigationBar barType="tree">
    <div nodeLevl="parent" navigationBar="true" treeTitle="承租人注册信息"></div>
    <div navigationBar="true" navigationBarTitle="注册信息"></div>
</hlsNavigationBar>
```

##### 6.nodeLevel

说明:添加该属性并设置为“parent”则表示该标题作为父标题,不添加则为子标题

![](/assets/4108.png)

### 使用实例:

##### 1.分层实例

```html
<h:hlsNavigationBar barType="tree">
    <div nodeLevl="parent" navigationBar="true" treeTitle="基本信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="基本信息">
        //这里是内容
    </div>
    <div nodeLevl="parent" navigationBar="true" treeTitle="承租人注册信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="注册信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="历史沿革">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="股权结构">
        //这里是内容
    </div>
    <<h:hlsForm navigationBar="true" navigationBarTitle="经营情况">
        //这里是内容
    </hlsForm>
    <div navigationBar="true" navigationBarTitle="财务状况">
        //这里是内容
    </div>
    <div nodeLevl="parent" navigationBar="true" treeTitle="租赁交易分析">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="租赁报价方案">
        //这里是内容
    </div>
    <h:dataSource></dataSource>
    <h:hlsGridBox navigationBar="true" navigationBarTitle="租赁物信息"></hlsGridBox>
</hlsNavigationBar>
```

##### 效果图:![](/assets/import.png)2.不分层实例

```html
<h:hlsNavigationBar barType="tree">
    <div navigationBar="true" navigationBarTitle="基本信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="开票信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="地址信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="联系人信息">
        //这里是内容
    </div>
    <<h:hlsForm navigationBar="true" navigationBarTitle="关联方信息">
        //这里是内容
    </hlsForm>
    <h:dataSource></dataSource>
    <h:hlsGridBox navigationBar="true" navigationBarTitle="银行账户信息"></hlsGridBox>
</hlsNavigationBar>
```

效果图:

![](/assets/215412.png)