以下是 jQuery Web桌面系统jWebOS js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI实现Web桌面系统jWebOS</title>
<style type="text/css">
<!--
/*重置样式*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul, li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:”;
}
abbr, acronym {
border:0;
}
* {
margin:0;
padding:0
}
/*页面基础样式*/
html {
overflow:hidden;
}
body {
font-size: 12px;
background:#06C url(wallpapers/menglong2.jpg) repeat scroll center center;
font-family: Tahoma, Geneva, sans-serif;
margin:0;
padding:0
}
a {
font-size: 12px;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
.corner {/*只在支持css3的高级浏览器起作用*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 8px #444;
-webkit-box-shadow: 2px 2px 8px #444;
box-shadow:2px 2px 8px #444;
}
.loading {
background:url(images/loading.gif) no-repeat center center
}
/*界面布局样式*/
.powered_by {
width:160px;
height:25px;
line-height:25px;
background:url(images/powered-by.png) no-repeat left center;
color:#CCC;
text-indent:26px;
display:block;
outline:none;
position:absolute;
right:20px;
bottom:60px;
}
/*任务栏样式*/
#taskBar {
width:100%;
height:40px;
line-height:40px;
position:absolute;
right:0;
bottom:0;
}
#leftBtn {
width:100px;
height:40px;
float:left;
display:none;
}
#rightBtn {
width:100px;
height:40px;
float:right;
display:none;
}
#leftBtn a, #rightBtn a {
display:block;
width:100px;
height:40px;
outline:none;
background-image:url(images/lr_btn.png);
background-repeat:no-repeat;
}
#leftBtn a {
background-position:left top;
}
#rightBtn a {
background-position:right top;
}
#leftBtn a:hover {
background-position:left bottom
}
#rightBtn a:hover {
background-position:right bottom
}
#task_lb_wrap {
height:40px;
line-height:40px;
overflow:hidden;
position:relative;
}
#task_lb {
width:auto;
height:auto;
position:absolute;
top:0;
right:0;
}
#task_lb a {
display:inline-block;
outline:none;
width:100px;
height:40px;
background-image:url(images/taskHdBtn.png);
background-repeat:no-repeat;
text-align:center;
line-height:40px;
float:right
}
#task_lb .defaultTab {
background-position:right top;
color:#ccc
}
#task_lb .defaultTab:hover {
background-position:right bottom;
}
#task_lb .selectTab {
background-position:left top;
color:#FFF
}
#task_lb .selectTab:hover {
background-position:left bottom
}
#shizhong_btn {
background:url(images/timer.png) no-repeat center center
}
#weather_btn {
background:url(images/wheather.png) no-repeat center center
}
#sound_btn {
background:url(images/sound_open.png) no-repeat center center
}
#showZm_btn {
background:url(images/show-desktop.png) no-repeat center center
}
#them_btn {
background:url(images/skin.png) no-repeat center center
}
/*侧边浮动栏*/
#lr_bar {
width:73px;
height:auto;
position:absolute;
left:0;
top:30px;
background:url(images/dock_top.png) repeat-y left top;
z-index:90;
-moz-box-shadow: 0px 3px 15px #444;
-webkit-box-shadow: 0px 3px 15px #444;
box-shadow:0px 3px 15px #444;
padding-top:5px;
}
/*开始按钮样式*/
#start_block {
width:73px;
height:56px;
position:absolute;
left:0;
bottom:-56px;
background:url(images/dock_b.png) no-repeat left bottom;
-moz-box-shadow: 0px 5px 15px #444;
-webkit-box-shadow: 0px 5px 15px #444;
box-shadow:0px 5px 15px #444;
}
#start_btn {
display:block;
width:48px;
height:48px;
background:url(images/start-btn.png) no-repeat center bottom;
margin:4px auto 0 auto;
outline:none;
z-index:501;
cursor:pointer;
}
#start_btn:hover {
background-position:center top
}
/*开始菜单样式*/
#start_item {
width:180px;
height:auto;
padding:5px 0;
background: url(images/start_item_bg.png) repeat;
position:absolute;
z-index:500;
left:75px;
bottom:0px;
display:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 5px #444;
-webkit-box-shadow: 2px 2px 5px #444;
box-shadow:2px 2px 5px #444;
}
#start_item .item {
width:100%;
height:auto;
border-top:1px solid #999
}
#start_item .item li {
width:98%;
height:24px;
overflow:hidden;
zoom:-1;
padding:6px 0;
line-height:24px;
margin:0 auto;
color:#FFF;
}
#start_item .item li:hover {
background:url(images/start_item_over.png) repeat-x left bottom;
cursor:pointer
}
#start_item .item li span {
display:inline-block;
width:24px;
height:24px;
background-image:url(images/start_itembtn.png);
background-repeat:no-repeat;
margin:0 10px;
float:left;
}
#start_item .item li b {
width:10px;
height:24px;
background:url(images/item-child.png) no-repeat center center;
display:inline-block;
float:right;
margin-right:10px;
}
#start_item .sitting_btn {
background-position:left -140px;
}
#start_item .help_btn {
background-position:left -44px;
}
#start_item .about_btn {
background-position:left -164px;
}
#start_item .logout_btn {
background-position:left -20px;
}
#start_item .admin {
border-bottom:1px solid #444;
padding:5px 0;
border-top:none;
}
#start_item .item li .adminImg {
border:1px solid #E0E0E0;
background-position:left -92px;
background-color:#FFF;
}
/*默认小工具*/
#default_tools {
width:71px;
height:auto;
overflow:hidden;
zoom:-1;
padding:5px 0;
border-top:1px solid #555;
margin:0 auto;
}
#default_tools span {
width:30px;
height:30px;
display:inline-block;
margin:0 0 0 3px;
cursor:pointer;
float:left;
}
/*默认应用程序*/
#default_app {
width:73px;
height:auto;
padding:5px 0;
position:relative;
}
#default_app li {
width:48px;
height:48px;
overflow:hidden;
margin:3px auto;
padding:6px;
}
#default_app li img {
width:48px;
height:48px;
cursor:pointer;
}
#default_app .btnOver {
background:url(images/default_appbtn_bg.png) no-repeat center center
}
/*重写右键菜单样式*/
.smart_menu_box .smart_menu_a {
color:#333
}
.smart_menu_box .smart_menu_li_separate {
border-bottom:1px solid #d6d5d5;
}
/*窗口样式*/
.windows {
min-width:240px;
min-height:200px;
width:700px;
height:560px;
position:absolute;
display:none;
background-color:#E0E0E0;
}
.win_title {
width:100%;
height:26px;
line-height:26px;
background:#E0E0E0 url(images/titlebar_bg_cur.png) repeat-x left center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.win_title b {
color:#333;
margin-left:10px;
}
.win_title .win_btnblock {
width:auto;
padding:0 5px;
float:right;
height:17px;
margin:4px 3px 0 0;
}
.win_title .win_btnblock a {
display:inline-block;
width:26px;
height:17px;
background-image:url(images/windowBtn.png);
background-repeat:no-repeat;
float:left;
margin:0 1px;
outline:none;
}
.winMaximize {
background-position:right bottom;
}
.winMaximize:hover {
background-position:right top;
}
.winHyimize {
background-position:-26px bottom;
}
.winHyimize:hover {
background-position:-26px top;
}
.winClose {
background-position:-52px top;
}
.winClose:hover {
background-position:-52px bottom;
}
.winMinimize {
background-position:left bottom;
}
.winMinimize:hover {
background-position:left top;
}
.winframe {
width:100%;
height:auto;
margin:0 0 0 3px;
padding:0
}
/*桌面图标*/
#deskIcon {
width:100%;
height:auto;
overflow:hidden;
zoom:-1;
position:relative;
}
.desktop_icon {
width:86px;
height:88px;
cursor:pointer;
margin-left:-1000px;
text-align:center;
}
.desktop_icon span {
display:block;
}
.desktop_icon .icon {
width:50px;
height:50px;
margin:5px auto;
}
.desktop_icon .icon img {
width:50px;
height:50px;
}
.desktop_icon .text {
display:inline-block;
width:auto;
height:22px;
line-height:22px;
text-align:center;
color:#fff;
background:url(images/iconTextbg.png) no-repeat left center;
position:relative;
padding-left:10px;
margin-right:10px;
}
.desktop_icon .right_cron {
width:10px;
height:22px;
position:absolute;
right:-10px;
top:0;
background:url(images/iconTextbg_right.png) left center no-repeat;
}
.desktop_icon_over {
background:url(images/icon_over.png) no-repeat center center;
}
-->
</style>
<link rel="stylesheet" href="jsLib/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="jsLib/jquery-smartMenu/css/smartMenu.css" />
<script type="text/javascript" src="jsLib/jquery-1.6.2.js"></script>
<script type="text/javascript" src="jsLib/myLib.js"></script>
<script type="text/javascript" src="jsLib/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jsLib/jquery.winResize.js"></script>
<script type="text/javascript" src="jsLib/jquery-smartMenu/js/mini/jquery-smartMenu-min.js"></script>
<script type="text/javascript">
//声明desktop空间,封装相关操作
myLib.NS("desktop");
myLib.desktop={
winWH:function(){
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
desktopPanel:function(){
$('body').data('panel',{
'taskBar':{
'_this':$('#taskBar'),
'task_lb':$('#task_lb')
},
'lrBar':{
'_this':$('#lr_bar'),
'default_app':$('#default_app'),
'start_block':$('#start_block'),
'start_btn':$('#start_btn'),
'start_item':$('#start_item'),
'default_tools':$('#default_tools')
},
'deskIcon':{
'_this':$('#deskIcon'),
'icon':$('li.desktop_icon')
},
'powered_by':$('a.powered_by')
});
},
getMydata:function(){
return $('body').data();
},
mouseXY:function(){
var mouseXY=[];
$(document).bind('mousemove',function(e){
mouseXY[0]=e.pageX;
mouseXY[1]=e.pageY;
});
return mouseXY;
},
contextMenu:function(jqElem,data,menuName,textLimit){
var _this=this
,mXY=_this.mouseXY();
jqElem
.smartMenu(data,{
name: menuName,
textLimit:textLimit,
afterShow:function(){
var menu=$("#smartMenu_"+menuName);
var myData=myLib.desktop.getMydata(),
wh=myData.winWh;//获取当前document宽高
var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
if(menuXY.top>wh['h']-menuH){
menu.css('top',mXY[1]-menuH-2);
}
if(menuXY.left>wh['w']-menuW){
menu.css('left',mXY[0]-menuW-2);
}
}
});
$(document.body).click(function(event){
event.preventDefault();
$.smartMenu.hide();
});
}
}
//窗口相关操作
myLib.NS("desktop.win");
myLib.desktop.win={
winHtml:function(title,url,id){
return "<div class='windows corner rgba' id="
+id
+"><div class='win_title'><b>"
+title
+"</b><span class='win_btnblock'><a href='#' class='winMinimize' title='最小化'></a><a href='#' class='winMaximize' title='最大化'></a><a href='#' class='winHyimize' title='还原'></a><a href='#' class='winClose' title='关闭'></a></span></div><iframe frameborder='0' name='myFrame_"
+id
+"' id='myFrame_"
+id
+"' class='winframe' scrolling='auto' width='100%' src='"
+url
+"'></iframe></div>";
},
//添加遮障层，修复iframe 鼠标经过事件bug
iframFix:function(obj){
obj.each(function(){
var o=$(this);
if(o.find('.zzDiv').size()<=0)
o.append($("<div class='zzDiv' style='width:100%;height:"+(o.innerHeight()-26)+"px;position:absolute;z-index:900;left:0;top:26px;'></div>"));
})
},
//获取当前窗口最大的z-index值
maxWinZindex:function($win){
return Math.max.apply(null, $.map($win, function (e, n) {
if ($(e).css('position') == 'absolute')
return parseInt($(e).css('z-index')) || 1;
}));
},
findTopWin:function($win,maxZ){
var topWin;
$win.each(function(index){
if($(this).css("z-index")==maxZ){
topWin=$(this);
return false;
}
});
return topWin;
},
//关闭窗口
closeWin:function(obj){
var _this=this,$win=$('div.windows').not(":hidden"),maxZ,topWin;
myLib.desktop.taskBar.delWinTab(obj);
obj.hide('slow',function(){
$(this).remove();
});
//当关闭窗口后寻找最大z-index的窗口并使其出入选择状态
if($win.size()>1){
maxZ=_this.maxWinZindex($win.not(obj));
topWin=_this.findTopWin($win,maxZ);
_this.switchZindex(topWin);
}
},
minimize:function(obj){
var _this=this,$win=$('div.windows').not(":hidden"),maxZ,topWin,objTab;
obj.hide();
//最小化窗口后，寻找最大z-index窗口至顶
if($win.size()>1){
maxZ=_this.maxWinZindex($win.not(obj));
topWin=_this.findTopWin($win,maxZ);
_this.switchZindex(topWin);
}else{
objTab=myLib.desktop.taskBar.findWinTab(obj);
objTab.removeClass('selectTab').addClass('defaultTab');
}
},
//最大化窗口函数
maximizeWin:function(obj){
var myData=myLib.desktop.getMydata(),
wh=myData.winWh;//获取当前document宽高
obj
.css({'width':wh['w'],'height':wh['h']-35,'left':0,'top':0})
.draggable( "disable" )
.resizable( "disable" )
.fadeTo("fast",1)
.find(".winframe")
.css({'width':wh['w']-6,'height':wh['h']-64});
},
//还原窗口函数
hyimizeWin:function(obj){
var myData=obj.data(),
winLocation=myData.winLocation;//获取窗口最大化前的位置大小
obj.css({'width':winLocation['w'],'height':winLocation['h'],'left':winLocation['left'],'top':winLocation['top']})
.draggable( "enable" )
.resizable( "enable" )
.find(".winframe")
.css({'width':winLocation['w']-6,'height':winLocation['h']-29});
},
//交换窗口z-index值
switchZindex:function(obj){
var myData=myLib.desktop.getMydata()
,$topWin=myData.topWin
,$topWinTab=myData.topWinTab
,curWinZindex=obj.css("z-index")
,maxZ=myData.maxZindex
,objTab=myLib.desktop.taskBar.findWinTab(obj);
if(!$topWin.is(obj)){
obj.css("z-index",maxZ);
objTab.removeClass('defaultTab').addClass('selectTab');
$topWin.css("z-index",curWinZindex);
$topWinTab.removeClass('selectTab').addClass('defaultTab');
this.iframFix($topWin);
//更新最顶层窗口对象
$('body').data("topWin",obj).data("topWinTab",objTab);
}
},
//新建窗口实例
newWin:function(options){
var _this=this;
var myData=myLib.desktop.getMydata(),
wh=myData.winWh,//获取当前document宽高
$windows=$("div.windows"),
curwinNum=myLib._is(myData.winNum,"Number")?myData.winNum:0;//判断当前已有多少窗口
_this.iframFix($windows);
//默认参数配置
var defaults = {
WindowTitle: null,
WindowsId: null,
WindowPositionTop: 'center', /* Posible are pixels or 'center' */
WindowPositionLeft: 'center', /* Posible are pixels or 'center' */
WindowWidth: Math.round(wh['w']*0.6), /* Only pixels */
WindowHeight: Math.round(wh['h']*0.8), /* Only pixels */
WindowMinWidth: 250, /* Only pixels */
WindowMinHeight: 250, /* Only pixels */
iframSrc: null, /* 框架的src路径*/
WindowResizable: true, /* true, false*/
WindowMaximize: true, /* true, false*/
WindowMinimize: true, /* true, false*/
WindowClosable: true, /* true, false*/
WindowDraggable: true, /* true, false*/
WindowStatus: 'regular', /* 'regular', 'maximized', 'minimized' */
WindowAnimationSpeed: 500,
WindowAnimation: 'none'
};
var options = $.extend(defaults, options);
//判断窗口位置，否则使用默认值
var wLeft=myLib._is(options['WindowPositionLeft'],"Number")?options['WindowPositionLeft']:(wh['w']-options['WindowWidth'])/2;
var wTop=myLib._is(options['WindowPositionTop'],"Number")?options['WindowPositionTop']:(wh['h']-options['WindowHeight'])/2;
//给窗口赋予新的z-index值
var zindex=curwinNum+100;
var id="myWin_"+options['WindowsId'];//根据传来的id将作为新窗口id
$('body').data("winNum",curwinNum+1);//更新窗口数量
//判断如果此id的窗口存在，则不创建窗口
if($("#"+id).size()<=0){
//在任务栏里添加tab
myLib.desktop.taskBar.addWinTab(options['WindowTitle'],options['WindowsId']);
//初始化新窗口并显示
$("body").append($(_this.winHtml(options['WindowTitle'],options['iframSrc'],id)));
var $newWin=$("#"+id)
,$icon=$("#"+options['WindowsId'])
,$iconOffset=$icon.offset()
,$fram=$newWin.children(".winframe")
,winMaximize_btn=$newWin.find('a.winMaximize')//最大化按钮
,winMinimize_btn=$newWin.find('a.winMinimize')//最小化按钮
,winClose_btn=$newWin.find('a.winClose')//关闭按钮
,winHyimize_btn=$newWin.find('a.winHyimize');//还原按钮
winHyimize_btn.hide();
if(!options['WindowMaximize']) winMaximize_btn.hide();
if(!options['WindowMinimize']) winMinimize_btn.hide();
if(!options['WindowClosable']) winClose_btn.hide();
//存储窗口最大的z-index值,及最顶层窗口对象
$('body').data({"maxZindex":zindex,"topWin":$newWin});
//判断窗口是否启用动画效果
if(options.WindowAnimation=='none'){
$newWin
.css({"width":options['WindowWidth'],"height":options['WindowHeight'],"left":wLeft,"top":wTop,"z-index":zindex})
.addClass("loading")
.show();
}else{
$newWin
.css({"left":$iconOffset.left,"top":$iconOffset.top,"z-index":zindex})
.addClass("loading")
.show()
.animate({
width: options['WindowWidth'],
height:options['WindowHeight'],
top: wTop,
left: wLeft}, 500);
}
$newWin
.data('winLocation',{
'w':options['WindowWidth'],
'h':options['WindowHeight'],
'left':wLeft,
'top':wTop
})
.find(".winframe")
.css({"width":options['WindowWidth']-6,"height":options['WindowHeight']-29})
//等待iframe加载完毕
//.load(function(){
//调用窗口拖动,参数可拖动的范围上下左右，窗口id和，浏览器可视窗口大小
if(options['WindowDraggable']){
_this.drag([0,0,wh['w']-options['WindowWidth']-10,wh['h']-options['WindowHeight']-35],id,wh);
}
//调用窗口resize,传递最大最小宽度和高度，新窗口对象id，浏览器可视窗口大小
if(options['WindowResizable']){
_this.resize(options['WindowMinWidth'],options['WindowMinHeight'],wh['w']-wLeft,wh['h']-wTop-35,id,wh);
}
//当改变浏览器窗口大小时，更新其拖动和拖曳区域大小
$(window).wresize(function(){
_this.upWinDrag_block($newWin);
_this.upWinResize_block($newWin);
});
//});
//如果有多个窗口，当单击某个窗口，则使此窗口显示到最上面
if(curwinNum){
var $allwin=$("div.windows");
$allwin.bind({
"mousedown":function(event){
_this.switchZindex($(this));
},
"mouseup":function(){
$(this).find('.zzDiv').remove();
}
});
}
//窗口最大化，最小化，及关闭
winClose_btn.click(function(event){
event.stopPropagation();
_this.closeWin($(this).parent().parent().parent());
});
//最大化
winMaximize_btn.click(function(event){
event.stopPropagation();
if(options['WindowStatus']=="regular"){
_this.maximizeWin($(this).parent().parent().parent());
$(this).hide();
winHyimize_btn.show();
options['WindowStatus']="maximized";
}
});
//还原窗口
winHyimize_btn.click(function(event){
event.stopPropagation();
if(options['WindowStatus']=="maximized"){
_this.hyimizeWin($(this).parent().parent().parent());
$(this).hide();
winMaximize_btn.show();
options['WindowStatus']="regular";
}
});
//最小化窗口
winMinimize_btn.click(function(){
_this.minimize($(this).parent().parent().parent());
});
}else{//如果已存在此窗口，判断是否隐藏
var wins=$("#"+id),objTab=myLib.desktop.taskBar.findWinTab(wins);
if(wins.is(":hidden")){
wins.show();
objTab.removeClass('defaultTab').addClass('selectTab');//当只有一个窗口时
myLib.desktop.win.switchZindex(wins);
}
}
},
upWinResize_block:function(win){
//更新窗口可改变大小范围,wh为浏览器窗口大小
var offset=win.offset();
win.resizable( "option" ,{'maxWidth':$(window).width()-offset.left-10,'maxHeight':$(window).height()-offset.top-35})
},
upWinDrag_block:function(win){
var h=win.innerHeight()
,w=win.innerWidth();
//更新窗口可拖动区域大小
win.draggable( "option", "containment", [10,10,$(window).width()-w-10,$(window).height()-h-35] )
},
drag:function(arr,win_id,wh){
var _this=this;
$("#"+win_id)
.draggable({
handle: "#"+win_id+' .win_title',
iframeFix:false,
containment:arr,
delay: 50 ,
distance: 30
})
.bind("dragstart",function(event,ui){
_this.iframFix($(this));
})
.bind( "dragstop", function(event, ui) {
var obj_this=$(this);
var offset=obj_this.offset();
//计算可拖曳范围
_this.upWinResize_block(obj_this);
obj_this
//更新窗口存储的位置属性
.data('winLocation',{
'w':obj_this.width(),
'h':obj_this.height(),
'left':offset.left,
'top':offset.top
})
.find('.zzDiv').remove();
});
$("div.win_title").css("cursor","move");
},
resize:function(minW,minH,maxW,maxH,win_id,wh){
var _this=this;
$("#"+win_id)
.resizable({
minHeight:minH,
minWidth:minW,
containment:'document',
maxWidth:maxW,
maxHeight:maxH
})
.css("position","absolute")
.bind( "resize", function(event, ui) {
var h=$(this).innerHeight(),w=$(this).innerWidth();
_this.iframFix($(this));
//拖曳改变窗口大小，更新iframe宽度和高度，并显示iframe
$(this).children(".winframe").css({"width":w-6,"height":h-29});
})
.bind( "resizestop", function(event, ui) {
var obj_this=$(this);
var offset=obj_this.offset();
var h=obj_this.innerHeight(),w=obj_this.innerWidth();
//更新窗口可拖动区域大小
_this.upWinDrag_block(obj_this);
obj_this
//更新窗口存储的位置属性
.data('winLocation',{
'w':w,
'h':h,
'left':offset.left,
'top':offset.top
})
//删除遮障iframe的层
.find(".zzDiv").remove();
});
}
}
//侧边工具栏
myLib.NS("desktop.lrBar");
myLib.desktop.lrBar={
init:function(){
//读取元素对象数据
var myData=myLib.desktop.getMydata();
var $default_tools=myData.panel.lrBar['default_tools']
,$def_tools_Btn=$default_tools.find('span')
,$start_btn=myData.panel.lrBar['start_btn']
,$start_item=myData.panel.lrBar['start_item']
,$default_app=myData.panel.lrBar['default_app']
,$lrBar=myData.panel.lrBar['_this']
,wh=myData.winWh;
//初始化侧栏位置
var tops=Math.floor((wh['h']-$lrBar.height())/2)-50;
$lrBar.css({'top':tops});
//如果窗口大小改变，则更新侧边栏位置
$(window).wresize(function(){
var tops=Math.floor(($(window).height()-$lrBar.height())/2)-50;
$lrBar.css({'top':tops});
});
//任务栏右边默认组件区域交互效果
$def_tools_Btn.hover(function(){
$(this).css("background-color","#999");
},function(){
$(this).css("background-color","transparent");
});
//默认应用程序区
$default_app
.find('li')
.hover(function(){
$(this).addClass('btnOver');
},function(){
$(this).removeClass('btnOver');
})
.find('img').dblclick(function(){
var title=$(this).attr('title'),wid=$(this).parent().attr('id');
var href= $(this).attr('path');
myLib.desktop.win.newWin({
WindowTitle:title,
iframSrc:href,
WindowsId:wid,
WindowAnimation:'easeInBack'
});
})
.end()
.end()
.sortable({
revert: true
});
//开始按钮、菜单交互效果
$start_btn.click(function(event){
event.preventDefault();
event.stopPropagation()
if($start_item.is(":hidden"))
$start_item.show();
else
$start_item.hide();
});
$("body").click(function(event){
event.preventDefault();
$start_item.hide();
});
}
}
/*----------------------------------------------------------------------------------
//声明任务栏空间，任务栏相关js操作
----------------------------------------------------------------------------------*/
myLib.NS("desktop.taskBar");
myLib.desktop.taskBar={
timer:function(obj){
var curDaytime=new Date().toLocaleString().split(" ");
obj.innerHTML=curDaytime[1];
obj.title=curDaytime[0];
setInterval(function(){obj.innerHTML=new Date().toLocaleString().split(" ")[1];},1000);
},
upTaskWidth:function(){
var myData=myLib.desktop.getMydata()
,$task_bar=myData.panel.taskBar['_this'];
var maxHdTabNum=Math.floor($(window).width()/100);
//计算任务栏宽度
$task_bar.width(maxHdTabNum*100);
//存储活动任务栏tab默认组数
$('body').data("maxHdTabNum",maxHdTabNum-2);
},
init:function(){
//读取元素对象数据
var myData=myLib.desktop.getMydata();
var $task_lb=myData.panel.taskBar['task_lb']
,$task_bar=myData.panel.taskBar['_this']
,wh=myData.winWh;
var _this=this;
_this.upTaskWidth();
//当改变浏览器窗口大小时，重新计算任务栏宽度
$(window).wresize(function(){
_this.upTaskWidth();
});
},
contextMenu:function(tab,id){
var _this=this;
//初始化任务栏Tab右键菜单
var data=[
[{
text:"最大化",
func:function(){
$("#myWin_"+tab.data('win')).find('a.winMaximize').trigger('click');
}
},{
text:"最小化",
func:function(){
myLib.desktop.win.minimize($("#myWin_"+tab.data('win')));
}
}]
,[{
text:"关闭",
func:function(){
$("#smartMenu_taskTab_menu"+id).remove();
myLib.desktop.win.closeWin($("#myWin_"+tab.data('win')));
}
}]
];
myLib.desktop.contextMenu(tab,data,"taskTab_menu"+id,10);
},
addWinTab:function(text,id){
var myData=myLib.desktop.getMydata();
var $task_lb=myData.panel.taskBar['task_lb']
,$task_bar=myData.panel.taskBar['_this']
,tid="myWinTab_"+id
,allTab=$task_lb.find('a')
,curTabNum=allTab.size()
,docHtml="<a href='#' id='"+tid+"'>"+text+"</a>";
//添加新的tab
$task_lb.append($(docHtml));
var $newTab=$("#"+tid);
//右键菜单
this.contextMenu($newTab,id);
$task_lb
.find('a.selectTab')
.removeClass('selectTab')
.addClass('defaultTab');
$newTab
.data('win',id)
.addClass('selectTab')
.click(function(){
var win=$("#myWin_"+$(this).data('win'));
if(win.is(":hidden")){
win.show();
$(this).removeClass('defaultTab').addClass('selectTab');//当只有一个窗口时
myLib.desktop.win.switchZindex(win);
}else{
if($(this).hasClass('selectTab')){
myLib.desktop.win.minimize(win);
}else{
myLib.desktop.win.switchZindex(win);
}
}
});
$('body').data("topWinTab",$newTab);
//当任务栏活动窗口数超出时
if(curTabNum>myData.maxHdTabNum-1){
var LeftBtn=$('#leftBtn')
,rightBtn=$('#rightBtn')
,bH;
LeftBtn
.show()
.find("a")
.click(function(){
var pos=$task_lb.position();
if(pos.top<0){
$task_lb.animate({
"top":pos.top+40
}, 50);
}
});
rightBtn
.show()
.find("a")
.click(function(){
var pos=$task_lb.position(),h=$task_lb.height(),row=h/40;
if(pos.top>(row-1)*(-40)){
$task_lb.animate({
"top": pos.top-40
}, 50);
}
});
$task_lb.parent().css("margin","0 100");
}
},
delWinTab:function(wObj){
var myData=myLib.desktop.getMydata()
,$task_lb=myData.panel.taskBar['task_lb']
,$task_bar=myData.panel.taskBar['_this']
,LeftBtn=$('#leftBtn')
,rightBtn=$('#rightBtn')
,pos=$task_lb.position();
this.findWinTab(wObj).remove();
var newH=$task_lb.height();
if(Math.abs(pos.top)==newH){
LeftBtn.find('a').trigger("click");
}
if(newH==40){
LeftBtn.hide();
rightBtn.hide();
$task_lb.parent().css("margin",0);
}
},
findWinTab:function(wObj){
var myData=myLib.desktop.getMydata(),
$task_lb=myData.panel.taskBar['task_lb'],
objTab;
$task_lb.find('a').each(function(index){
var id="#myWin_"+$(this).data("win");
if($(id).is(wObj)){
objTab=$(this);
}
});
return objTab;
}
}
//桌面图标
myLib.NS("desktop.deskIcon");
myLib.desktop.deskIcon={
//桌面图标排列
arrangeIcons:function(){
var myData=myLib.desktop.getMydata()
,winWh=myData.winWh
,$deskIconBlock=myData.panel.deskIcon['_this']
,$icon=myData.panel.deskIcon['icon'];
//设置桌面图标容器元素区域大小
$deskIconBlock.css({"width":(winWh['w']-75)+"px","height":(winWh['h']-75)+"px","margin-top":"10px",'margin-left':'75px'});
//对图标定位
var iconNum=$icon.size();
//存储当前总共有多少桌面图标
$('body').data('deskIconNum',iconNum);
var gH=110;//一个图标总高度，包括上下margin
var gW=120;//图标总宽度,包括左右margin
var rows=Math.floor((winWh['h']-75)/gH);
var cols=Math.ceil(iconNum/rows);
var curcol=0,currow=0;
//alert(rows);
$icon.css({
"position":"absolute",
"margin":0,
"left":function(index,value){
var v=curcol*gW+30;
if((index+1)%rows==0){
curcol=curcol+1;
}
return v;
},
"top":function(index,value){
var v=(index-rows*currow)*gH+20;
if((index+1)%rows==0){
currow=currow+1;
}
return v;
}});
return $icon;
},
init:function(){
//将当前窗口宽度和高度数据存储在body元素上
myLib.desktop.winWH();
var _this=this;//调用父级对象
var $icon=_this.arrangeIcons();
//如果窗口大小改变，则重新排列图标
$(window).wresize(function(){
myLib.desktop.winWH();//更新窗口大小数据
_this.arrangeIcons();
});
//图标鼠标经过效果
$icon.hover(function(){
$(this).addClass("desktop_icon_over");
},
function(){
$(this).removeClass("desktop_icon_over");
})
//双击图标打开窗口
.dblclick(function(){
var title=$(this).children("div.text").text(),wid=this.id;
var href= this.getAttribute("path");
myLib.desktop.win.newWin({
WindowTitle:title,
iframSrc:href,
WindowsId:wid,
WindowAnimation:'easeInBack'
});
})
.draggable({
revert: true,
helper: "clone",
opacity: 0.7,
start: function(event, ui) {
var offset=$(this).offset();
$('body').data("curDragIcon",$(this));
}
})
.droppable({
drop: function() {
var curDragIcon=$('body').data("curDragIcon");
curDragIcon.insertAfter($(this));
var l=$(this).css('left'),t=$(this).css('top');
$(this).css({'left':curDragIcon.css('left'),'top':curDragIcon.css('top')});
curDragIcon.css({'left':l,'top':t});
},
});
//初始化桌面右键菜单
var data=[
[{
text:"显示桌面",
func:function(){}
}]
,[{
text:"系统设置",
func:function(){}
},{
text:"主题设置",
func:function(){}
}]
,[{
text:"退出系统",
func:function(){}
}]
,[{
text:"关于fleiCms",
func:function(){}
}]
];
myLib.desktop.contextMenu($(document.body),data,"body",10);
}
}
//当页面加载完毕执行
$(function(){
//存储桌面布局元素的jquery对象
myLib.desktop.desktopPanel();
//初始化任务栏
myLib.desktop.taskBar.init();
//初始化桌面图标
myLib.desktop.deskIcon.init();
//初始化侧边栏
myLib.desktop.lrBar.init();
})
</script>
</head>
<body>
<a href="#" class="powered_by">Powered by jWebOS</a>
<ul id="deskIcon">
<li class="desktop_icon" id="win5" path="#"> <span class="icon"><img src="icon/icon4.png"/></span>
<div class="text">相册
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win6" path="#"> <span class="icon"><img src="icon/icon5.png"/></span>
<div class="text">游戏
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win7" path="#"> <span class="icon"><img src="icon/icon6.png"/></span>
<div class="text">日历
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win8" path="#"> <span class="icon"><img src="icon/icon7.png"/></span>
<div class="text">聊天室
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win9" path="#"> <span class="icon"><img src="icon/icon8.png"/></span>
<div class="text">通讯薄
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win10" path="#"> <span class="icon"><img src="icon/icon9.png"/></span>
<div class="text">日记
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win11" path="#"> <span class="icon"><img src="icon/icon10.png"/></span>
<div class="text">文档资料
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win12" path="#"> <span class="icon"><img src="icon/icon6.png"/></span>
<div class="text">日历
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win14" path="#"> <span class="icon"><img src="icon/icon7.png"/></span>
<div class="text">聊天室
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win13" path="#"> <span class="icon"><img src="icon/icon8.png"/></span>
<div class="text">通讯薄
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win15" path="#"> <span class="icon"><img src="icon/icon9.png"/></span>
<div class="text">日记
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win16" path="#"> <span class="icon"><img src="icon/icon10.png"/></span>
<div class="text">文档资料
<div class="right_cron"></div>
</div>
</li>
</ul>
<div id="taskBar">
<div id="leftBtn"><a href="#" class="upBtn"></a></div>
<div id="rightBtn"><a href="#" class="downBtn"></a> </div>
<div id="task_lb_wrap">
<div id="task_lb"></div>
</div>
</div>
<div id="lr_bar">
<ul id="default_app">
<li id="app0"><img src="icon/icon1.png" title="Jquery API" path="#/?api/api.html"/></li>
<li id="app2"><img src="icon/icon0.png" title="学习资料库" path="#/?Material.aspx"/></li>
<li id="app3"><img src="icon/icon2.png" title="QQ群堂" path="#/?QQGroup.aspx"/></li>
<li id="app4"> <img src="icon/icon3.png" title="在线留言" path="#/?Feedback.aspx"/></li>
<li id="app1"><img src="icon/icon11.png" title="Jquery学堂" path="#/?Jquery.aspx"/></li>
</ul>
<div id="default_tools"> <span id="showZm_btn" title="显示桌面"></span><span id="shizhong_btn" title="时钟"></span><span id="weather_btn" title="天气"></span> <span id="them_btn" title="主题"></span></div>
<div id="start_block"> <a title="开始" id="start_btn"></a>
<div id="start_item">
<ul class="item admin">
<li><span class="adminImg"></span> Admin</li>
</ul>
<ul class="item">
<li><span class="sitting_btn"></span>系统设置</li>
<li><span class="help_btn"></span>使用指南 <b></b></li>
<li><span class="about_btn"></span>关于我们</li>
<li><span class="logout_btn"></span>退出系统</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(myLib.js):
// JavaScript Document/*-----------------------------------------------------------------------------*一个轻量级的js库，用来创建命名空间和动态加载js与css*作者:Muzi*lei,email:530624206@qq.com*version:1.0,时间：2011-09-14-----------------------------------------------------------------------------*/
var myLib={
//创建子命名空间,用的是yui的方法------NS:function(ns){
if (!ns || !ns.length){
return null;
}
var levels = ns.split(".");
var nsobj = myLib;
for (var i=(levels[0] == "myLib") ? 1:0;
i<levels.length;
++i){
nsobj[levels[i]] = nsobj[levels[i]] ||{
}
;
nsobj = nsobj[levels[i]];
}
return nsobj;
}
,/*--动态加载外部js文件，参数path可使用正常路径格式"file/demo/js文件"注意：末尾不要加“.js”后缀...--*/
_loadJs:function(path,callback){
callback=!(typeof(callback)=="undefined")?callback:function(){
}
;
var oHead = document.getElementsByTagName('HEAD').item(0);
var script = document.createElement("script") script.type = "text/javascript";
if (script.readyState){
//IE script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
}
;
}
else{
//Others:Firefox,Safari,Chrome,and Opera script.onload = function(){
callback();
}
;
}
script.src =path+".js";
oHead.appendChild(script);
}
,/*--动态加载外部css文件，参数path可使用正常路径格式"file/demo/css文件"注意：末尾不要加“.css”后缀...--*/
_loadCss:function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var links = document.createElement('link');
links.href =path+".css";
links.rel = 'stylesheet';
links.type = 'text/css';
head.appendChild(links);
}
,//获取对象类型名,["Array","Boolean","Date","Number","Object","RegExp","String","Window","HTMLDocument"]_getType:function(object){
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}
,//用来判断对象类型_is:function(object,typeStr){
return this._getType(object)==typeStr;
}
,//动态加载js文件,批量加载js,css文件，path可以是数组格式或用逗号隔开的字符串_import:function(path,fileType){
var loadfun;
switch(fileType){
case "js":loadfun=this._loadJs;
break;
case "css":loadfun=this._loadCss;
break;
default:alert("请检查文件类型");
}
//如果path是以逗号隔开的字符串 if(this._is(path,"String")){
if(path.indexOf(",")>=0){
path=path.split(",");
}
else{
path=[path];
}
}
//循环加载文件for(var i=0;
i<path.length;
i++){
loadfun(path[i]);
}
}
}
分享到QQ
分享到微博
微信扫一扫
