jQueryEasyUI框架
2018-10-19 本文已影响19人
陶菇凉
EasyUI 简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
跟Bootstrap相比，easyui框架更趋向于后台的使用。
1、easyui的官网地址
http://www.jeasyui.net/
大家可以进去学习，在这里我简单的给大家介绍一个小实例。
2、easyui的引入
文件引入
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
所以，你在引入的时候，一定不要忘记了进入jQuery插件。
3、easyui的使用
jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
(1).首先直接在 HTML 声明组件。
图一
(2).编写 JavaScript 代码来创建组件。
图二
4.程序代码：
``` <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.6/themes/icon.css">
<script src="jquery-easyui-1.6.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery-easyui-1.6.6/jquery.easyui.min.js">
</script>
<style type="text/css">
.left{
width:120px;
float:left;
}
.left table{
background:#E0ECFF;
}
.left td{
background:#eee;
}
.right{
float:right;
width:600px;
}
.right table{
background:#E0ECFF;
width:100%;
}
.right td{
background:#fafafa;
text-align:center;
padding:2px;
}
.right td{
background:#E0ECFF;
}
.right td.drop{
background:#fafafa;
width:100px;
}
.right td.over{
background:#FBEC88;
}
.item{
text-align:center;
border:1px solid #499B33;
background:#fafafa;
width:100px;
}
.assigned{
border:1px solid #BC2A4D;
}
</style>
</head>
<body>
<div style="width:750px;">
<div class="left">
<table>
<tr>
<td><div class="item">English</div></td>
</tr>
<tr>
<td><div class="item">Science</div></td>
</tr>
<tr>
<td><div class="item">Music</div></td>
</tr>
<tr>
<td><div class="item">History</div></td>
</tr>
<tr>
<td><div class="item">Computer</div></td>
</tr>
<tr>
<td><div class="item">Mathematics</div></td>
</tr>
<tr>
<td><div class="item">Arts</div></td>
</tr>
<tr>
<td><div class="item">Ethics</div></td>
</tr>
</table>
</div>
<div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">09:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">10:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">11:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">12:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">13:00</td>
<td class="lunch" colspan="5">Lunch</td>
</tr>
<tr>
<td class="time">14:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">15:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">16:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$('.left .item').draggable({
revert:true,
proxy:'clone'
});
$('.right td.drop').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
</script>
</body>
</html>
5.总结
刚开始，知道框架这个东西的时候，就在想，为什么不一开始就直接跳过基础知识学习框架呢？那样岂不是会节省很多时间。使用过框架之后，我想明白了，如果你不知道基础的知识，那你不管看再多的框架，都不可能明白框架的构成，更别说能熟练的使用框架了，所以要一步一个脚印，踏踏实实往前走，切不可眼高手低。
