js+css实现的仿office2003界面

效果图
screen.width-461) window.open('http://bbs.javascript.com.cn/attachment/Mon_0608/10_9458_40785726bd46566.jpg');" src="http://bbs.javascript.com.cn/attachment/Mon_0608/10_9458_40785726bd46566.jpg" border=0> 

仿Office2003的工具条

/*----------
舜子制作
Menu java-script Made by PuterJam
E-mail:puterjam@etang.com
-------------*/
var listnum=0;
var menu_height;
var menu_width;
var menu_left;
var menu_top;
var topMar = 1;
var leftMar = -2;
var space = 1;
var isvisible;
function listbox(listname,buttonname,valuename)
{
this.listname=listname
this.buttonname=buttonname
this.valuename=valuename
}
function listaction(obj,action,showlist,scroll,tw)
{
num=obj.id.charAt(obj.id.length-1)
if (!scroll) {scroll=0}
if (!tw) {tw=105}
listbox=eval(lb[num].listname)
listbutton=eval(lb[num].buttonname)
listvalue=eval(lb[num].valuename)
switch (action)
{
case 0:
listbox.className="getlist";listbutton.className="listover"
break;
case 1:
if (listbox.gf=="0")
{listbox.className="lostlist";listbutton.className="menubar"}
break;
case 2:
for (i=0;i parseInt(vDiv.style.left)+vDiv.offsetWidth) ||
(mY parseInt(vDiv.style.top)+vDiv.offsetHeight)) {
vDiv.style.visibility = "hidden";
isvisible = false;
}
}

if (isvisible==false)
{
for (i=0;i

" +
vMnuCode + "

";
menu_height = obj.offsetHeight;
menu_width = obj.offsetWidth;
menu_left = obj.offsetLeft + leftMar+2;
menu_top = obj.offsetTop + topMar + menu_height + space-3;
vParent = obj.offsetParent;
while (vParent.tagName.toUpperCase() != "BODY")
{
menu_left += vParent.offsetLeft;
menu_top += vParent.offsetTop;
vParent = vParent.offsetParent;
}
listDiv.innerHTML = vMnuCode;
listDiv.style.top = menu_top;
listDiv.style.left = menu_left;
if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}
else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18}
listDiv.style.visibility = "visible";
var cssopaction=submenu.filters[0].opacity
submenu.filters[0].opacity=0;
submenu.filters[1].Apply();
submenu.filters[0].opacity=100;
submenu.filters[1].Play();

isvisible = true;
}
function menuitem(lightcolor,normalcolor,icon,title,url)
{
this.lightcolor=lightcolor
this.normalcolor=normalcolor
this.icon=icon
this.title=title
this.url=url
}
function bulidmenu(arrayname)
{
var menuarray=eval(arrayname)
menucontent='

'
for (i=0;i

'+menuarray[i].title+'

'
}
else
{
content='

'+menuarray[i].title+'

'
}
if (menuarray[i].url!="_disable"){
menucontent=menucontent+'

'+content+'

'
}
else
{
menucontent=menucontent+'

'+content+'

'
}
}
else
{
menucontent=menucontent+'

'
}

}
menucontent=menucontent+"

"
return menucontent
}
function HL_Menu(obj,state)
{
switch (state)
{
case 0:
obj.className="menuover"
break;
case 1:
obj.className="menuup"
break;
}
}

var lb=new Array()
lb[0]=new listbox('listbox0','listbutton0','listvalue0')
lb[1]=new listbox('listbox1','listbutton1','listvalue1')

var list1=new Array()
list1[0]=new menuitem("#B1CBE4","","","ListItem1","")
list1[1]=new menuitem("#B1CBE4","","","ListItem2","")
list1[2]=new menuitem("#B1CBE4","","","ListItem3","")
list1[3]=new menuitem("#B1CBE4","","","ListItem4","")
list1[4]=new menuitem("#B1CBE4","","","ListItem5","")
list1[5]=new menuitem("#B1CBE4","","","ListItem6","")
list1[6]=new menuitem("#B1CBE4","","","ListItem7","")
list1[7]=new menuitem("#B1CBE4","","","ListItem8","")
list1[8]=new menuitem("#B1CBE4","","","ListItem9","")
list1[9]=new menuitem("#B1CBE4","","","ListItem10","")
blist1=bulidmenu("list1")

var list2=new Array()
list2[0]=new menuitem("#B1CBE4","","","字体1","")
list2[1]=new menuitem("#B1CBE4","","","字体2","")
list2[2]=new menuitem("#B1CBE4","","","字体3","")
list2[3]=new menuitem("#B1CBE4","","","字体4","")
list2[4]=new menuitem("#B1CBE4","","","字体5","")
list2[5]=new menuitem("#B1CBE4","","","字体6","")
list2[6]=new menuitem("#B1CBE4","","","字体7","")
list2[7]=new menuitem("#B1CBE4","","","字体8","")
list2[8]=new menuitem("#B1CBE4","","","字体9","")
list2[9]=new menuitem("#B1CBE4","","","字体10","")
blist2=bulidmenu("list2")
function Golist(text)
{
listvalue=eval(lb[listnum].valuename)
listvalue.innerText=text
vDiv = document.all("listDiv");
vDiv.style.visibility = "hidden";
isvisible = false;
}

.lostfocus { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
.getfocus { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }
.menubar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6)}
.bodybar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, endcolorstr=#F7F7F7, startcolorstr=#DEDBD6)}
.leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand }
.getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default }
.lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; }
.menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;}
.menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; }
.lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
.getlist { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }
.listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B}
.listDiv { filter: alpha(opacity=90,finishopacity=0,style=0) blendtrans(duration=.3); }

文件(F)
编辑(E)
姓名 密码
登陆
 

 
B

I

U
 

工作之余做了这个小东西
仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和java-script做的
菜单就不做了,偷懒中

感兴趣的朋友可以和我联系,大家交流交流.

[email]PuterJam@etang.com[/email]

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js+css实现的仿office2003界面

    效果图screen.width-461) window.open('http://bbs.javascript.com.cn/attachment/Mon_0608/10_9458_40785726bd46566.jpg');" src="http://bbs.javascript.com.cn/attachment/Mon_0608/10_9458_40785726bd46566.jpg" border=0>  仿Office2003的工具条 /*----------

  • JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法.分享给大家供大家参考.具体如下: 首先来看一下运行效果图: 具体实现代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • JS+CSS实现仿支付宝菜单选中效果代码

    本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

  • JS+CSS实现仿msn风格选项卡效果代码

    本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • JS+CSS实现仿雅虎另类滑动门切换效果

    本文实例讲述了JS+CSS实现仿雅虎另类滑动门切换效果.分享给大家供大家参考.具体如下: 这是仿照雅虎特色服务的一个Tab滑动切换效果,核心是一个CSS滑动门,经过了改进,有点特别,看下效果吧,估计很多朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-yahoo-hdm-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • JS+CSS实现仿新浪微博搜索框的方法

    本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm

  • css和js实现弹出登录居中界面完整代码

    我实现的这个和许多网站上的登录弹出窗口差不多,大家举一反三,先看我写完后的结果. 点击创建相册后 会在这个屏幕的中间显示创建相册的表单,整个背景颜色变暗,点击右上角的X会关闭这个表单. html代码 创建按钮 <li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>

  • 纯js+css实现仿移动端淘宝网站的弹出详情框功能

    点击查看图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="ap

  • react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As

  • js+css实现飞机大战游戏

    本文实例为大家分享了js+css实现飞机大战游戏的具体代码,供大家参考,具体内容如下 用js和css实现,css中定义样式,js中定义了具体的实现事件,例如碰撞.子弹.飞机等. main.css文件(可根据需要定义): *{     margin: 0;     padding: 0; } #contentdiv{     position: absolute;     left: 500px; } #startdiv{     width: 320px;     height: 568px;

随机推荐