什么是jQuery EasyUI?
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
jQuery EasyUI的特点
1、基于jquery用户界面插件的集合
2、为一些当前用于交互的js应用提供必要的功能
3、EasyUI支持两种渲染方式分别为javascript方式(如:$(‘#p‘).panel({...}))和html标记方式(如:class="easyui-panel")
4、支持HTML5(通过data-options属性)
5、开发产品时可节省时间和资源
6、简单,但很强大
7、支持扩展,可根据自己的需求扩展控件
8、目前各项不足正以版本递增的方式不断完善
9、源代码加密,商业版付费
jQuery EasyUI浏览器兼容性
jQuery EasyUI1.3.5自带的jQuery版本为2.0,不再支持IE6,7,8这三款浏览器。
jQuery EasyUI示例
1. 在官网下载最新的版本包并解压;
2. 在网页中至少引入下面文件:
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
3. 完整代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Dialog - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Basic Dialog</h2> <p>Click below button to open or close dialog.</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#dlg‘).dialog(‘open‘)">Open</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#dlg‘).dialog(‘close‘)">Close</a> </div> <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:‘icon-save‘" style="width:400px;height:200px;padding:10px"> The dialog content. </div> </body> </html>
备注信息
jQuery EasyUI官网:http://www.jeasyui.com/
jQuery EasyUI学习网站:
EasyUI学习班:http://www.jeasyuicn.com/
EasyUI中文社区:http://bbs.jeasyuicn.com/
jQuery EasyUI中文网:http://www.jeasyui.net/tutorial/
RUNOOB:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html
北风网:ibeifeng.com/
瓢城Web俱乐部:http://www.ycku.com/