Hwebui Dailog组件使用

Hwebui

2018-08-25

54

1

一、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文件:

<#assign basePath=(request.contextPath)!"/poo.sysbase">
<#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项目地址:

链接:https://pan.baidu.com/s/1rZu6tLALMfyBJ8MhD-lepw 密码:w1o1

 

发表评论

全部评论:1条

鸿福951 2018-09-01

web项目下载地址:http://www.hongfu951.com/c/SSHwebui介绍.html博客中

鸿福951

努力打造一个好用的webui

热评文章

推荐文章