一、Hwebui Dailog组件使用
webui弹出窗体，基于jquery ui dailog封装成ui组件，用户可以通过配置属性方式打开dailog，dailog实现可拖拽，可编辑html表单内容，webui同时也提供了自定义api弹出窗体。
二、界面
1.1、添加dailog
1.2、编辑dailog
三、页面代码
引入头文件宏：
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>管理平台</title>
<@head.head color=currentColor></@head.head>
</head>宏文件引入js文件：
<#macro head color>
<script type="text/javascript" src="${basePath}/js/system_ui/constants.js" ></script>
<script type="text/javascript" src="${basePath}/js/jquery-3.1.0.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery-ui.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.visible.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.validate.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.serializejson.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/messages_zh.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.dataTables.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/dataTables.fixedColumns.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.core.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.excheck.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.exhide.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/css_browser_selector.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/templatePlugin/dist/template.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/templatePlugin/template.custom.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/templatePlugin/template.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.charts.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.gantt.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.maps.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.powercharts.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.ssgrid.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.treemap.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.widgets.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.zoomscatter.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/tagsinput.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.base.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.funsioncharts.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.main.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/select2.full.min.js" data="deafult"></script>
<script type="text/javascript" language="javascript" src="${basePath}/js/My97DatePicker/WdatePicker.js" data="deafult"></script>
<link rel="stylesheet" href="${basePath}/css/normalize.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/jquery-ui.min.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/jquery-ui-sysbase.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/${color}/main.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/form.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/select2.min.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/zTreeStyle/zTreeStyle.css" data="deafult" />
<link rel="stylesheet" href="${basePath}/css/buttons.css" data="deafult" />
<link rel="stylesheet" href="${basePath}/css/tagsinput.css" data="deafult"></link>
<script type="text/javascript">
var basePath = "${basePath}";
var currentColor = "${currentColor}";
</script>
<#nested>
</#macro>弹出dailog配置：
<@sec.authorize access="hasAnyRole('ADD_USER')">
<li ><a type="button" width="800" unitType="addDialog" height="400" modal="true" title="添加用户" href="user-add.do" ><span class="add"></span><span>添加</span></a></li>
<li class="line" width="500" height="600" ></li>
</@sec.authorize>
<@sec.authorize access="hasAnyRole('EDIT_USER')">
<li><a type="button" relId="table" width="800" unitType="editDialog" height="400" href="user-edit.do?entity.id=[%]" ><span class="edit"></span><span>编辑</span></a></li>
<li class="line"></li>
</@sec.authorize>属性：
type : button 按钮类型。
unitType：dailog类型，添加dailog【addDialog】，编辑dailog【editDialog】。
modal：true 模态【添加遮罩层】。
relId：关联组件，一般和table组件使用。
width: 宽度。
height: 高度。
close:是否关闭窗体：true 是，false否，默认true
operateType:窗体或页面操作类型：关闭【close】、刷新【refresh】、保存【save】、自定义回调函数【callback】,关闭并回调【closeAndcallback】。
href：打开地址。
欢迎访问:www.hongfu951.com博客，查看更多技术文章
下载web项目地址：