Home Explore Help
Register Sign In
qh
/
qh-qinan
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: c7b4aeb919
Branches Tags
qh-qinan
/
doc
/
dev
/
View.md

View.md 7.4 KB
History Raw

3.2.3 前端页面

前端 UI 模板在 Metronic v4.7.1 的基础上进行扩展。

主要用到的框架和组件

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 (Line 48)
data-toggle="modal" [必要属性] 该属性表示点击该元素时触发模态对话框弹出行为;
data-url="..." [必要属性] 该属性表示模态对话框中的页面地址;
data-target [可选属性] 模态对话框的目标容器, 默认为 #ajax-modal。 当目标容器不存在时自动创建 id="ajax-modal" 容器, 如果页面上有多层级的模态对话框时, 请务必指定 data-target, 并在页面上预先增加相关容器的 HTML 代码;
其它属性参考 jschr/bootstrap-modal , 元素的 $.data() 数据会作为 options 参数传入 $.modal(options)，即 options = $.data()

<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)

<div id="ajax-modal" class="modal fade draggable-modal" role="basic" data-keyboard="true" data-attention-animation="false"></div>

内容页面代码参考 sys/user/create.ftl

3.2.3.3 快速右边栏的使用

快速右边栏调用的要素有：参考代码 sys/user/list.ftl (Line 134)

data-toggle="quickbar" [必要属性] 该属性表示点击该元素时触发快速右边栏弹出行为;
data-url="..." [必要属性] 该属性表示快速右边栏中的页面地址;
data-target [可选属性] 快速右边栏的目标容器, 默认为 #quickbar

<a class="btn btn-link" 
    data-url="${_contextPath}/sys/user/view?userId=1" data-toggle="quickbar">
    用户详情
</a>

容器代码

<div id="quickbar" class="quickbar fade"></div>

内容页面代码参考 sys/user/view.ftl

3.2.3.4 JSP Taglib

在 Freemarker 中引入 JSP Taglib

<#assign qh=JspTaglibs["/qhiot-tags"] />

使用

<@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 应用在 <SELECT> 标签的 class 属性
    其它 HTML 中的属性 String 与 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 应用在外层 <DIV> 的 class 属性
    labelClass String 应用在每个选项外的 <Label> 的 class 属性, 默认值 btn-group btn-group-sm
    cssClass String 应用在每个 <INPUT> 的 class 属性, 默认值 btn btn-default
    其它 HTML 中的属性 String 与 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 应用在外层 <DIV> 的 class 属性, 默认值 mt-checkbox-inline / mt-radio-inline
    labelClass String 应用在每个选项外的 <Label> 的 class 属性, 默认值 mt-checkbox / mt-radio
    cssClass String 应用在每个 <INPUT> 的 class 属性
    其它 HTML 中的属性 String 与 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 选中的值 [必填]

    示例代码：

    <@qh.dictText 
    dictCode="STATE"
    value="0"
/>

  • <@qh.compress> CSS 和 Javascript 压缩
    该标签可以将标签范围内所有的 CSS 或 Javascript 压缩到一个文件内， 以减少对服务器的请求次数并减小数据传输量
    注意: 标签内只能全部是 CSS 或全部是 Javascript, 不能同时混合 CSS 和 Javascript.

    属性 类型 说明
    method String 压缩方法,
    应用于JS: jsfastmin / closure-compiler / auto ,
    应用于CSS: cssfastmin / combine / auto
    options String method 使用 closure-compiler 时的选项, 具体参考 google closure-compiler 的参数
    debug Boolean 是否启用 debug 模式, 默认 false, 当 debug="true" 时, 标签原样输出内部的内容
    cache Boolean 是否使用缓存, 默认 true, 调试时可以设置 cache="false" 来强制重新压缩