easyui(基本布局)

Lme1216

已于 2022-05-04 23:40:12 修改

阅读量499

点赞数

文章标签： easyui jquery javascript

于 2022-05-04 23:39:34 首次发布

本文链接：https://blog.csdn.net/qq_44247968/article/details/124580143

版权

一、概括
什么是easyUI？
jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富并且美观的UI界面

为什么学？
①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面
②.easyui 是个完美支持 HTML5 网页的完整框架
③.easyui 能节省网页开发的时间和规模
④.easyui 很简单但功能很强大，容易上手

用在哪？
后台管理

二、准备工作
①.下载easyui
http://www.jeasyui.com/
②.页面中引入库
引入JQuery（jquery.min.js）

引入EasyUI（jquery.easyui.min.js）

引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）

引入EasyUI的样式文件（/themes/default/easyui.css）

引入EasyUI的图标样式文件（/themes/icon.css）
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

三、使用
两种方式：

[Demo] [API文档]
使用布局组件-Layout搭建后台框架

进行优化:
提取公共页面

代码展示：

主界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   $(function(){
       $('#myTree').tree({
       url:ctx+'/data/tree_data1.json',//请求地址
       animate:true,//定义节点在展开或折叠的时候是否显示动画效果。
       onDblClick: function(node){
               //alert(node.text+" "+node.id+" "+node.state); // 在用户双击的时候提示
               //alert(node.iconCls);//图标

               //拿到对应的后代节点的集合
               var cs = $('#myTree').tree('getChildren',node.target);
               if(cs.length==0){//没有后代节点
                   //判断是否存在
                   var tab = $('#myTab').tabs('exists',node.text);
                   if(!tab){//说明不存在
                       //新打开一个选项卡(tab页) iconCls:'icon-ok'
                   $('#myTab').tabs('add',{
                   title:node.text, //标题
                   content:node.text, //内容
                   closable:true, //是否可关闭
                   iconCls:node.iconCls
                   });
                   }
                   else{//说明存在让其对应选中
                       $('#myTab').tabs('select',node.text);
                   }
               }
           }
       });
   })
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:80px;text-align: center;">
   <h1>书籍后台管理</h1>
</div>
<div data-options="region:'south',split:true" style="height:55px;text-align: center;">
   ©玉渊工作室，未经允许不可随意使用
</div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:200px;">

   
   <ul id="myTree" class="easyui-tree">

       </ul>

</div>
<div data-options="region:'center'" style="padding:5px;background:#fff;">
   
        <div id="myTab" class="easyui-tabs" style="width:100%;height:100%;">
       <div data-options="iconCls:'icon-application-home'" title="首页" style="padding:10px;display:none;">
       <img src="images/999.png" width="100%" height="100%">
       </div>
       </div>
</div>
</body>
</html>

头部样式：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
   //拿到绝对路径
   String path=request.getContextPath();
   //System.out.print(path);// /easyui01
   request.setAttribute("ctx", path);//${ctx}
%>
<script type="text/javascript">
   var ctx='${ctx}';
</script>

<link type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" rel="stylesheet" />

<link type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css" rel="stylesheet" />

<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

Lme1216

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui(基本布局)

一、概括什么是easyUI？jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富并且美观的UI界面为什么学？①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面②.easyui 是个完美支持 HTML5 网页的完整框架③.easyui 能节省网页开发的时间和规模④.easyui 很简单但功能很强大，容易上手用在哪？后台管理二、准备工作①.下载easyui http://www...
复制链接

扫一扫