EasyUI美化界面项目系统（整合EasyUI

原使用easyui开发的系统项目基础做的Demo，极大程度上美化了界面。

aceAdmin提炼版本见其他博文，此篇新增与easyui的整合，并最大程度上不改变原系统操作方式，以及主页面的各种功能，减小美化的替代量。

老界面：

新美化界面：

Ace Admin 官方网站

http://ace.jeka.by/

sitemesh标签使用，decorators.xml过滤jsp页面（参考）

https://blog.csdn.net/t1012665655/article/details/88528182

<div class="main-content"><script type="text/javascript">try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}</script><div class="easyui-tabs" id="main_content" data-options="fit:false"></div><!-- <div class="page-content" style="border:1px solid red;" data-options="fit:false"><div class="row J_mainContent" id="content-main"><iframe onload="iframeChange()" id="J_iframe" class="J_iframe" name="iframe0" width="100%" height="100%" src="" frameborder="0" data-id="index_v1.html" seamless></iframe></div></div> --></div>

引入js以及css，easyUI非官方皮肤

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="static_version" value="${10002}"/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title><sitemesh:title/></title>
<%--     <link rel="stylesheet" type="text/css" href="${ctx}/static/lib/font-awesome/css/font-awesome.min.css?${static_version}"/><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/easyui/themes/material/easyui.css?${static_version}"/><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/easyui/themes/icon.css?${static_version}"/> --%><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/EasyUIInsdep/themes/insdep/easyui.css?${static_version}"/><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/EasyUIInsdep/themes/insdep/easyui_animation.css?${static_version}"/><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/EasyUIInsdep/themes/insdep/easyui_plus.css?${static_version}"/><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/EasyUIInsdep/themes/insdep/insdep_theme_default.css?${static_version}"/><link rel="stylesheet" type="text/css" href="${ctx}/static/lib/EasyUIInsdep/themes/insdep/icon.css?${static_version}"/><script type="text/javascript" src="${ctx}/static/lib/EasyUIInsdep/jquery.min.js?${static_version}"></script><script type="text/javascript" src="${ctx}/static/lib/EasyUIInsdep/jquery.easyui.min.js?${static_version}"></script><script type="text/javascript" src="${ctx}/static/lib/EasyUIInsdep/themes/insdep/jquery.insdep-extend.min.js?${static_version}"></script><script type="text/javascript" src="${ctx}/static/lib/easyui/locale/easyui-lang-zh_CN.js?${static_version}"></script><script type="text/javascript" src="${ctx}/static/lib/vue/vue.min.js?${static_version}"></script><link rel="stylesheet" type="text/css" href="${ctx}/static/site.css?${static_version}"/><script type="text/javascript" src="${ctx}/static/site.js?${static_version}"></script><sitemesh:head/>
</head>
<body class="no-skin">
<sitemesh:body/>
</body>
</html>

待修改部分问题，生成tab时iframe高度被截，自适应问题，部分js

function addTab(title, url) {var mainContent = $('#main_content');console.log(mainContent);if (mainContent.tabs('exists', title)) {mainContent.tabs('close', title);}var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:800px;" onload="iframeChange()"></iframe>';mainContent.tabs('add', {title: title,content: content,closable: true});
}function iframeChange(){var ifmHeight = document.documentElement.clientHeight - 130;$(".main-content").css("height",ifmHeight);var height = document.documentElement.clientHeight - 130;$(".nav-list").css("height",height);
}

EasyUI美化界面项目系统（整合EasyUI_Insdep皮肤）相关推荐

使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个员工管理源代码分享在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享
在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了使用Jquery EasyUI来进行开发的相关方法,同时对入群的用户提供了使用J ...
代码生成工具更新--快速生成Winform框架的界面项目
在之前版本的代码生成工具Database2Sharp中,由于代码生成都是考虑Winform和Web通用的目的,因此Winform界面或者Web界面都是单独生成的,在工具中生成相应的界面后,复制到项目里 ...
新时期政务服务系统整合对接模式探析
引言近年来,随着"一网一门一次"改革的大力推进,我国政务信息化迅猛发展,服务渠道不断拓展,服务内容不断丰富,服务形式不断创新,政策环境.社会环境.技术环境也随之不断演变,政务信息 ...
JQuery EasyUi之界面设计——前言与界面效果（一）
为什么80%的码农都做不了架构师?>>> 如果冯巩的开场白是"观众朋友们,我想死你们了",那么我的开场白是"最近一直很忙,很久没有发文了" ...
editor.md七牛云上传图片springboot_spring boot 若依系统整合Ueditor，部署时候上传图片错误解决...
spring boot 若依系统整合Ueditor,部署时候上传图片错误解决前言:国庆假期找了个ruoyi版本的cms玩玩,从git上看,介绍如下图: 后台部分截图: 编辑编辑编辑 ...
界面控件DevExpress WinForms皮肤编辑器的这个补丁，你了解了吗？
老用户可能知道,在几年前官方技术团队彻底检查了WinForms 皮肤编辑器--这个新工具现在被称之为"Skin Editor v2",在所有可能的方面都优于它的前身.Skin Ed ...
Windows Server+IIS+ASP+MSSQL2K+ServU　系统整合安全方案(转）
1 前言在这混的久了收获很多,感觉不发点东西就对不起这里的兄弟姐妹,因此就把我对Windows系统配置的一点经验共享一下．希望对初学者有点帮助!^_^ Windows 系统 ...

EasyUI美化界面项目系统（整合EasyUI_Insdep皮肤）

EasyUI美化界面项目系统（整合EasyUI_Insdep皮肤）相关推荐

最新文章

热门文章