easyui
2017-10-10 本文已影响21人
帅哥_刷哥
1.介绍
2.下载
3.web项目引入
<link rel="stylesheet" type="text/css" href="<c:url value="/easyui/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css" href="<c:url value="/easyui/themes/icon.css"/>">
<script type="text/javascript" src="<c:url value="/easyui/jquery.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/easyui/jquery.easyui.min.js"/>"></script>
弹出框代码
<div class="easyui-dialog" style="width:400px;height:200px" data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>
基础布局代码
<script type="text/javascript">
function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}
</script>
<div class="easyui-layout" style="width:400px;height:200px;">
<div region="west" split="true" title="Navigator" style="width:150px;">
<p style="padding:5px;margin:0;">Select language:</p>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
</ul>
</div>
<div id="content" region="center" title="Language" style="padding:5px;">
</div>
</div>
image.png
基础布局代码
<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
<div class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
<label>Search:</label><input></input>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="east" border="false" class="p-right">
</div>
<div region="center" border="false" style="border:1px solid #ccc;">
<div class="easyui-layout" fit="true">
<div region="south" split="true" border="false" style="height:60px;">
<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
</div>
<div region="center" border="false">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2.css
<style>
.p-search{
background:#fafafa;
padding:5px;
border:1px solid #ccc;
border-bottom:0;
overflow:hidden;
}
.p-search input{
width:300px;
border:1px solid #ccc;
background: #fff url('easyui/images/search.png') no-repeat right top;
}
.p-right{
text-align:center;
border:1px solid #ccc;
border-left:0;
width:150px;
background:#fafafa;
padding-top:10px;
}
</style>
3.需要两张图片
说明
下载
使用步骤
定义一个带可折叠功能的面板
<div class="easyui-panel" title="panel"
iconCls="icon-save" collapsible="true"
style="width:500px;height:200px;padding:10px;"></div>
class 类，必须是easyui-panel
title 标题，任意
iconCls 标题前边的图标是否显示
collapsible 标题栏右边是否显示可伸缩按钮
data-options="," 可用于替换iconCls和collapsible属性
iconCls:'icon-save' 替换iconCls属性 标题前边的图标是否显示
collapsible:true 替换collapsible属性 标题栏右边是否显示可伸缩按钮
closable:true 是否显示关闭按钮
minimizable:true, 最小化按钮
maximizable:true 最大化按钮
style 设置控件的宽高间距
定义一个组合框（下拉框）
<input class="easyui-combobox" name="language"
data-options="
url:'combobox_data.json',
valueField:'id',
textField:'text',
panelHeight:'auto',
onSelect:function(record){
alert(record.text)
}" />
class 类，必须是easyui-combobox
name 是起一个名字
data-options 请求后台URL
id,text是json的数据
json数据
[{"id":1,"text":"java"},{"id":2,"text":"python"},{"id":3,"text":"js"}]
可拖动的元素
<div class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
class 指定拖动的类
data-options
style 样式，设置宽高
可变大小的窗口
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
class 指定的类
data-options 设置属性的值
style 设置一些属性
分页组件
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
class 指定的类
data-options
total一共有多少条目
pageSize 一页显示多少条目
style 样式
搜索框
function shuage(value,name){
alert(value+":"+name)
}
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:shuage,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
class="easyui-searchbox" 是搜索框
data-options
searcher 是点击搜索按钮的回调方法
prompt 是输入框中显示的提示内容
menu 是下拉选项框
id="mm" 是下拉展示框的内容
进度条
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
class="easyui-progressbar" 是进度条
data-options
value 进度值
弹出提示框
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
class="easyui-tooltip"
是鼠标悬浮的提示框
title
是显示的内容
选项卡
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
折叠面板分类卡
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
布局
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
去掉style就会占满整个页面
按钮
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
菜单按钮
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
分割按钮菜单
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
