EasyUi
我們可以在easyui的官網下載它，下載完成后，將文件導入項目，我么需要引入五個重要的文件
<!--EasyUI的核心樣式-->
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
<!--EasyUI的圖標樣式-->
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
<!--jquery的核心JS-->
<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
<!--jquery EasyUI的核心JS-->
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
我們首先使用easyui實現一個小的對話框：
<div class="easyui-dialog" title="對話" style="width: 300px;height: 300px;">
你好
</div>
實現的效果：
Parser 解析器：Parser 解析器是專門解析渲染各種 UI 組件了，一般來說，我們並不需要使用 它即可自動完成 UI 組件的解析工作。當然，有時可能在某些環境下需要手動 解析的情況。 手動解析一般是使用 class 的情況下有效，比如設置 class="easyui-dialog"。默認解析器是打開的 如果設置為 false 此時組件不被解析，樣式就會丟失！
解析指定 ui 組件解析時，必須要設置父類容器才可以解析到。
<script type="text/javascript"> //關閉解析 $.parser.auto=false; //解析指定節點 $(function(){ $.parser.parse("#dialog1"); }) </script>
easyui-draggable 拖動組件，具有這個屬性的元素都可以被拖動。
$("#draggable").draggable({
//edge:500
//axis:"h", // 縱軸v 橫軸 h
//disabled:false,//是否可以進行拖動
//deltaX:200,
revert:true, //拖動停止時返回起始位置
handle:"#zt"
//當然也可以在這里面定義事件
//true時 拖動執行 false 時取消拖動
onBeforeDrag:function(e){
alert("返回true時,在拖動前觸發該事件..");
return true; },
//拖動時觸發
onStartDrag:function(e){
alert("拖動時觸發。。。");
},
//拖動停止時觸發
onStopDrag:function(e){
alert("拖動停止時觸發！");
}
});
easyui-resizable 可調整大小
<div id="rr1" class="easyui-resizable" dataoptions="maxWidth:300,maxHeight:500" style="width:100px; height:100px;background-color: red">
這里是可調整大小區域
</div>
maxWidth ， maxHeight 可用於限定大小！
easyui-linkbutton 按鈕組件
$("#btn").linkbutton({
iconCls:"icon-search"
});
$("#btn").linkbutton('disable');
easyui-panel 面板組件
collapsible boolean 定義是否顯示可折疊按鈕。 false
minimizable boolean 定義是否顯示最小化按鈕。 false
maximizable boolean 定義是否顯示最大化按鈕。 false
closable boolean 定義是否顯示關閉按鈕。
$("#p").panel({
iconCls:"icon-help",
/*width:800,
height:400,*/
/*fit:true, // 子容器自適應父容器的大小*/
border:true,
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
tools:[
{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}
],
collapsed:true, // 默認面板折疊
href:"js/data.json",
loadingMessage:"正在加載中...",
extractor:function(data){
// 解析json格式的數據
data = eval("("+data+")");
console.log(data);
var html = "姓名：<input type='text' value='"+data.uname+"'/>";
return html;
},
onExpand:function(){
alert("數據加載完畢！");
}
});
easyui-tabs 選項卡
<body>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;" href="js/data.json">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
</body>
<script type="text/javascript">
$("#tt").tabs({
plain:false, // 如果設置為true，將不顯示面板的背景
fit:true, // 自適應父容器大小
tools:[{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},{
iconCls:'icon-save',
handler:function(){
alert('保存')
}
}],
toolPosition:"left",
tabPosition:"top",
headerWidth:300,
tabHeight:50
});
</script>
easyui-accordion 手風琴組件
<body>
<div id="aa" class="easyui-accordion" style="width:150px;height:400px;" animate=true>
<div title="學生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">學生信息</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">學生學分</a>
</div>
<div title="教師管理" data-options="iconCls:'icon-tip'" style="padding:10px;">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教師信息</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教師績效</a>
</div>
<div title="專業管理" data-options="iconCls:'icon-tip'">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">數學專業</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">計算機專業</a>
</div>
<div title="系統管理" data-options="iconCls:'icon-tip'">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">賬戶管理</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密碼</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分類</a>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">刪除分類</a>
</div>
</div>
</body>
easyui-layout 布局組件
//此處在body中添加class easyui-layout 然后在創建五個div，分別對應不同的位置，可根據自己的需要刪除添加div
<body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;" border=false></div> <div data-options="region:'south',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:'菜單導航欄',split:true" border=false style="width:170px;"></div> <div data-options="region:'center'" style="padding:5px;background:#eee;"></div> </body>
easyui-layout，tabs，accordions聯合組成的簡單頁面
<body class="easyui-layout" > <!--上面 logo start --> <div data-options="region:'north',split:true" style="height:100px;" border=false> <img src="img/logo.png" style="height:100px;width: 100%;"/> </div> <!--上面 logo end --> <div data-options="region:'south',split:true" style="height:70px;text-align: center;font-size: 15px;color: gray;"> 上海尚學堂松江校區地址：上海市松江區榮樂東路2369弄45號綠地伯頓大廈2層 咨詢電話：021-67690939 <br /> Copyright 2006-2017 上海尚學堂智能科技有限公司 的icp備案號 （滬ICP備16053543號） </div> <!--<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> --> <!--左邊 菜單導航欄 start--> <div data-options="region:'west',title:'菜單導航欄',split:true" border=false style="width:170px;"> <div id="aa" class="easyui-accordion" fit=true animate=true> <div title="學生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('學生信息','student.html')">學生信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('學生學分','student_score.html')">學生學分</a> </div> <div title="教師管理" data-options="iconCls:'icon-tip'" style="padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教師信息')">教師信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教師績效')">教師績效</a> </div> <div title="專業管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">數學專業</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">計算機專業</a> </div> <div title="系統管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">賬戶管理</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密碼</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分類</a> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">刪除分類</a> </div> </div> </div> <!--左邊 菜單導航欄 end--> <div data-options="region:'center'" style="padding:5px;" border=false> <div id="tt" class="easyui-tabs" fit=true > <div title="主頁" style="padding:20px;"> <h1>歡迎來到XXX系統！！！</h1> </div> </div> </div> </body> <script type="text/javascript"> /** * 打開選項卡 * 判斷選項卡是否存在 exists 表明指定的面板是否存在，'which'參數可以是選項卡面板的標題或索引。 * 不存在 新建選項卡 * 如果存在 選中當前選項卡 select 選擇一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引。 * @param {Object} title */ function openTabs(title,url){ console.log(title); // 判斷選項卡是否存在 var exists = $("#tt").tabs("exists",title); if (exists) { //如果返回true，說明選項卡存在，選中當前選項卡 $("#tt").tabs("select",title); } else { //如果返回false，說明選項卡不存在，新建選項卡 $('#tt').tabs('add',{ title: title, selected: true, closable:true, iconCls:'icon-edit', href:url }); } } /** * 添加新的面板 */ function addPanel() { $("#aa").accordion("add",{ title:"新的面板", selected:false, iconCls:"icon-tip", href:"js/data.json" }); } function removePanel() { $("#aa").accordion("remove","新的面板"); } </script>