中小后台系统UI框架--EasyUI,程序框架
3672Js.Com2019-10-14 12:13 来源:未知 阅读:19826 关注度4
中小后台系统UI框架--EasyUI,程序框架
后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面。EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页。
官方地址:http://www.jeasyui.com/
一、引用EasyUI
官网下载EasyUI组件jquery-easyui-1.*.*.zip,项目工程导入locale文件夹、themes文件夹、jquery.easyui.min.js、jquery.min.js文件。
二、以系统用户首页为例,使用EasyUI
1) 用户登录系统,首页界面
2)home.jsp编码设计
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>管理系统</title> <link rel="stylesheet" href="plugin/easyui/themes/icon.css" /> <link rel="stylesheet" href="plugin/easyui/themes/default/easyui.css" /> <link rel="stylesheet" href="css/home.css"/> <script type="text/javascript" src="plugin/easyui/jquery.min.js"></script> <script type="text/javascript" src="plugin/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="plugin/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/pathurl.js"></script> <script type="text/javascript" src="js/home.js?v=1.01"></script> <script type="text/javascript" src="js/head.js"></script> </head> <!-- ${userName} --> <body class="easyui-layout">$(function() { InitLeftMenu(); tabClose(); tabCloseEven(); }); // 初始化左侧菜单 function InitLeftMenu() { $("#menunav").accordion({ animate : false }); $.ajax({ url : "user/getusermenu.do", type : "POST", dataType : "json", success : function(data) { console.log("菜单数据: " + JSON.stringify(data)); $.each(data.menus, function(i, n) { var menulist = ''; menulist += '<ul>'; $.each(n.menus, function(j, o) { menulist += '<li><div><a ref="' + o.menuId + '" href="#" rel="' + o.menuUrl + '" ><span class="icon ' + o.icon + '" > </span><span class="nav">' + o.menuName + '</span></a></div></li> '; }) menulist += '</ul>'; $('#menunav').accordion('add', { title : n.menuName, content : menulist, iconCls : 'icon ' + n.icon }); }); $('.easyui-accordion li a').click(function() { var tabTitle = $(this).children('.nav').text(); var url = $(this).attr("rel"); var menuid = $(this).attr("ref"); addTab(tabTitle, url); $('.easyui-accordion li div').removeClass("selected"); $(this).parent().addClass("selected"); }).hover(function() { $(this).parent().addClass("hover"); }, function() { $(this).parent().removeClass("hover"); }); // 选中第一个 var panels = $('#menunav').accordion('panels'); var t = panels[0].panel('options').title; $('#menunav').accordion('select', t); } }); } // 添加选项卡 function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content : createFrame(url), closable : true // icon:icon }); } else { $('#tabs').tabs('select', subtitle); $('#mm-tabupdate').click(); } tabClose(); } // 创建点击菜单时打开框架 function createFrame(url) { var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '">{"menus":[{"icon":null,"menuId":"A","menuName":"机构管理","menus":[{"menuId":"A1","menuName":"部门机构","parentId":"A","menuUrl":"dept/index.do","serialNo":null,"icon":null}]},{"icon":"icon-overview","menuId":"H","menuName":"系统管理","menus":[{"menuId":"H1","menuName":"用户管理","parentId":"H","menuUrl":"system/user/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H2","menuName":"角色管理","parentId":"H","menuUrl":"system/role/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H3","menuName":"菜单管理","parentId":"H","menuUrl":"system/menu/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H4","menuName":"岗位成员","parentId":"H","menuUrl":"system/rolemember/index.do","serialNo":null,"icon":null},{"menuId":"H5","menuName":"系统日志","parentId":"H","menuUrl":"system/log/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H6","menuName":"数据字典","parentId":"H","menuUrl":"system/param/index.do","serialNo":null,"icon":"icon-overview"}]}]}View Code
三、API手册
1) 官网组件(英文)地址:http://www.jeasyui.com/documentation/index.php#
2) jQuery EasyUI 官方API文档中文版,下载地址:http://download.csdn.net/album/detail/343
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭