當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQueryEasyUI框架入门

發布時間：2023/12/2 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQueryEasyUI框架入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JQueryEasyUI入門

一、JQueryEasyUI簡介

easyui是一種基于jQuery的用戶界面插件集合。
easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。
easyui節省您網頁開發的時間和規模。
easyui很簡單但功能強大的

二、引入JQueryEasyUI

1??、使用這個框架需要注意：基于對應的JQuery.js
所以需要先引入JQuery.js文件。
2??、需要引入jquery.easyui.min.js
3??、引入國際化的locale的js，中國的
4??、導入默認主題樣式文件
5??、導入圖標CSS文件
【三引入二導入】

<script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js" ></script><script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js" ></script><script type="text/javascript" src="../js/EasyUI/locale/easyui-lang-zh_CN.js" ></script><link href="../js/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="../js/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="../js/zTree_v3/js/jquery.ztree.all.js" ></script>

三、使用布局layout

通過 $.fn.layout.defaults 重寫默認的 defaults。
布局（layout）是有五個區域（北區 north、南區 south、東區 east、西區 west 和中區 center）的容器。中間的區域面板是必需的，邊緣區域面板是可選的。每個邊緣區域面板可通過拖拽邊框調整尺寸，也可以通過點擊折疊觸發器來折疊面板。布局（layout）可以嵌套，因此用戶可建立復雜的布局。

布局可以嵌套、可以依賴div元素和body進行布局。

相對div布局
1??、先定義一個div 然后設置class屬性為easyui-layout進行設置。
2??、在此div中，設置div設置north west center east south 區域，中間區域必須存在。需要設置寬度和高度，不然區域會顯示不全。

2.相對于body布局
1??、在body元素中使用class屬性為easyui-layout
在整個頁面進行布局

3.創建嵌套布局。
請注意，內部布局的西區面板是折疊的。

4.通過 ajax 加載內容。
布局（layout）是基于面板（panel）創建的。各區域面板提供從 URL 動態加載內容的內建支持。使用動態加載技術，用戶可以讓他們的布局頁面更快地顯示。

折疊布局面板
折疊布局面板（Collpase Layout Panel）

$('#cc').layout(); // collapse the west panel $('#cc').layout('collapse','west');

布局選項（Layout Options）
fit boolean 當設置為 true 時，就設置布局（layout）的尺寸適應它的父容器。當在 ‘body’ 標簽上創建布局（layout）時，它將自動最大化到整個頁面的全部尺寸。默認值為 false
通常會設置為true做適應父容器。

四、使用選項卡（標簽頁）

通過 $.fn.tabs.defaults 重寫默認的 defaults。

用法
創建標簽頁（Tabs）

1、通過標記創建標簽頁（Tabs）
從標記創建標簽頁（Tabs）更容易，我們不需要寫任何 JavaScript 代碼。記住把 ‘easyui-tabs’ class 添加到

標記。每個標簽頁面板（tab panel）通過子標記被創建，其用法與面板（panel）一樣。

2、編程創建標簽頁（Tabs）
現在我們編程創建標簽頁（Tabs），我們同時捕捉 ‘onSelect’ 事件。

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

添加新的標簽頁面板（tab panel）

通過迷你工具添加一個新的標簽頁面板（tab panel），迷你工具圖標（8x8）放置在關閉按鈕前。

// 添加一個新的標簽頁面板（tab panel） $('#tt').tabs('add',{title:'New Tab',content:'Tab Body',closable:true,tools:[{iconCls:'icon-mini-refresh',handler:function(){alert('refresh');}}] });

獲取選中的標簽頁（Tab）

// 獲取選中的標簽頁面板（tab panel）和它的標簽頁（tab）對象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相應的標簽頁（tab）對象

通常這個框架用作后臺管理的框架使用，結合屬性菜單控件ztree使用

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Layout布局頁面</title><script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js" ></script><script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js" ></script><script type="text/javascript" src="../js/EasyUI/locale/easyui-lang-zh_CN.js" ></script><link href="../js/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="../js/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="../js/zTree_v3/js/jquery.ztree.all.js" ></script><link rel="stylesheet" href="../js/zTree_v3/css/zTreeStyle/zTreeStyle.css" /><script type="text/javascript"> // 文檔加載后執行$(function(){ // ztree控件var setting ={data: {simpleData: {enable: true}},callback:{onClick:function(event,treeID,treeNode,clickFlag){//alert(treeNode.page);var content ='<div style="width:100%;height:100%;overflow:hidden;">'+'<iframe src="'+treeNode.page+'"scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';if(treeNode.page!=undefined&&treeNode.page!=""){ // 如果選項卡已經打開，選中選項卡if($("#xxkmb").tabs('exists',treeNode.name)){$("#xxkmb").tabs('select',treeNode.name);}else{$("#xxkmb").tabs('add',{title:treeNode.name,content:content,closable:true});}}}}}var zNodes=[{id: 1, pId: 0, name: "常用網站"},{id: 2, pId: 0, name: "父節點二"},{id: 11, pId: 1, name: "百度", page:"http://www.baidu.com"},{id: 12, pId: 1, name: "安誠金融1+1貸",page:"http://www.yijiayidai.com"},{id: 21, pId: 2, name: "二的子節點一"},{id: 22, pId: 2, name: "二的子節點二"}] // 生成屬性菜單var t =$("#ztreeMenu1");$.fn.zTree.init(t, setting, zNodes); // 對選項卡注冊右鍵事件$("#xxkmb").tabs({onContextMenu:function(e,title,index){ // 取消默認的右鍵菜單的顯示e.preventDefault(); // 顯示自定義菜單的顯示$("#mm").menu('show',{left:e.pageX,top:e.pageY});}});});</script></head><body class="easyui-layout"><div data-options="region:'north',title:'后臺管理系統'" style="height: 100px;">北部區域</div><div data-options="region:'west',title:'菜單導航'" style="width: 180px;" ><div class="easyui-accordion" data-options="fit:'true'"><div data-options="title:'基礎菜單'"><ul class="ztree" id="ztreeMenu1"></ul></div><div data-options="title:'系統設置'">面板二</div></div></div><div data-options="region:'center'"><div class="easyui-tabs" data-options="fit:'true'" id="xxkmb"></div></div><div data-options="region:'east'" style="width: 60px;">東部區域</div><div data-options="region:'south'" style="animation-delay: 80px;">南部區域</div><div id="mm" class="easyui-menu" style="width:120px"><div>關閉當前窗口</div><div>關閉其他窗口</div><div class="menu-sep"></div><div data-options="iconCls:'icon-cancel'">關閉所有窗口</div></div></body> </html>

總結

以上是生活随笔為你收集整理的JQueryEasyUI框架入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。