easyUI的基本知识

今天我们来了解一下easyui，并且利用easyui写一个首页

网页地址

http://www.jeasyui.net/（中文网）

http://www.jeasyui.com/（英文版）

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

常见UI：

Layui，Bootstrap，element ui,ant design,iview

1.什么是easyui？

easyui是一种基于jQuery的用户界面插件集合

2.easyui能带给我们什么好处？

1）easyui是个完美支持HTML5网页的完整框架

2）easyui节省网页开发的时间和规模

3）easyui很简单但功能强大

3.easyui如何使用？

3.1 引入必要的js和css样式文件

1）引入JQuery（jquery.min.js）

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

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

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

5）引入EasyUI的图标样式文件（/themes/icon.css）

3.2 路径问题

3.2.1 相对路径/绝对路径

3.2.2 base标签

3.3 页面缓存

4.组件

分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、

DataGrid and Tree（表格和树）、Extension（扩展）

5.利用easyUI写一个首页

效果图：

左边菜单可以收缩

点击菜单在输出台输出

代码如下：

首页：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title><script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css"></head>
<body class="easyui-layout"><div data-options="region:'north',title:'网站导航栏',collapsible:false" style="height: 100px;"></div><div data-options="region:'south',title:'友商链接',collapsible:false" style="height: 100px;"></div><div data-options="region:'west',title:'菜单'" style="width: 20%;"><ul id="asideMenu"></ul></div><div data-options="region:'center',title:'内容',collapsible:false" style="padding: 5px; background: #eee;"></div><script>$('#asideMenu').tree({//构建方法url : 'tree_data.json',//远程数据的地址method : "post",//访问方式lines : true,//显示虚线onClick(node){//点击出现内容//取到节点的自定义属性 判断自定义属性中的pidif(node.attributes.pid){console.log("我是小菜单")}else{console.log("我是大菜单")}}});</script></body>
</html>

菜单栏：

[{    "id":1,    "text":"商品管理",   "state":"closed", "attributes":{"pid":0},    "children":[{    "id":2,"text":"商品增加01","attributes":{"pid":1}},{"id":3,"text":"商品增加02","attributes":{"pid":1}}]
},{    "id":10,"text":"类别管理",    "state":"closed","attributes":{"pid":0},      "children":[{"id":12,"text":"商品增加01","attributes":{"pid":10}},{"id":13,"text":"商品增加02","attributes":{"pid":10}}]
}]

好咯，今天到这里就结束咯，下次见宝们。

easyUI的基本知识相关推荐

jquery mobile快速入门_【K些项目】学透jquery，11个国内最新项目资料
对代码.编程感兴趣的可以关注老K玩代码和我交流! " jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaSc ...
饮一盏Bug留香，唱一曲项目飞扬
沿途的风景牵挂的项目两情迢迢学生档案管理项目在2月的末尾从稍带寒意的季节里完成了第一次迭代,验收的结果不尽善尽美,演示的功能也惨不忍睹,各种"关爱"的点评充斥耳旁 ...
伴着代码，那个女孩儿慢慢长大
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 伴着代码 ...
使用JqueryEasyUI进行页面布局
下面为为大家介绍一种快速搭建页面布局的方法,那就是使用EasyUI进行布局. 在布局之前首先要从EasyUI包里面引用五个文件. <link href="EasyUI/themes/m ...
情不知所起，一往而深
情不知其所起,一往而深.用这句话来描述现在做项目的感觉最为贴切.整个.NET版的ITOO项目让我成长让我沉迷.我从来不知道自己原来也是这样可以喜欢上学习.因为在看视频的时候,总是走神.不自觉的刷网页. ...
2020-7-28 ------2021-2-2 年度总结
2020-7-28 ------2021-2-2 年度总结 2020-7-28-2020-8-31: 主要做的事: 前半个月主要就是熟悉winform界面,熟悉常用的控件,熟悉Grid,binding ...
Javabase到easyui的知识总结
从JavaBase到easyui 目录: Javabase: 基本数据类型逻辑运算符 OOP: 类与对象封装.构造.重载 oop知识点汇总 SQLServerlet: 数据库连接数据库单词数据 ...
JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
（转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的 ...

easyUI的基本知识

easyUI的基本知识相关推荐

最新文章

热门文章