jQuery EasyUI Layout是一種基于jQuery的布局框架，今天初次使用Jquery EasyUi，簡單的做了個布局頁面感覺還不錯，給大家分享一下，就是不知道Jquery EasyUi瀏覽器兼容性怎么樣。
最后效果圖如下：
使用Jquery EasyUi開發之前首先要引用Jquery EasyUi的Js和Css文件，引用如下：
<script src="../jquery.min.js" type="text/javascript"></script><script src="../jquery.easyui.min.js" type="text/javascript"></script><link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="../themes/icon.css" rel="stylesheet" type="text/css" />
OK，下面就開始我們的布局。
一、使用布局面板進行整體布局，直接貼代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>LayOut</title><script src="../jquery.min.js" type="text/javascript"></script><script src="../jquery.easyui.min.js" type="text/javascript"></script><link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="../themes/icon.css" rel="stylesheet" type="text/css" /><script language="JavaScript">$(document).ready(function () {});</script><style>.footer {width: 100%;text-align: center;line-height: 35px;}.top-bg {background-color: #d8e4fe;height: 80px;}</style></head><body class="easyui-layout"><div region="north" border="true" split="true" style="overflow: hidden; height: 80px;"><div class="top-bg"></div></div><div region="south" border="true" split="true" style="overflow: hidden; height: 40px;"><div class="footer">版權所有：<a >酷網工作室</a></div></div><div region="west" split="true" title="導航菜單" style="width: 200px;"></div><div id="mainPanle" region="center" style="overflow: hidden;"></div></body></html>以上代碼效果如下（完成局部第一步）：
二、添加左側菜單
左側菜單使用的是jquery easyui的可伸縮面板控件和樹形控件的結合，直接將可伸縮面板控件和樹形控件放到west域中即可，并且編寫點擊事件，代碼如下：
頁面代碼：
<div region="west" split="true" title="導航菜單" style="width: 200px;"><div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;"><div title="博文管理" iconcls="icon-save" style="overflow: auto; padding: 10px;"><ul class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a target="mainFrame" >審核博客</a></span></li><li><span><a href="#">File 12</a></span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span><a href="#">File21</a></span></li></ul></div><div title="新聞管理" iconcls="icon-reload" selected="true" style="padding: 10px;">content2 </div><div title="資源管理">content3 </div></div></div>
Js點擊事件代碼：
<script language="JavaScript">$(document).ready(function () {$('.easyui-accordion li a').click(function () {var tabTitle = $(this).text();var url = $(this).attr("href");addTab(tabTitle, url);$('.easyui-accordion li div').removeClass("selected");$(this).parent().addClass("selected");}).hover(function () {$(this).parent().addClass("hover");}, function () {$(this).parent().removeClass("hover");});function addTab(subtitle, url) {if (!$('#tabs').tabs('exists', subtitle)) {$('#tabs').tabs('add', {title: subtitle,content: createFrame(url),closable: true,width: $('#mainPanle').width() - 10,height: $('#mainPanle').height() - 26});} else {$('#tabs').tabs('select', subtitle);}tabClose();}function createFrame(url) {var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';return s;}function tabClose() {/*雙擊關閉TAB選項卡*/$(".tabs-inner").dblclick(function () {var subtitle = $(this).children("span").text();$('#tabs').tabs('close', subtitle);})$(".tabs-inner").bind('contextmenu', function (e) {$('#mm').menu('show', {left: e.pageX,top: e.pageY,});var subtitle = $(this).children("span").text();$('#mm').data("currtab", subtitle);return false;});}//綁定右鍵菜單事件function tabCloseEven() {//關閉當前$('#mm-tabclose').click(function () {var currtab_title = $('#mm').data("currtab");$('#tabs').tabs('close', currtab_title);})//全部關閉$('#mm-tabcloseall').click(function () {$('.tabs-inner span').each(function (i, n) {var t = $(n).text();$('#tabs').tabs('close', t);});});//關閉除當前之外的TAB$('#mm-tabcloseother').click(function () {var currtab_title = $('#mm').data("currtab");$('.tabs-inner span').each(function (i, n) {var t = $(n).text();if (t != currtab_title)$('#tabs').tabs('close', t);});});//關閉當前右側的TAB$('#mm-tabcloseright').click(function () {var nextall = $('.tabs-selected').nextAll();if (nextall.length == 0) {//msgShow('系統提示','后邊沒有啦~~','error');alert('后邊沒有啦~~');return false;}nextall.each(function (i, n) {var t = $('a:eq(0) span', $(n)).text();$('#tabs').tabs('close', t);});return false;});//關閉當前左側的TAB$('#mm-tabcloseleft').click(function () {var prevall = $('.tabs-selected').prevAll();if (prevall.length == 0) {alert('到頭了，前邊沒有啦~~');return false;}prevall.each(function (i, n) {var t = $('a:eq(0) span', $(n)).text();$('#tabs').tabs('close', t);});return false;});//退出$("#mm-exit").click(function () {$('#mm').menu('hide');})}});以上代碼效果圖：
三、最后點擊菜單時需要在center域顯示點擊后的內容頁面,代碼如下：
<div id="tabs" class="easyui-tabs" fit="true" border="false"><div title="歡迎使用" style="padding: 20px; overflow: hidden;" id="home"><h1>Welcome to jQuery UI!</h1></div></div>
本文已完到此結束。希望本文分享對大家有所幫助。
新聞熱點
疑難解答
