[JS] - 实现Vista操作系统对话框效果

最新推荐文章于 2025-09-10 13:02:12 发布

weixin_30920091

最新推荐文章于 2025-09-10 13:02:12 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签：操作系统 javascript ViewUI

原文链接：http://www.cnblogs.com/hcbin/archive/2010/03/25/1695029.html

本文介绍了一种使用JavaScript仿制Vista操作系统对话框的方法，提供了详细的代码实现及使用示例，展示了如何创建自定义对话框，包括警告、确认及信息提示等。

来源：http://www.pc40.cn/html/ASPbiancheng/qitaxiangguan/20100102/513.html

附件1：http://www.5-studio.com/wp-content/uploads/2009/06/Dialog.rar

附件2：http://www.5-studio.com/wp-content/uploads/2009/11/zDialog.rar

Dialog.js文件的代码

Dialog.js

使用实例：

Demo.html

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > JS仿Vista操作系统代码 </ title >
< style >
body { background : #ffffff ; color : #444 ; }
a { color : #09d ; text-decoration : none ; border : 0 ; background-color : transparent ; }
body,div,q,iframe,form,h5 { margin : 0 ; padding : 0 ; }
img,fieldset { border : none 0 ; }
body,td,textarea { word-break : break-all ; word-wrap : break-word ; line-height : 1.5 ; }
body,input,textarea,select,button { margin : 0 ; font-size : 12px ; font-family : Tahoma, SimSun, sans-serif ; }
div,p,table,th,td { font-size : 1em ; font-family : inherit ; line-height : inherit ; }
h5 { font-size : 12px ; }
</ style >
< script type ="text/javascript" src ="Dialog.js" ></ script >
< script type ="text/javascript" >
/*
function $(ele) {
if (typeof(ele) == 'string'){
ele = document.getElementById(ele)
if(!ele){ return null; }
}
if(ele){ Core.attachMethod(ele); }
return ele;
}
*/
/*
var Core = { };
Core.attachMethod = function(ele){
if(!ele||ele["$A"]){ return; }
if(ele.nodeType==9){ return; }

var win;
try{
if(isGecko){
win = ele.ownerDocument.defaultView;
}else{
win = ele.ownerDocument.parentWindow;
}

for(var prop in $E){
ele[prop] = win.$E[prop];
}
}catch(ex){
//alert("Core.attachMethod:"+ele) // 有些对象不能附加属性，如flash
}
}
*/
function zOpenD(){
var diag = new Dialog( " Diag1 " );
diag.Width = 900 ;
diag.Height = 400 ;
diag.Title = " 弹出窗口示例 " ;
diag.URL = " http://www.aspprogram.cn/ " ;
diag.ShowMessageRow = true ;
diag.MessageTitle = " 弹出窗口示例 " ;
diag.Message = " 在这儿你可以对这个窗口的内容或功能作一些说明 " ;
diag.OKEvent = zAlert; // 点击确定后调用的方法
diag.show();
}

function zOpen(){
var diag = new Dialog( " Diag2 " );
diag.Width = 900 ;
diag.Height = 400 ;
diag.Title = " 弹出窗口示例 " ;
diag.URL = " http://www.aspprogram.cn/ " ;
diag.OKEvent = zAlert; // 点击确定后调用的方法
diag.show();
}

function zAlert(){
Dialog.alert( " 此为信息提示对话框 " );
}

function zConfirm(){
Dialog.confirm( ' 警告：您确认要删除吗？ ' , function (){ Dialog.alert( " 删除成功 " ); });
}

/*
function sometext(ele,n){
var strArr=["背","景","文","字","1"];
var writeStr=""

for(i=0;i<n;i++){
index=parseInt(Math.random()*5);
for(j=0;j<5;j++){
str=index+j>4?index+j-5:index+j;
writeStr+=strArr[str];
}
}
$(ele).innerHTML=writeStr;
}
*/
</ script >
</ head >
< body >
< input type ="button" value ="弹出新窗口" onclick ="zOpen()" />
< input type ="button" value ="弹出带说明的新窗口" onclick ="zOpenD()" />
< input type ="button" value ="弹出信息提示对话框" onclick ="zAlert()" />
< input type ="button" value ="弹出选择对话框" onclick ="zConfirm()" />
</ body >
</ html >

转载于:https://www.cnblogs.com/hcbin/archive/2010/03/25/1695029.html