第一步：点击去官网下载EasyUI
第二步：项目中导入easyui所需东西
第三步：引入EasyUI
<!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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>第四步：如何使用呢？？？
ex:怎么创建easyui组件？？
方式①： html创建组件 --> class="easyui-组件名"
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>html创建组件</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">
// $.parser.auto = false;//禁用html方式创建组件</script></head><body><div id="p" class="easyui-panel"style="width:500px;height:200px;padding:10px;"title="html创建组件"iconCls="icon-ok"collapsible="true">html创建组件 ---》 class="easyui-组件名" <br/>title:标题 <br/> iconCls:图标 <br/> collapsible:是否可收缩 <br/> padding:内边距</div></body>
</html>运行效果：
方式②： js创建组件 --> $("属性名").组件名({ ... })
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>js创建组件</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">$(function(){$("#panelDiv").panel({title:"js创建组件",iconCls:"icon-ok",collapsible:"true"});});</script></head><body><div id="panelDiv" style="width:500px;height:200px;padding:10px;">js创建组件 ---》 $("属性名").组件名({ ... }) <br/>title:标题 <br/> iconCls:图标 <br/> collapsible:是否可收缩 <br/> padding:内边距</div></body>
</html>运行效果：
常用LinkButton按钮
注意：若要使用button的颜色还需要导入EasyUI的颜色css样式
<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>LinkButton按钮和事件</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入easyui颜色样式 --><link rel="stylesheet" type="text/css" href="../easyui/themes/color.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">$(function(){$(".easyui-linkbutton").on("click",function(){if(!$(this).hasClass("l-btn-disabled")){ //判断是否有这个禁用属性alert($(this).text()); //如果没有则弹出框}})})</script></head><body><!--iconCls：图标disabled：禁用样式 依然有点击事件plain：简洁样式size:按钮的大小(small,large)iconAlign：图标位置('left','right','top','bottom')data-options="selected:true" ：选中--><div style="margin: 10px;"><a href="#" class="easyui-linkbutton" iconCls="icon-ok">xx</a><a href="#" class="easyui-linkbutton" iconCls="icon-ok" disabled="true">xx</a></div><div style="margin: 10px;"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true">简洁样式1</a><a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true">简洁样式2</a></div><div style="margin: 10px;"><a href="#" class="easyui-linkbutton" iconCls="icon-large-clipart" size="small">小图标</a><a href="#" class="easyui-linkbutton" iconCls="icon-large-clipart" size="large" iconAlign="top">大图标</a></div><!-- 可多选 --><div style="margin: 10px;"><a href="#" class="easyui-linkbutton" toggle="true" data-options="selected:true">1</a><a href="#" class="easyui-linkbutton" toggle="true">2</a><a href="#" class="easyui-linkbutton" toggle="true">3</a><a href="#" class="easyui-linkbutton" toggle="true">4</a></div><!-- 单选 --><div style="margin: 10px;"><a href="#" class="easyui-linkbutton" toggle="true" group="g1">1</a><a href="#" class="easyui-linkbutton" toggle="true" group="g1">2</a><a href="#" class="easyui-linkbutton" toggle="true" group="g1">3</a><a href="#" class="easyui-linkbutton" toggle="true" group="g1">4</a></div><!-- 只有c1-c8 --><div style="margin:20px 0"><a href="#" class="easyui-linkbutton c1" style="width:120px">Button1</a><a href="#" class="easyui-linkbutton c2" style="width:120px">Button2</a><a href="#" class="easyui-linkbutton c3" style="width:120px">Button3</a><a href="#" class="easyui-linkbutton c4" style="width:120px">Button4</a><a href="#" class="easyui-linkbutton c5" style="width:120px">Button5</a><a href="#" class="easyui-linkbutton c6" style="width:120px">Button6</a><a href="#" class="easyui-linkbutton c7" style="width:120px">Button7</a><a href="#" class="easyui-linkbutton c8" style="width:120px">Button8</a><a href="#" class="easyui-linkbutton c9" style="width:120px">Button9</a></div></body>
</html>运行效果：
如何自定义LinkButton插件？？
panel基础容器
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>panel基础容器</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入easyui颜色样式 --><link rel="stylesheet" type="text/css" href="../easyui/themes/color.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">//$.fn.panel.defaults.title = "修改标题";$.fn.panel.defaults.loadingMessage ="加载中...";$(function(){ })</script><style type="text/css">.myPanel{position: absolute;}</style></head><body><!--注意panel只能在div中使用，因为div是块元素(div,h1,p) 行内元素(span,a)minimizable="true" 最小化maximizable="true" 最大化closable="true" 关闭去掉title之后，panel导航窗就不会显示！！loadingMessage:加载信息href:引入另一个页面body中的内容 不会引入js中内容所以自然不会有js中的效果fit="true" 自动填充父容器--><div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"title="标题" iconCls="icon-save" collapsible="true"minimizable="true"maximizable="true"closable="true"data-options="tools:'#tt'"href="04_linkbutton按钮.html"left="100px"cls="myPanel">panel是一个基础容器</div><div id="tt"><a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a><a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a><a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a><a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a></div></body>
</html>运行效果： (注意：这里我的href里面也就是容器里面包含了另外一个页面的效果哦~~)
panel基础容器属性
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>属性</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入easyui颜色样式 --><link rel="stylesheet" type="text/css" href="../easyui/themes/color.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><!--方式1： <标签 属性名="属性值" 属性名="属性值"...>属性值：只能写字符串(里面不能是json，也是不能是方法)--><div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"title="标题" iconCls="icon-save" collapsible="true">panel是一个基础容器</div><br /><!--方式2： data-options="属性名:属性值,属性名:属性值,..."--><div class="easyui-panel" style="padding:10px;width:400px;"data-options="title:'右上角工具',iconCls:'icon-save',tools:[{iconCls:'icon-save',handler:function(){alert('save');}},{iconCls:'icon-remove',handler:function(){alert('delete');}}]" >panel是一个基础容器</div><br /><br /><!-- 方式3:混用 --><div class="easyui-panel" iconCls="icon-ok" data-options="title:'混用'" style="padding:10px;width:400px;">panel是一个基础容器</div></body>
</html>运行效果：
panel基础容器方法：
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>方法</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入easyui颜色样式 --><link rel="stylesheet" type="text/css" href="../easyui/themes/color.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">$(function(){/*元素.组件() --> 创建组件元素.组件({key:value,key:value}) --> 创建组件，加上相应的属性元素.组件("方法名",...) --> 调用组件方法*/$("#ctBtn").on("click",function(){$("#myPanel").panel("setTitle","标题修改了");})$("#refreshBtn").on("click",function(){$("#myPanel").panel("refresh","/04_linkbutton_属性.html");})$("#openBtn").on("click",function(){$("#myPanel").panel("open");})$("#closeBtn").on("click",function(){$("#myPanel").panel("close");})})</script></head><body><a id="ctBtn" href="javascript:;" class="easyui-linkbutton">修改title</a><a id="refreshBtn" href="javascript:;" class="easyui-linkbutton">刷新</a><a id="openBtn" href="javascript:;" class="easyui-linkbutton">open</a><a id="closeBtn" href="javascript:;" class="easyui-linkbutton">close</a><div id="myPanel" class="easyui-panel" href="04_linkbutton按钮.html"title="标题" iconCls="icon-ok" style="padding:10px;width:400px;height:280px;">panel是一个基础容器</div></body>
</html>运行效果：
tree树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>tree</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入easyui颜色样式 --><link rel="stylesheet" type="text/css" href="../easyui/themes/color.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">$(function(){$("#tt").tree({url:'../json/tree_data.json',animate:true,//把点击的节点交给我们onClick:function(node){if(node.url){//代表是子菜单console.table(node.text,node.url)}}})})</script></head><body><ul id="tt"></ul></body>
</html>运行效果：
Menu菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令。
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>menu</title><!-- easyui样式支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><!-- easyui图标支持 --><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><!-- 引入easyui颜色样式 --><link rel="stylesheet" type="text/css" href="../easyui/themes/color.css"><!-- 引入jquery --><script type="text/javascript" src="../easyui/jquery.min.js"></script><!-- easyui功能支持 --><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><script type="text/javascript">$(function(){//绑定页面的右键菜单事件$(document).bind('contextmenu',function(e){e.preventDefault(); //阻止事件冒泡$("#mm").menu("show",{ /*调用'show'方法显示菜单*/left: e.pageX,top: e.pageY});});})</script></head><body><div id="mm" class="easyui-menu" style="width:120px;"><div onclick="alert('1')">New</div><div><span>Open</span><div style="width:150px;"><div data-options="iconCls:'icon-ok'"><b>Word</b></div><div data-options="iconCls:'icon-ok'">Excel</div><div data-options="iconCls:'icon-ok'">PowerPoint</div></div></div><div data-options="iconCls:'icon-save'">Save</div><div class="menu-sep"></div><!--分割线--><div>Exit</div></div></body>
</html>运行效果：
更多使用可参考EasyUI文档来使用，文档上使用方法很清楚的哦~~
点击进入EasyUI教程