[JS] - 实现Vista操作系统对话框效果
2010-03-25 13:41
357 查看
来源: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文件的代码
Demo.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文件的代码
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>
相关文章推荐
- div对话框,js+div+css实现好看的提示框效果
- js效果--我的对话框实现
- js实现拖拽效果(构造函数)
- js实现购物车效果
- js实现文本域的字符即时统计效果
- 一段js+html+css实现的loading图标效果
- 使用原生js实现页面蒙灰(mask)效果示例代码
- JS实现闪动的title消息提醒效果
- HTML+CSS+jquery 实现环形比例图效果 AngularJS+css实现环形比例图效果
- JS时间控制实现动态效果的实例讲解
- CSS加JS实现换肤效果
- 使用原生js实现页面蒙灰(mask)效果示例代码
- 完美实现js焦点轮播效果(二)(图片可滚动)
- js实现图片轮播效果
- JS实现浏览器状态栏文字闪烁效果的方法
- JS实现下拉框的动态添加(附效果)
- 使用CSS和Js实现时钟效果
- 原生JS改变透明度实现轮播效果
- javaScript+turn.js实现图书翻页效果