首先到http://www.w3cschool.cc/jeasyui/jqueryeasyui-tutorial.html下载了手册。

再到 http://edu.51cto.com/course/course_id-1300.html 点击学习



第一课 2014.12.27

jQuery EasyUi入门

到百度下载 插件包 解压放入站点目录 官方网站:http://www.jeasyui.com/外国站点慢

特点:1 基于jQuery

2.支持html5

3.源代码加密,商业版付费499美元

适合做后台,属于比较重的框架 内置jQuery2.0版本,不支持IE9.0以下版本。(IE6,7,8)

同类产品 DWZ; ExtJS


demo 样例,可以全部删除

themes 主题(外观),可以删除

locale 语言包 可以删除中文以外的文件

3. 实例 弹出一个对话框,可以移动,可以最小化

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Basic Dialog - jQuery EasyUI Demo</title>

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><!-- 默认主题中总样式表-->

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><!-- 默认各种图标-->

<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script> <!--载入jQuery 主核心文件2.0不支持IE6,7,8-->

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><!--载入Easyui主核心文件-->

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_cn.js"></script> <!--载入语言包-->

</head>

<body>

<!--div class ="easyui-dialog"

data-options="title:'我的窗口' ,collapsible:true ,iconCls:'icon-ok',onopen;function(){}">

对话内容. </div-->

<h3>基本弹出窗口</h3>

<p>点击下面的按钮来打开或关闭对话框。</p>

<div >

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('Open')">开打</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('Close')">关闭</a>

</div>

<div id="dlg" class="easyui-dialog" title="基本对话框" data-options="iconCls:'icon-save' ,collapsible:true " >

对话内容

</div>

</body>

</html>

第一课结束