jQuery EasyUI入门

什么是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/

 

posted @ 2015-08-05 23:00  ihuning  阅读(277)  评论(0)  编辑  收藏  举报