easyui01---基本布局

概述

What?

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

Why?

①.使用easyui 不需要写很多代码,只需要编写一些简单 HTML 标记,就可以定义用户界面

②.easyui 是个完美支持 HTML5 网页的完整框架

③.easyui 能节省网页开发的时间和规模

④.easyui 很简单但功能很强大,容易上手

Where?

后台管理界面

 准备工作

①.下载easyui

EasyUI - helps you build your web pages easilyEasyUI is a complete framework for HTML5 web page. It provides easy to use components for building modern, interactive, javascript applications that work on pc and mobile devices.http://www.jeasyui.com/

②.页面中引入库

引入EasyUI(jquery.easyui.min.js)

引入JQuery(jquery.min.js)

引入EasyUI的中文国际化js,让EasyUI支持中文(locale/easyui-lang-zh_CN.js)

引入EasyUI的样式文件(/themes/default/easyui.css)

引入EasyUI的图标样式文件(/themes/icon.css)

使用 

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

第一种【APL文档】

easyui01---基本布局_第1张图片

第二种demo文件夹

easyui01---基本布局_第2张图片

 进行优化(提取公共部分)

注释:因为我们很多页面都需要用到前面的准备方法,所有这边我们封装一个页面,然后再到要用到的界面调用就可以节省很多重复的代码的编写

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	//获取路径
	String path=request.getContextPath();
	request.setAttribute("ctx", path);
	
%>  

	













为了防止报404错误,所有我们每个js都使用了绝对路径的方法


页面调用

   
<%@ include file="common/head.jsp" %>

引入即可,注意路径!!!!!!

你可能感兴趣的:(easyui,easyui,ui)