easyUI API（version 1.5）

不分先后，只做記錄。

 

jquery+easyui培訓文檔下載地址：

 鏈接: https://pan.baidu.com/s/1dFgFXk9 密碼: jj5d

 

 1 easyui-draggable（拖動）

兩種寫法：

<div id="dd" class="easyui-draggable"

     data-options="handle:'#move',revert:'true',cursor:'crosshair',axis:'v'" style="width:100px;height:100px;">
    <div id="move" style="background:#7097cc;">ys_draggable </div> </div> 

<div id="dd" style="width:100px;height:100px;"> 
<div id="title" style="background:#ccc;">title</div> 
</div> 

$('#dd').draggable({ 
handle:'#title' 
}); 

 Demo可參考：http://www.jeasyui.net/demo/521.html

 2 easyui-droppable(放置)
兩種寫法：

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div> 

<div id="dd" style="width:100px;height:100px;"></div> 

$('#dd').droppable({ 
accept:'#d1,#d3' 
}); 

Demo可參考：http://www.jeasyui.net/demo/523.html

 3 easyui-resizable (調整大小)

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div> 

<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 
}); 

Demo可參考：http://www.jeasyui.net/demo/551.html

 4 easyui-pagination（分頁）

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div> 

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

$('#pp').pagination({ 
total:2000, 
pageSize:10 
}); 

Demo可參考：http://www.jeasyui.net/demo/377.html

 5 easyui-searchbox（搜索框）

<script type="text/javascript"> 
function qq(value,name){ 
alert(value+":"+name) 
} 
</script> 

<input id="ss" class="easyui-searchbox" style="width:300px" 
data-options="searcher:qq,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> 

<input id="ss"></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> 

$('#ss').searchbox({ 
searcher:function(value,name){ 
alert(value + "," + name) 
}, 
menu:'#mm', 
prompt:'請輸入值' 
}); 

Demo可參考：http://www.jeasyui.net/demo/552.html

 6 easyui-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 
}); 

Demo可參考：http://www.jeasyui.net/demo/383.html

 7 easyui-tooltip（提示框）

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

<a id="dd" href="javascript:void(0)">Click here</a>

$('#dd').tooltip({    position: 'right',    content: '<span style="color:#fff">This is the tooltip message.</span>',    onShow: function(){        $(this).tooltip('tip').css({            backgroundColor: '#666',            borderColor: '#666'        });    }});

Demo可參考：http://www.jeasyui.net/demo/571.html

 8 easyui-panel（面板）

<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>   
</div>  

<div id="p" style="padding:10px;">    
    <p>panel content.</p>    
    <p>panel content.</p>    
</div>    
   
$('#p').panel({    
  width:500,    
  height:150,    
  title: 'My Panel',    
  tools: [{    
    iconCls:'icon-add',    
    handler:function(){alert('new')}    
  },{    
    iconCls:'icon-save',    
    handler:function(){alert('save')}    
  }]    
}); 

Demo可參考：http://www.jeasyui.net/demo/380.html

 9 easyui-tabs（選項卡）

<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>  

$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
});  

Demo可參考：http://www.jeasyui.net/demo/396.html

 10 easyui-accordion（分類）

<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>  

$('#aa').accordion({    
    animate:false   
});  

Demo可參考：http://www.jeasyui.net/demo/482.html

 11 easyui-layout（布局）

<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>

<body class="easyui-layout">   
    <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>   
</body>  

<body class="easyui-layout">   
    <div data-options="region:'north'" style="height:100px"></div>   
    <div data-options="region:'center'">   
        <div class="easyui-layout" data-options="fit:true">   
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>   
            <div data-options="region:'center'"></div>   
        </div>   
    </div>   
</body>  

<body class="easyui-layout">   
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>   
    <div data-options="region:'center',href:'center_content.php'" ></div>   
</body>  

Demo可參考：http://www.jeasyui.net/demo/529.html

 12 easyui-menu（菜單）

<div id="mm" class="easyui-menu" style="width:120px;">   
    <div>New</div>   
    <div>   
        <span>Open</span>   
        <div style="width:150px;">   
            <div><b>Word</b></div>   
            <div>Excel</div>   
            <div>PowerPoint</div>   
        </div>   
    </div>   
    <div data-options="iconCls:'icon-save'">Save</div>   
    <div class="menu-sep"></div>   
    <div>Exit</div>   
</div>  

$('#mm').menu({    
    onClick:function(item){    
        //...    
    }    
}); 

$('#mm').menu('show', {    
  left: 200,    
  top: 100    
});  

Demo可參考：http://www.jeasyui.net/demo/537.html

 13 easyui-linkbutton（按鈕）

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>  

<a id="btn" href="#">easyui</a>    
$('#btn').linkbutton({    
    iconCls: 'icon-search'   
});

Demo 可參考：http://www.jeasyui.net/demo/367.html

 14 easyui-menubutton（菜單按鈕） 15 easyui-splitbutton（分割按鈕） 16 easyui-switchbutton（開關按鈕） 17 easyui-validatebox（驗證框） 18 easyui-textbox（文本框） 19 easyui-passwordbox（密碼框） 20 easyui-combobox（下拉列表框） 21 easyui-combotree（樹形下拉框） 22 easyui-combogrid（數據表格下拉框） 23 easyui-combotreegrid（數型表格下拉框） 24 easyui-numberbox（數值輸入框） 25 easyui-datebox（日期輸入框） 26 easyui-datetimebox（日期時間輸入框） 27 easyui-datetimespinner（日期時間微調框） 28 easyui-calendar（日歷） 29 easyui-numberspinner（數字微調） 30 easyui-slider（滑動條） 31 easyui-filebox（文件框） 32 easyui-window（窗口） 33 easyui-dialog（對話框窗口） 34 easyui-datagrid（數據表格） 35 easyui-datalist（數據列表） 36 easyui-propertygrid（屬性表格） 37 easyui-tree（樹） 38 easyui-treegrid（樹形表格）