easyui总结

1、设置一个区域可拖动的
第一种方法直接用html
<div id="dd" style="100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>

第二种是用jquery方法首先要导入两个库jquery.min.js和jquery.easyui.min.js

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

以上是easyui的自己的样式 也导入进去 不然页面效果不好看

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>

 

$('#dd').draggable({
    handle:'#title',
    revert:true  ---拖动结束后元素返回起始位置
    ...
})
2、设置一个区域可以调整大小
第一种方法直接用html
<div id="rr"
    class="easyui-resizable" 这两个数行一定要加上
    data-options="maxWidth:800,maxHeight:600"
    style="100px;height:100px;border:1px solid #ccc;">
</div>
第二种
$('#rr').resizable({
    maxWidth:800,
    maxHeight:600,
    minWidth:100,
    minHeight:20
})
3、分页pagination
第一种方法直接用html
<div id="pp"
class="easyui-pagination"   设置这个div需要什么功能  pagination代表分页
data-options="total:2000,pageSize:10"   设置总页数2000和每页10  那就是200页
style="background:#efefef;border:1px solid #ccc;"></div>
经过测试每页好像最低就要10条数据
$('#pp').pagination({
    total:200,
    pageSize:10，
    pageList:[10,20,50,100] 这个属性是每页可以显示多少条数据 默认为10 20 50 100 那么的话pageSixe的值只能是这几个值中的一个
    loading:true显示页面正在载入
});
4、搜索框searchbox
$('#ss').searchbox({
    searcher:function(value,name){ //这个方法是当用户点击搜索按钮的时候 会把他选择的搜索选项的名字和输入的值弹出来
    alert(value+name)  搜索的name值就是 之前设置的子选项的name：sports  这个值就是sports
    },
    menu:'#mm', 设置菜单选项是哪个
    prompt:'搜索框的提示语'
})；
<input id="ss" style="300px;"></input> 写一个input输入框给定ID和样式
    <div id="mm" style="120px">  写一个div来设置搜索框里的选项
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>  //下面是子div 你又多少个选项就写多少个div
<div data-options="name:'sports'">Sports News</div>    //iconCls:'icon-ok'设置图标
        <div data-options="name:'item1'">Search Item1</div>
<div data-options="name:'item2',selected:true">Search Item2</div>   //selected:true默认选中状态
<div data-options="name:'item3'">Search Item3</div>
</div>
5、进度条progressbar
<div id="p" class="easyui-progressbar" data-options="value:60" style="400px;"></div>
<div id="p" style="400px;"></div>
$('#p').progressbar({
value: 60 //默认值60
onChange:function(newValue,oldValue){
alert(newValue+"----------"+oldValue);//newValue是获取到的新值 oldValue是设置的初始值
}//当值改变的时候就会触发这个事件
});
var value = $('#p').progressbar('getValue'); //获取到一个新值
$('#p').progressbar('setValue', value); //将获取到的新值设置到进度条中


5、提示框tooltip
//先写一个a标签
<a href="#"style="margin-left:100px; text-decoration:none">点击我</a>
$('#dd').tooltip({
position: 'right',//提示框显示的位置
content: '<span style="color:#fff">This is the tooltip message.</span>',//提示框的内容
trackMouse:true,//允许提示框跟着鼠标移动
})
6、面板panel
<div id="div"></div>
$('#div').panel({
300,
height:200,
iconCls:'icon-ok',//设置图标
left:100,//距离左边像素
top:100,//距离上面像素
fit:true,//自适应富容器大小
border:true,//是否显示面板的边框
content:'内容'//面板的主题内容
collapsible:true,//可以折叠
minimizable:true,//显示最大化
maximizable:true//显示最小化
closable:true//是否显示关闭按钮
href:'路径',
loadingMessage:'正在加载，请稍后。。。'//在加载的时候显示的提示语
method:'post',
tool:[
{iconCls:'icon-add',
handler:function(){alert('add')}
}]//自定义工具栏
})
7、选项卡tabs
<div id="div1">
    <div title="asas">asdsd</div>//这两个div是tab选项卡
        <div title="111s">asdsd</div>
    </div>
$('#div1').tabs({
200,
height:100,
onSelect:function(title){
alert(title);//选中一个tab时就会触发这个事件 弹出选中的tab的title的值
},
tools:[{//自定义工具栏
iconCls:'icon-mini-refresh',//设置工具栏的图标
handler:function(){//当点击工具栏的图标时触发该事件
alert('refresh');    //弹出提示框
$('#div1').tabs('add',{
//当点击工具栏的图标时  就触发添加tab选项卡的事件
title:"title",
content:"content",
closable:true,//是否显示关闭按钮
tools:[{    //定义tab的图标
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
})
}
}]
})
8、分类accordion
<div id="div2">
    <div title="aa">asdsa</div>//这两个div是分类
        <div title="bb">bbbb</div>
    </div>
//以上div设置是固定的和tabs一样  有一个div包裹然后里面写对应的div  你要多少个选项就写多少个div
$('#div2').accordion({
200,
height:150,
border:true,
animate,true,
multiple:true,//同时展开多个
selected:0//设置初始化时默认选中的面板索引号 从0开始0代表第一个
onSelect:function(title,index){
alert(title+"--"+index);//当选中一个面板时 会触发这个事件  弹出选中的面板的索引和标题
}
})
9、菜单menu  只能用标签来创建  加上class
<div id="mm" class="easyui-menu" style="120px;">  大的div包裹起来
<div>New</div>   第一个菜单选项


<div>
<span>Open</span>    第二个菜单选项
<div style="150px;">   如果有子菜单的话 那么就用一个div将该选项的子选项全部包裹起来
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>   最后再用一个div将选项和他的子选项全部包裹起来
</div>


<div data-options="iconCls:'icon-save'">Save</div>   第三个选项
<div class="menu-sep"></div>   第四个选项
<div>Exit</div>
</div>
10、按钮linkbuttton  <a id="linkbtn" href="#">点击我</a>
$('#linkbtn').linkbutton({
iconCls:'icon-save',//设置按钮的图标
text:'点击我'//设置按钮的上面显示的字
toggle:true//
})
11、$('#linkbtn').splitbutton({
menu:'#mm'
})
12、数字微调
<input id="ss" required="required" style="80px;">
$('#ss').numberspinner({
min: 10,
max: 100,
editable: false
});
13、滑动条
$('#ok').slider({
300,
height:10,
mode:'h',
showTip:true,
value:10,
step:1,
rule:[
0,25,50,75,100
]
})
14、窗口window
$('#win').window({
600,
height:400,
modal:true//是否显示模块化窗口  就是当窗口弹出的时候页面其他链接都无效
})
15、dialog弹出框
<div id="dialog" class="easyui-dialog" data-options="iconCls:'icon-save',resizable:true,modal:true" style="500px; height:450px;"></div>
第二种是用jquery方法首先要导入两个库jquery
$('#dialog1').dialog({
300,  对话框的宽度
height:200,  对话框的高度
resizable:true, 是否可以更改大小
modal:true,   是否模块化对话框
buttons:[{   定义对话框下面的按钮 比如保存和取消
text:'确定',
iconCls:'icon-ok',
handler:function(){  点击按钮触发事件
alert("确定");
}
},{
text:'关闭',
iconCls:'icon-save',
handler:function(){
alert("关闭");
}
}],
toolbar:[{  定义对话框左上方的按钮  比如保存和编辑  帮助什么的
text:'编辑',
iconCls:'icon-edit',
handler:function(){   触发事件
alert("编辑");
}
},{
text:'帮助',
iconCls:'icon-help',
handler:function(){
alert("帮助");
}














}]
})
16、消息实体框
1、$.messager.alert("温馨提示","消息",'info',function(){
这个回调函数是在用户点击确定后触发   error  question warning info
});  //这个对话框有ok按钮
2、$.messager.show({
title:'我的消息',
msg:'消息将在5秒后关闭。',
timeout:5000,
showType:'slide'  在页面右下角显示出来
});
3、$.messager.confirm('确认对话框','你确定要删除吗？',function(r){
if(r){
alert("点的是确定");
}else{
alert("点的是取消");
}
})
4、$.messager.prompt('消息提示','请输入你的姓名:',function(v){
if(v){
alert("你输入的姓名是："+v);
}
});
5、$.messager.progress({
title:'aaaa',
msg:'系统正在注销...',
interval:500
})
17、combo0box
记载远程数据到下拉列表
<input type="text" id="className" class="easyui-combobox" data-options="valueField:'id',textField:'className'"/>
$.ajax({
url:'findClass',
dataType:'json',
type:'post',
success:function(data){
var result =eval(data);
$('#className').combobox('loadData',result);
}
});
$('#className').combobox("getValue");获取的是用户选择的选型的ID
$('#className').combobox("getText");获取的是用户选择的选型的文本值


18、回车事件
js写法
document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==27){ // 按 Esc
            //要做的事情
        }
        if(e && e.keyCode==113){ // 按 F2
            //要做的事情
        }
        if(e && e.keyCode==13){ // enter 键
            //要做的事情
            onPageInit(1);
            }
        };


jquery写法
$(function(){
document.onkeydown = function(e){
var ev = document.all ? window.event : e;
if(ev.keyCode==13) {
$('#FormId).submit();//处理事件
}
}
});
19、鼠标右击指定元素或者区域弹出菜单
js写法
document.getElementById("youji").oncontextmenu=youjiEvent;//指定这个元素  给他绑定右击事件
function youjiEvent(){//鼠标右击时显示菜单
$('#mm').menu('show', {
left: x,
hideOnUnhover:false, //鼠标移走时  菜单不消失
top: y,
onClick:function(item){
alert(item.name);
}
});
return false;//屏蔽网页本身的右击效果
}
网页代码如下
<div id="mm" class="easyui-menu" style="120px;">
<div data-options="name:'new'">New</div>


<div>
<span>Open</span>
<div style="150px;">
<div data-options="name:'world'"><b>Word</b></div>
<div data-options="name:'excel'">Excel</div>
<div data-options="name:'ppt'">PowerPoint</div>
</div>
</div>


<div data-options="name:'save',iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div data-options="name:'exit'">Exit</div>
</div>
    //鼠标右击的区域
    <div id="youji" style="200px; height:200px; </div>

jquery写法
$(function(){
$('#youji').mousedown(function(e){
if(e.which==1){
alert("这是左击事件");

}else if(e.which == 2){
alert("这是中击事件");
}else{
alert("这是右击事件");
return false;//屏蔽不掉网页本身的右击事件
}
});
})
20、获取到鼠标在页面上点击时的xy坐标
js写法
var x,y;
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY}; 
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
y:ev.clientY + document.body.scrollTop - document.body.clientTop 
}; 
}
function mouseMove(ev){
ev = ev || window.event; 
var mousePos = mousePosition(ev); 
x =  mousePos.x; 
y =  mousePos.y; 
}
document.onmousedown = mouseMove;