easyui :實現Tab頁面
Jqueryui + easywidgets 實現可拖動個性化頁面
左側類似淘寶商城菜單使用css實現
點擊菜單,在新tab頁中顯示新頁面...
ok.貼代碼:
< head >
< title ></ title >
< link href ="easyui/themes/default/easyui.css" rel ="stylesheet" type ="text/css" />
< link href ="easyui/themes/icon.css" rel ="stylesheet" type ="text/css" />
< script src ="easyui/jquery-1.4.4.min.js" type ="text/javascript" ></ script >
< script src ="easyui/jquery.easyui.min.js" type ="text/javascript" ></ script >
< script src ="js/jquery-ui.min.js" type ="text/javascript" ></ script >
< script src ="js/jquery.easywidgets.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
var EASettings = {
behaviour: {
useCookies: true
},
i18n: {
editText: ' 編輯 ' ,
closeText: ' 關閉 ' ,
extendText: ' 展開 ' ,
collapseText: ' 折疊 ' ,
cancelEditText: ' 取消 '
}
};
var gridWork = {
width: 300 ,
height: 150 ,
fitColumns: true ,
nowrap: false ,
columns: [[
{ field: ' id ' , title: ' 任務編號 ' , width: 80 },
{ field: ' name ' , title: ' 工作名稱 ' , width: 80 , align: ' right ' },
{ field: ' code ' , title: ' 到達日期 ' , width: 80 , align: ' right ' },
{ field: ' status ' , title: ' 當前環節 ' , width: 60 , align: ' center ' }
]]
};
var gridTask = {
width: 300 ,
height: 150 ,
fitColumns: true ,
nowrap: false ,
columns: [[
{ field: ' id ' , title: ' 任務編號 ' , width: 80 },
{ field: ' name ' , title: ' 工作名稱 ' , width: 80 , align: ' right ' },
{ field: ' code ' , title: ' 到達日期 ' , width: 80 , align: ' right ' },
{ field: ' status ' , title: ' 當前環節 ' , width: 60 , align: ' center ' }
]]
};
var gridProj = {
width: 300 ,
height: 150 ,
fitColumns: true ,
nowrap: false ,
columns: [[
{ field: ' id ' , title: ' 項目編號 ' , width: 80 },
{ field: ' name ' , title: ' 項目名稱 ' , width: 160 , align: ' center ' },
{ field: ' status ' , title: ' 項目階段 ' , width: 60 , align: ' center ' }
]]
};
var gridFile = {
width: 300 ,
height: 150 ,
fitColumns: true ,
nowrap: false ,
columns: [[
{ field: ' id ' , title: ' 文檔編號 ' , width: 100 },
{ field: ' name ' , title: ' 文檔名稱 ' , width: 200 , align: ' center ' }
]]
};
$( function () {
InitLeftMenu();
$( ' body ' ).layout();
$.fn.EasyWidgets(EASettings);
$( ' #tWork ' ).datagrid(gridWork);
$( ' #tTask ' ).datagrid(gridTask);
$( ' #tProj ' ).datagrid(gridProj);
$( ' #tFile ' ).datagrid(gridFile);
})
function InitLeftMenu() {
$( ' .my_left_cat_list a ' ).click( function () {
var tabTitle = $( this ).text();
var url = $( this ).attr( " href " );
var frm = $( this ).attr( " target " );
if (url != " # " )
addTab(tabTitle, url, frm);
else
return false ;
});
}
function addTab(subtitle, url, frm) {
if ( ! $( ' #tabs ' ).tabs( ' exists ' , subtitle)) {
$( ' #tabs ' ).tabs( ' add ' , {
title: subtitle,
content: createFrame(url, frm),
closable: true ,
width: $( ' #mainPanle ' ).width() - 10 ,
height: $( ' #mainPanle ' ).height() - 26
});
} else {
$( ' #tabs ' ).tabs( ' select ' , subtitle);
}
}
function createFrame(url, frm) {
var s = ' <iframe name=" ' + frm + ' " scrolling="no" frameborder="0" src=" ' + url + ' " style="width:100%;height:100%;"></iframe> ' ;
return s;
}
function hidleft() {
if (document.getElementById( " LeftFrame " ).style.display == " none " ) {
document.getElementById( " LeftFrame " ).style.display = " block " ;
document.getElementById( " V_Sep " ).innerHTML = " < " ;
}
else {
document.getElementById( " LeftFrame " ).style.display = " none " ;
document.getElementById( " V_Sep " ).innerHTML = " > " ;
}
}
</ script >
< style type ="text/css" >
.my_left_category
{
width : 150px ;
font-size : 12px ;
font-family : arial,sans-serif ;
letter-spacing : 2px ;
}
.my_left_category h1
{
background-image : url(images/1_185326.gif) ;
height : 20px ;
background-repeat : no-repeat ;
font-size : 14px ;
font-weight : bold ;
padding-left : 15px ;
padding-top : 8px ;
margin : 0px ;
color : #FFF ;
}
.my_left_category .my_left_cat_list
{
width : 148px ;
border-color : #3399CC ;
border-style : solid ;
border-width : 0px 1px 1px 1px ;
line-height : 13.5pt ;
}
.my_left_category .my_left_cat_list span
{
margin : 0px ;
padding : 3px 5px 0px 9px ;
cursor : pointer ;
color : #333399 ;
font-weight : bold ;
font-size : 14px ;
line-height : 22px ;
}
.my_left_category .my_left_cat_list span:hover
{
color : #d6290b ;
font-weight : bold ;
font-size : 14px ;
line-height : 22px ;
}
.my_left_category .h2_cat
{
width : 148px ;
height : 26px ;
background-image : url(images/1_185410.gif) ;
background-repeat : no-repeat ;
line-height : 26px ;
font-weight : normal ;
color : #333333 ;
position : relative ;
}
.my_left_category .h2_cat_1
{
width : 148px ;
height : 26px ;
background-image : url(images/1_185458.gif) ;
background-repeat : no-repeat ;
line-height : 26px ;
font-weight : normal ;
color : #333333 ;
position : relative ;
}
.my_left_category a
{
font : 12px ;
text-decoration : none ;
color : #333333 ;
}
.my_left_category a:hover
{
text-decoration : underline ;
color : #000000 ;
}
.my_left_category h3
{
margin : 0px ;
padding : 0px ;
height : 26px ;
font-size : 12px ;
font-weight : normal ;
display : block ;
padding-left : 8px ;
}
.my_left_category h3 span
{
color : #999999 ;
width : 145px ;
float : right ;
}
.my_left_category h3 a
{
line-height : 26px ;
}
.my_left_category .h3_cat
{
display : none ;
width : 204px ;
position : absolute ;
left : 123px ;
margin-top : -26px ;
cursor : auto ;
}
.my_left_category .shadow
{
position : inherit ;
background : url(images/1_185541.gif) left top ;
width : 204px ;
}
.my_left_category .shadow_border
{
position : inherit ;
width : 200px ;
border : 1px solid #959595 ;
margin-top : 1px ;
border-left-width : 0px ;
background : url(images/1_185622.gif) no-repeat 0px 21px ;
background-color : #ffffff ;
margin-bottom : 3px ;
}
.my_left_category .shadow_border ul
{
margin : 0 ;
padding : 0 ;
margin-left : 15px ;
}
.my_left_category .shadow_border ul li
{
list-style : none ;
padding-left : 10px ;
background-image : url(images/1_185704.gif) ;
background-repeat : no-repeat ;
background-position : 0px 8px ;
float : left ;
width : 75px ;
height : 26px ;
overflow : hidden ;
letter-spacing : 0px ;
}
.my_left_category .active_cat
{
z-index : 99 ;
background-position : 0 -25px ;
}
.my_left_category .active_cat h3
{
font-weight : bold ;
}
.my_left_category .active_cat h3 span
{
display : none ;
}
.my_left_category .active_cat div
{
display : block ;
}
#home
{
padding : 5px 0px 5px 0px ;
border : 0px solid #D2E0F2 ;
}
#home .widget-place
{
float : left ;
margin : 0px ;
padding : 0px ;
divst-style : none ; /* border:1px sodivd #CC99CC; */
width : 310px ;
height : auto ;
min-height : 200px ; /* height:400px; */
}
#home .column1
{
margin-left : 4px ;
}
#home .column2
{
margin-left : 5px ;
margin-right : 5px ;
}
#home .widget
{
border : 1px solid #D2E9FF ;
margin-bottom : 5px ;
}
#home .widget-header
{
line-height : 25px ;
background : #E0ECFF ;
}
#home .widget-header a
{
margin-left : 8px ;
text-decoration : none ;
}
.content
{
padding : 5px ;
}
.widget-placeholder
{
border : 1px dashed #FF99CC ;
}
</ style >
</ head >
< body class ="easyui-layout" style ="overflow-y: hidden;" scroll ="no" >
< div id ="v_SplitBar" style ="position: absolute; display: none; z-index: 2;" >
</ div >
< noscript >
< div style ="position: absolute; z-index: 100000; height: 2046px; top: 0px; left: 0px;
width: 100%; background: white; text-align: center;" >
< img src ="images/noscript.gif" alt ='抱歉，請開啟腳本支持！' />
</ div >
</ noscript >
< div region ="north" split ="false" style ="overflow: hidden; height: 35px; background: #E0ECFF repeat-x center 50%;
line-height: 20px; color: #fff; padding: 5px;" >
< b > 綜合管理信息系統2.0 </ b >
</ div >
< div region ="center" style ="background: #F6F6F6; overflow: hidden;" >
< table cellspacing ="0" cellpadding ="0" border ="0" style ="width: 100%; height: 100%" >
< tr >
< td id ="LeftFrame" valign ="top" >
< div class ="my_left_category" style ="padding: 10px;" >
< h1 >
分類導航 </ h1 >
< div class ="my_left_cat_list" >
< span > 個人辦公 </ span >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="F1" href ="#" > 我的工作 </ a ></ h3 >
</ div >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="F2" href ="NewUI.htm" > 我的任務 </ a ></ h3 >
</ div >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="F3" href ="navigate.html" > 我的項目 </ a ></ h3 >
</ div >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="F4" href ="ErrorRes.htm" > 我的日志 </ a ></ h3 >
</ div >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="F5" href ="webos.htm" > 我的文檔 </ a ></ h3 >
</ div >
< div class ="h2_cat" onmouseover ="this.className='h2_cat active_cat'" onmouseout ="this.className='h2_cat'" >
< h3 >
< a target ="mainFrame" style ="color: #0000ff" href ="#" > 個人設置 </ a ></ h3 >
< div class ="h3_cat" >
< div class ="shadow" >
< div class ="shadow_border" >
< ul >
< li >< a target ="mainFrame" href ="#" > 個人資料 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 基本設置 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 信息訂閱 </ a > </ li >
</ ul >
</ div >
</ div >
</ div >
</ div >
<!-- again -->
< span > 項目管理 </ span >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="mainFrame" href ="#" > 項目台賬 </ a ></ h3 >
</ div >
< div class ="h2_cat" onmouseover ="this.className='h2_cat active_cat'" onmouseout ="this.className='h2_cat'" >
< h3 >
< a target ="mainFrame" href ="#" > 項目WBS </ a ></ h3 >
< div class ="h3_cat" >
< div class ="shadow" >
< div class ="shadow_border" >
< ul >
< li >< a target ="mainFrame" href ="#" > 子項 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 單體設備 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 專題設計 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 項目專業 </ a > </ li >
</ ul >
</ div >
</ div >
</ div >
</ div >
< div class ="h2_cat_1" onmouseover ="this.className='h2_cat_1 active_cat'" onmouseout ="this.className='h2_cat_1'" >
< h3 >
< a target ="mainFrame" href ="#" > 項目任務 </ a ></ h3 >
</ div >
< div class ="h2_cat" onmouseover ="this.className='h2_cat active_cat'" onmouseout ="this.className='h2_cat'" >
< h3 >
< a target ="mainFrame" href ="#" > 項目崗位成員 </ a ></ h3 >
< div class ="h3_cat" >
< div class ="shadow" >
< div class ="shadow_border" >
< ul >
< li >< a target ="mainFrame" href ="#" > 項目崗位 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 項目專業 </ a > </ li >
< li >< a target ="mainFrame" href ="#" > 項目部門 </ a > </ li >
</ ul >
</ div >
</ div >
</ div >
</ div >
<!-- again -->
< span > 系統管理 </ span >
</ div >
</ div >
</ td >
< td id ="V_Sep" title ="點此隱藏與顯示左邊" valign ="middle" onmousedown ="hidleft()" style ="cursor: pointer;
height: 100%; width: 1px;background-color: #8DB2E3; border: 1px" >
< div style ="padding: 1px;" >
<
</ div >
</ td >
< td width ="100%" id ="mainPanle" >
< div id ="tabs" class ="easyui-tabs" fit ="true" border ="false" >
< div id ="home" title ="主頁" >
< div class ="widget-place column1" id ="widget-place-1" >
< div class ="widget" >
< div class ="widget-header" >
< strong >< font color ="#CC0000" > 最新消息 </ font ></ strong >
</ div >
< div class ="widget-content content" style ="height: 150px;" >
您沒有未讀信息
< br /> 您有
< br /> 5個工作需要處理
< br /> 15個任務需要處理
< br /> 25個文檔需要處理
</ div >
</ div >
< div class ="widget movable" id ="identifierwidget-3" >
< div class ="widget-header" >
< strong > 我的文檔 </ strong >
</ div >
< div class ="widget-content content" >
< table id ="tFile" >
</ table >
</ div >
</ div >
</ div >
< div class ="widget-place column2" id ="widget-place-2" >
< div class ="widget movable" id ="identifierwidget-2" >
< div class ="widget-header" >
< strong > 我的工作 </ strong >
<!-- <span style="float: right;"><a href="#">more</a></span> -->
</ div >
< div class ="widget-content content" >
< table id ="tWork" >
</ table >
</ div >
</ div >
</ div >
< div class ="widget-place column3" id ="widget-place-3" >
< div class ="widget movable" id ="identifierwidget-4" >
< div class ="widget-header" >
< strong > 我的任務 </ strong >
</ div >
< div class ="widget-content content" >
< table id ="tTask" >
</ table >
</ div >
</ div >
< div class ="widget movable" id ="identifierwidget-5" >
< div class ="widget-header" >
< strong > 我的項目 </ strong >
</ div >
< div class ="widget-content content" >
< table id ="tProj" >
</ table >
</ div >
</ div >
</ div >
< div style ="clear: both;" >
</ div >
</ div >
</ div >
</ td >
</ tr >
</ table >
</ div >
</ body >
全部代碼都在這里...
實例請點這里下載