### 3.2.3 前端页面

前端 UI 模板在 [Metronic v4.7.1](http://keenthemes.com/preview/metronic/) 的基础上进行扩展。

主要用到的框架和组件  

* jQuery  
* [Bootstrap 3.3](http://www.bootcss.com/)  
* [Bootstrap-table](http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/) 表格控件   
* Font Icon([Font Awesome](http://fontawesome.io/icons/), [Glyphicons](http://v3.bootcss.com/components/#glyphicons), [Simple Line Icons
](http://simplelineicons.com/))  
* [jschr/bootstrap-modal](https://jschr.github.io/bootstrap-modal/)  


#### 3.2.3.1 Javascript 和 CSS 使用约束
Javascript 和 CSS 文件按照以下路径约定存放：  

- static/plugins : 第三方组件
- static/css : 全局样式表
- static/css/pages : 个别页面的样式表
- static/scripts : 全局脚本
- static/scripts/pages : 个别页面的脚本

个别页面的少量样式直接写在该页面的`<style></style>`标签内，或直接以`style=""`形式写在html标签上。



#### 3.2.3.2 模态对话框的使用
链接或按钮自动调用模态对话框的要素有：参考代码 [sys/user/list.ftl](./qhiot-webcore/src/main/resources/META-INF/resources/sys/user/list.ftl) (Line 48)   
  `data-toggle="modal"` **[必要属性]** 该属性表示点击该元素时触发模态对话框弹出行为;  
  `data-url="..."` **[必要属性]** 该属性表示模态对话框中的页面地址;  
  `data-target` **[可选属性]** 模态对话框的目标容器, 默认为 `#ajax-modal`。 当目标容器不存在时自动创建 `id="ajax-modal"` 容器, 如果页面上有多层级的模态对话框时, 请务必指定 `data-target`, 并在页面上预先增加相关容器的 HTML 代码;  
  其它属性参考 [jschr/bootstrap-modal](https://github.com/jschr/bootstrap-modal) , 元素的 $.data() 数据会作为 options 参数传入  $.modal(options)，即 options = $.data()   
  
```html
<a class="btn btn-success btn-circle" 
    data-url="${_contextPath}/sys/user/create" data-toggle="modal">
    <i class="fa fa-plus"></i> 添加用户
</a>
```

容器代码 (属性参考 bootstrap 和 jschr/bootstrap-modal)
```html
<div id="ajax-modal" class="modal fade draggable-modal" role="basic" data-keyboard="true" data-attention-animation="false"></div>
```

内容页面代码参考 [sys/user/create.ftl](./qhiot-webcore/src/main/resources/META-INF/resources/sys/user/create.ftl)   
  
  
  

#### 3.2.3.3 快速右边栏的使用  
快速右边栏调用的要素有：参考代码 [sys/user/list.ftl](./qhiot-webcore/src/main/resources/META-INF/resources/sys/user/list.ftl) (Line 134)  
    
  `data-toggle="quickbar"` **[必要属性]** 该属性表示点击该元素时触发快速右边栏弹出行为;  
  `data-url="..."` **[必要属性]** 该属性表示快速右边栏中的页面地址;  
  `data-target` **[可选属性]** 快速右边栏的目标容器, 默认为 `#quickbar`
```html
<a class="btn btn-link" 
    data-url="${_contextPath}/sys/user/view?userId=1" data-toggle="quickbar">
    用户详情
</a>
```

容器代码
```html
<div id="quickbar" class="quickbar fade"></div>
```

内容页面代码参考 [sys/user/view.ftl](./qhiot-webcore/src/main/resources/META-INF/resources/sys/user/view.ftl)  





#### 3.2.3.4 JSP Taglib
在 Freemarker 中引入 JSP Taglib
```html
<#assign qh=JspTaglibs["/qhiot-tags"] />
```
使用
```html
<@qh.XXX attr="value" ...></@qh.XXX>
```

* <@qh.dictSelect> 数据字典 Select 组件标签  

    | 属性      | 类型    | 说明    |
    |---------|-------|--------|
    | dictCode        | String | 字典代码 [**必填**] |
    | value           | String | 选中的值, 多个值使用“,”分隔 |
    | showEmptyOption | Boolean | 是否显示空值项（默认 true） |
    | emptyOptionLable | String | 空值项显示的文本 |
    | multiple        | String | 是否允许多选，与 HTML Select 标签 multiple 属性相同 |
    | cssClass       | String | 应用在 &lt;SELECT&gt; 标签的 class 属性 |
    | 其它 HTML 中的属性       | String | 与 HTML 的对应属性相同 |

    示例代码：
    ```html
    <@qh.dictSelect 
        dictCode="STATE"
        value="0" 
        cssClass="form-control" 
        name="user.state"
    />
    ```


* <@qh.dictSwitch> 数据字典按钮组组件标签  

    | 属性      | 类型    | 说明    |
    |----------|---------|--------|
    | dictCode        | String | 字典代码 [**必填**] |
    | value           | String | 选中的值, 多个值使用“,”分隔 |
    | multiple        | String | true/false 是否允许多选 |
    | divClass       | String | 应用在外层 &lt;DIV&gt; 的 class 属性|
    | labelClass     | String | 应用在每个选项外的 &lt;Label&gt; 的 class 属性, 默认值 `btn-group btn-group-sm`|
    | cssClass       | String | 应用在每个 &lt;INPUT&gt; 的 class 属性, 默认值 `btn btn-default` |
    | 其它 HTML 中的属性       | String | 与 HTML 的对应属性相同 |

    示例代码：
    ```html
    <@qh.dictSwitch 
        dictCode="STATE"
        value="0" 
        multiple="true" 
        divClass="btn-group btn-group-sm" 
        labelClass="btn btn-info" 
        name="user.state"
    />
    ```

* <@qh.dictCheckGroup> 数据字典 checkbox/radio 组件标签 
 
    | 属性      | 类型    | 说明    |
    |----------|---------|--------|
    | dictCode        | String | 字典代码 [**必填**] |
    | value           | String | 选中的值, 多个值使用“,”分隔 |
    | multiple        | String | true/false 是否允许多选 `checkbox` / `radio` |
    | divClass       | String | 应用在外层 &lt;DIV&gt; 的 class 属性, 默认值 `mt-checkbox-inline` / `mt-radio-inline` |
    | labelClass     | String | 应用在每个选项外的 &lt;Label&gt; 的 class 属性, 默认值 `mt-checkbox` / `mt-radio` |
    | cssClass       | String | 应用在每个 &lt;INPUT&gt; 的 class 属性 |
    | 其它 HTML 中的属性       | String | 与 HTML 的对应属性相同 |

    示例代码：
    ```html
    <@qh.dictCheckGroup 
        dictCode="STATE"
        value="0" 
        multiple="true" 
        divClass="mt-checkbox-list" 
        labelClass="mt-checkbox mt-checkbox-outline" 
        name="user.state"
    />
    ```

* <@qh.dictText> 数据字典文本标签  

    | 属性      | 类型    | 说明    |
    |----------|---------|--------|
    | dictCode        | String | 字典代码 [**必填**] |
    | value           | String | 选中的值 [**必填**] |

    示例代码：
    ```html
    <@qh.dictText 
        dictCode="STATE"
        value="0"
    />
    ```
    
* <@qh.compress> CSS 和 Javascript 压缩  
    该标签可以将标签范围内所有的 CSS 或 Javascript 压缩到一个文件内， 以减少对服务器的请求次数并减小数据传输量  
    `注意`: 标签内只能全部是 CSS 或全部是 Javascript, 不能同时混合 CSS 和 Javascript.  
    
    | 属性      | 类型    | 说明    |
    |----------|---------|--------|
    | method    | String | 压缩方法, <br/>应用于JS: jsfastmin / closure-compiler / auto , <br/>应用于CSS: cssfastmin / combine / auto |
    | options   | String | method 使用 closure-compiler 时的选项, 具体参考 google closure-compiler 的参数 |
    | debug     | Boolean | 是否启用 debug 模式, 默认 false, 当 debug="true" 时, 标签原样输出内部的内容 |
    | cache     | Boolean | 是否使用缓存, 默认 true, 调试时可以设置 cache="false" 来强制重新压缩 |