0
点赞
收藏
分享

微信扫一扫

esyui

琛彤麻麻 2022-04-05 阅读 10
easyui

hello,大家好,我依旧是你们的好朋友-求哥的马子,今天给大家推荐好用的 esyui

1、easyui是什么东西?
 
easyui是一种基于jQuery的用户界面插件集合。
 
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
 
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
 
easyui是个完美支持HTML5网页的完整框架。
 
easyui节省您网页开发的时间和规模。
 
easyui很简单但功能强大的。
 
2、官方网址
 
http://www.jeasyui.net/
 
下载
 
http://www.jeasyui.com/download/list.php
 

案列一:使用esyui 完成简单的页面布局

实现思路:新建一个动态web项目,导入需要的esyui 包,新建 jsp 页面,在页面导入寻要的包

(如果很多页面需要用到同样的几个包,可以将它封装到一个页面里)

主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="common/head.jsp"%><!-- 此处调用所需的包 -->
<title>Insert title here</title>
</head>
<body class="easyui-layout" >   
    <div data-options="region:'north',title:'网上书城后台管理系统',split:true" style="height:100px;"></div>   

    <div data-options="region:'west',title:'功能导航',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
    <div data-options="region:'south',split:true" style=" text-align:center;background: #E0ECFF;height:30px;"  class="panel-title">
    	Copyright@求哥的马子有限责任公司
    </div>   
</body>  
</html>

封装的界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    request.setAttribute("ctx", request.getContextPath());/* 全局变量 上下文参数 */
    %>
<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>
<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<script type="text/javascript">
var ctx = '${ctx}';//调用
</script>

代码简单绝对,求哥简单纯粹,每天都要开心哦
好了,到这就结束了,感谢观看

举报
0 条评论