Jqueryui+easyui+easywidgets做的后台界面

 

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 = "&lt;";
            }
            
else {
                document.getElementById(
"LeftFrame").style.display = "none";
                document.getElementById(
"V_Sep").innerHTML = "&gt;";
            }
        }
    
</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>
                                    
<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>
                                    
<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>
                                    
<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>
                                    
<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>
                                    
<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>
                                    
<target="mainFrame" style="color: #0000ff" href="#">个人设置</a></h3>
                                
<div class="h3_cat">
                                    
<div class="shadow">
                                        
<div class="shadow_border">
                                            
<ul>
                                                
<li><target="mainFrame" href="#">个人资料</a> </li>
                                                
<li><target="mainFrame" href="#">基本设置</a> </li>
                                                
<li><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>
                                    
<target="mainFrame" href="#">项目台账</a></h3>
                            
</div>
                            
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                                
<h3>
                                    
<target="mainFrame" href="#">项目WBS</a></h3>
                                
<div class="h3_cat">
                                    
<div class="shadow">
                                        
<div class="shadow_border">
                                            
<ul>
                                                
<li><target="mainFrame" href="#">子项</a> </li>
                                                
<li><target="mainFrame" href="#">单体设备</a> </li>
                                                
<li><target="mainFrame" href="#">专题设计</a> </li>
                                                
<li><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>
                                    
<target="mainFrame" href="#">项目任务</a></h3>
                            
</div>
                            
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
                                
<h3>
                                    
<target="mainFrame" href="#">项目岗位成员</a></h3>
                                
<div class="h3_cat">
                                    
<div class="shadow">
                                        
<div class="shadow_border">
                                            
<ul>
                                                
<li><target="mainFrame" href="#">项目岗位</a> </li>
                                                
<li><target="mainFrame" href="#">项目专业</a> </li>
                                                
<li><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;">
                        
&lt;
                    
</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>
复制代码

 全部代码都在这里...

实例请点这里下载 

posted @ 2013-04-13 11:25  牧之丨  阅读(4517)  评论(1编辑  收藏  举报