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

最新推荐文章于 2024-09-15 16:35:16 发布

好给定性

最新推荐文章于 2024-09-15 16:35:16 发布

阅读量4.5k

点赞数 1

分类专栏： js 文章标签： css javascript jquery easyui

本文链接：https://blog.csdn.net/t1012665655/article/details/109490937

版权

js 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

原使用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>

EasyUI-Insdep
弹窗优化

待修改部分问题，生成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);
}