|
送給大家一個(gè)非常好的后臺(tái)布局模板，本人后來就選擇了這個(gè)模板http://www./ArticleView/kwstu_2014413112321738 私人做程序開發(fā)一直有個(gè)頭疼的問題就是后臺(tái)管理界面，以前一般都是自己用jquery+ps自己設(shè)計(jì)的，效果很一般，很不理想。 今天初次使用Jquery EasyUi，簡(jiǎn)單的做了個(gè)布局頁面感覺還不錯(cuò)，給大家分享一下，就是不知道Jquery EasyUi瀏覽器兼容性怎么樣。 最后效果圖如下：
使用Jquery EasyUi開發(fā)之前首先要引用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，下面就開始我們的布局。 一、使用布局面板進(jìn)行整體布局，直接貼代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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">版權(quán)所有：<a href="http://www.">酷網(wǎng)工作室</a></div>
</div>
<div region="west" split="true" title="導(dǎo)航菜單" style="width: 200px;">
</div>
<div id="mainPanle" region="center" style="overflow: hidden;">
</div>
</body>
</html>
以上代碼效果如下（完成局部第一步）：
二、添加左側(cè)菜單 左側(cè)菜單使用的是jquery easyui的可伸縮面板控件和樹形控件的結(jié)合，直接將可伸縮面板控件和樹形控件放到west域中即可，并且編寫點(diǎn)擊事件，代碼如下： 頁面代碼： <div region="west" split="true" title="導(dǎo)航菜單" 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點(diǎn)擊事件代碼：
<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() {
/*雙擊關(guān)閉TAB選項(xiàng)卡*/
$(".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() {
//關(guān)閉當(dāng)前
$('#mm-tabclose').click(function () {
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close', currtab_title);
})
//全部關(guān)閉
$('#mm-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
$('#tabs').tabs('close', t);
});
});
//關(guān)閉除當(dāng)前之外的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);
});
});
//關(guān)閉當(dāng)前右側(cè)的TAB
$('#mm-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
//msgShow('系統(tǒng)提示','后邊沒有啦~~','error');
alert('后邊沒有啦~~');
return false;
}
nextall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
//關(guān)閉當(dāng)前左側(cè)的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');
})
}
});
以上代碼效果圖：
三、最后點(diǎn)擊菜單時(shí)需要在center域顯示點(diǎn)擊后的內(nèi)容頁面,代碼如下： <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> 本文已完到此結(jié)束。 |
|
|
