EasyUI框架01——基础学习
生活随笔
收集整理的這篇文章主要介紹了
EasyUI框架01——基础学习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.? EasyUI的準備工作
easyUI作為一個前端框架，其樣式和js是必不可少的。我們要使用它，必須要最少引入兩個css與兩個js文件
link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"><script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script>1.1 在項目中引入easyUI的內容
2. EasyUI的布局組件?layout
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 引入EasyUI的CSS和JS --> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <div id="cc" class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',title:'CRM管理系統',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'系統菜單',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'數據區域'" style="padding:5px;background:#eee;"></div> </div> </body> </html>3. easyUI的分類組件accordion
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 引入EasyUI的CSS和JS --> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="客戶管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;"> <a href="#">客戶管理</a></div> <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;"> </div> <div title="Title3"> </div> </div> </body> </html>4. easyUI的選項卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 引入EasyUI的CSS和JS --> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript">$(function(){$("#btn").click(function(){// 判斷選項卡是否存在:var flag = $("#tt").tabs("exists","客戶管理");if(flag){// 已經存在該選項卡$('#tt').tabs("select","客戶管理");}else{// 不存在該選項卡$('#tt').tabs('add',{ title:'客戶管理', content:'客戶管理數據', closable:true }); }});}); </script> </head> <body> <a href="#" id="btn" class="easyui-linkbutton">按鈕</a> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="數據區域" data-options="closable:true" style="padding:20px;display:none;"> 數據區域 </div> </div> </body> </html>4.1 點擊菜單創建新的選項卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jquery.easyui.min.js"></script><style type="text/css">.menuA{text-decoration :none;}</style><script type="text/javascript">$(function(){$(".menuA").click(function(){var contentText = this.innerHTML;createTab(contentText);return false;});});function createTab(contentText){// 判斷選項卡是否存在:var flag = $("#tt").tabs("exists",contentText);if(flag){// 如果已經存在，讓其被選中$("#tt").tabs("select",contentText);}else{// 如果不存在,創建新的選項卡$('#tt').tabs('add',{ title:contentText, content:contentText, closable:true }); } }</script> </head> <body> <div id="cc" class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',title:'CRM管理系統',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'系統菜單',split:true" style="width:200px;"><div id="aa" class="easyui-accordion" data-options="fit:true"> <div title="客戶管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <a href="customer.html" class="menuA">客戶列表</a></div> <div title="聯系人管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> <a href="linkman.html" class="menuA">聯系人列表</a></div> <div title="拜訪記錄管理" data-options="iconCls:'icon-help'"> <a href="#" class="menuA">拜訪記錄列表</a></div> <div title="統計分析管理" data-options="iconCls:'icon-search'" style="padding:10px;"> <a href="#" class="menuA">統計分析管理</a></div> <div title="系統管理" data-options="iconCls:'icon-ok'"> <a href="#" class="menuA">系統管理</a></div> </div> </div> <div data-options="region:'center',title:''" style="padding:5px;background:#eee;"><div id="tt" class="easyui-tabs" data-options="fit:true"> <div title="數據顯示" style="padding:20px;display:none;"> 數據</div> </div> </div> </div> </body> </html>4.2 選項卡上加載數據
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jquery.easyui.min.js"></script><style type="text/css">.menuA{text-decoration :none;}</style><script type="text/javascript">$(function(){$(".menuA").click(function(){var contentText = this.innerHTML;var url = this.href;alert(url);createTab(contentText,url);// 超鏈接就不跳轉return false;});});function createTab(contentText,url){// 判斷選項卡是否存在:var flag = $("#tt").tabs("exists",contentText);if(flag){// 如果已經存在，讓其被選中$("#tt").tabs("select",contentText);}else{// 如果不存在,創建新的選項卡$('#tt').tabs('add',{ title:contentText, content:createUrl(url), closable:true }); } }function createUrl(url){return "<iframe src='"+url+"' style='width:100%;height:95%;border:none;'></iframe>";}</script> </head> <body> <div id="cc" class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',title:'CRM管理系統',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'系統菜單',split:true" style="width:200px;"><div id="aa" class="easyui-accordion" data-options="fit:true"> <div title="客戶管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <a href="customer.html" class="menuA">客戶列表</a></div> <div title="聯系人管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> <a href="linkman.html" class="menuA">聯系人列表</a></div> <div title="拜訪記錄管理" data-options="iconCls:'icon-help'"> <a href="#" class="menuA">拜訪記錄列表</a></div> <div title="統計分析管理" data-options="iconCls:'icon-search'" style="padding:10px;"> <a href="#" class="menuA">統計分析管理</a></div> <div title="系統管理" data-options="iconCls:'icon-ok'"> <a href="#" class="menuA">系統管理</a></div> </div> </div> <div data-options="region:'center',title:''" style="padding:5px;background:#eee;"><div id="tt" class="easyui-tabs" data-options="fit:true"> <div title="數據顯示" style="padding:20px;display:none;"> 數據</div> </div> </div> </div> </body> </html>注意：這里主要實現是通過內嵌框架iframe來實現的。
總結
以上是生活随笔為你收集整理的EasyUI框架01——基础学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： easyui框架中动态改变表头
- 下一篇： easyui ajax post,实例详