第一種方法直接用html
<div id="dd" style="width: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 ---拖動結束後元素返回起始位置
...
})第一種方法直接用html
<div id="rr"
class="easyui-resizable" 這兩個數行一定要加上
data-options="maxWidth:800,maxHeight:600"
style="width:100px;height:100px;border:1px solid #ccc;">
</div>$('#rr').resizable({
maxWidth:800,
maxHeight:600,
minWidth:100,
minHeight:20
})第一種方法直接用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>$('#pp').pagination({
total:200,
pageSize:10，
pageList:[10,20,50,100] 這個屬性是每頁可以顯示多少條數據 默認爲10 20 50 100 那麼的話pageSixe的值只能是這幾個值中的一個
loading:true顯示頁面正在載入
});$('#ss').searchbox({
searcher:function(value,name){ //這個方法是當用戶點擊搜索按鈕的時候 會把他選擇的搜索選項的名字和輸入的值彈出來
alert(value+name) 搜索的name值就是 之前設置的子選項的name：sports 這個值就是sports
},
menu:'#mm', 設置菜單選項是哪個
prompt:'搜索框的提示語'
})；<input id="ss" style="width:300px;"></input> 寫一個input輸入框給定ID和樣式
<div id="mm" style="width: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="width:400px;"></div>
<div id="p" style="width: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); //將獲取到的新值設置到進度條中//先寫一個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,//允許提示框跟着鼠標移動
})<div id="div"></div>$('#div').panel({
width: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')}
}]//自定義工具欄
})<div id="div1">
<div title="asas">asdsd</div>//這兩個div是tab選項卡
<div title="111s">asdsd</div>
</div>$('#div1').tabs({
width: 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({
width:200,
height:150,
border:true,
animate,true,
multiple:true,//同時展開多個
selected:0//設置初始化時默認選中的面板索引號 從0開始0代表第一個
onSelect:function(title,index){
alert(title+"--"+index);//當選中一個面板時 會觸發這個事件 彈出選中的面板的索引和標題
}
})<div id="mm" class="easyui-menu" style="width:120px;"> 大的div包裹起來
<div>New</div> 第一個菜單選項
<div>
<span>Open</span> 第二個菜單選項
<div style="width: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="width:80px;">$('#ss').numberspinner({
min: 10,
max: 100,
editable: false
});$('#ok').slider({
width:300,
height:10,
mode:'h',
showTip:true,
value:10,
step:1,
rule:[
0,25,50,75,100
]
})14、窗口window
$('#win').window({
width:600,
height:400,
modal:true//是否顯示模塊化窗口 就是當窗口彈出的時候頁面其他鏈接都無效
})15、dialog彈出框
<div id="dialog" class="easyui-dialog" data-options="iconCls:'icon-save',resizable:true,modal:true" style="width:500px; height:450px;"></div>第二種是用jquery方法首先要導入兩個庫jquery
$('#dialog1').dialog({
width: 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
})記載遠程數據到下拉列表
<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="width:120px;">
<div data-options="name:'new'">New</div><div>
<span>Open</span>
<div style="width: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 id="youji" style="width:200px; height:200px; background-color:#1621E5"></div>$(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;