zoukankan      html  css  js  c++  java
  • artDialog 简单使用!

    简介

    artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。

    功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……

    优点

    1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
    2. 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小拖动调节
    3. 智能消息对齐: 如果设置了对话框宽度,文本会自动居中或者居左对齐
    4. 容错: 如果定义的宽度高度小于内容大小不会出现错位,
    5. 智能定位: 使用自定义坐标的时候智能修正位置,确保其在可视范围 (适用于弹出菜单)
    6. 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
    7. 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
    8. 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
    9. IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
    10. IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)
    接口

    配置参数

    • content: {消息内容,支持HTML}
    • title: {标题.默认:'提示'}
    • lock: {是否锁定屏幕. 默认:false}
    • width: {宽度,支持em等单位. 默认:'auto'}
    • height: {高度,支持em等单位. 默认:'auto'}
    • url: {iframe地址,存在content参数时候,此参数无效}
    • x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
    • y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中,而是使用的黄金比例)}
    • fixed: {是否启用静止定位. 默认:false}
    • time: {多少秒自动关闭}
    • style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
    • yesText: {确定按钮文本. 默认:'确定'}
    • noText: {取消按钮文本. 默认:'取消'}
    • yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
    • id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2',则内容容器id为'my2Content'}
    • artDialog(
              {	
                  content:'欢迎你来到对话框世界!',
                  lock:true,
                  style:'succeed noClose'
              },
              function(){
                  alert('你点了确定');
              },
              function(){
                  alert('你点了取消');
              }
      );
    • artDialog({content:'大多情况下只需要一个content参数就能解决问题'}).
    • http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/
    21222
    /*
    演示脚本
    */
    
    
    (function(){
    		  
    	//判断IE6
    	var isIE6 = !+'v1' && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6);
    	
    	//document.getElementById简化函数
    	var $ = function (id){
    		return 'string' == typeof id ? document.getElementById(id) : id;
    	};
    	
    	//页面就绪,允许你绑定一个在DOM文档载入完成后执行的函数
    	var domReady = !+'v1' ? function(f){(function(){
    			try{
    				document.documentElement.doScroll('left');
    			} catch (error){
    				setTimeout(arguments.callee, 0);
    				return;
    			};
    			f();
    		})();
    	} : function(f){
    		document.addEventListener('DOMContentLoaded', f, false);
    	};
    	
    	//在页面就绪后绑定事件
    	domReady(function(){
    		//artDialog({content:'欢迎使用 "artDialog" 对话框组件!'});		
    		
    		
    		//--------------------------ardDialog演示脚本开始------------------------------//
    		$('btn1').onclick = function(){
    			artDialog({title:'图片查看', content:'<img width="817" height="479" src="http://www.hunanyishi.cn/images/main.jpg" />', fixed:true});
    			return false;
    		};
    		
    		$('btn2').onclick = function(){
    			artDialog({title:'google', url:'http://code.google.com/p/artdialog/', 640, height:320});//url参数其实就是iframe
    			return false;
    		};
    		
    		$('btn3').onclick = function(){
    			artDialog({title:'功夫兔', content:'<object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/bXwe7XgTxuA"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/bXwe7XgTxuA" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object>', fixed:true});
    			return false;
    		};
    		
    		$('btn4').onclick = function(){
    			artDialog({content:'你人品稳定么?', fixed:true, yesText:'我很稳定', style:'confirm'}, function(){alert('你是好人');}, function(){alert('你是坏人');});//style参数可以填写多个,用空格隔开。具体有什么请看皮肤css文件
    			return false;
    		};
    		
    		$('btn5').onclick = function(){
    			artDialog({content:'你是坏人', style:'alert', lock:true}, function(){});//lock参数就是锁屏,它会中断用户操作,用于显示非常重要的消息。慎用
    			return false;
    		};
    		
    		$('btn6').onclick = function(e){
    			//获取对象的坐标,让对话框在按钮附近弹出
    			var e = e || window.event,
    			_x,
    			_y;
    			if(e.pageX || e.pageY){
    				_x = e.pageX;
    				_y = e.pageY;
    			} else {
    				_x = e.clientX + document.body.clientLeft;
    				_y = e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    			};
    			
    			var _this = this;
    			artDialog({id:'menu_4834783',content:'<input style="200px;" id="M_dfd" type="text" value="hello world!" />',x:_x, y:_y, style:'noTitle noBorder'}, function(){ _this.innerHTML = $('M_dfd').value; });//使用id参数,可以防止点击弹出多个对话框
    			return false;
    		};
    		
    		$('btn7').onclick = function(){
    			artDialog({content:'您收到 <strong>2</strong> 条消息', x:'right', y:'bottom', time:'100', fixed:true});//x和y坐标可以使用关键字,当然也可以使用数字
    			return false;
    		};
    		//--------------------------ardDialog演示脚本结束------------------------------//
    		
    
    
    
    
    		//皮肤切换(不支持IE6,因为png皮肤的缘故)
    		if (!isIE6) {
    			function mySkin(s){
    				$('artDialogSkin').href = s;
    			};
    			$('skin_0').click();
    			$('skin_0').onclick = function(){
    				mySkin('skin/aero/aero.css');
    			};
    			$('skin_1').onclick = function(){
    				mySkin('skin/chrome/chrome.css');
    			};
    			$('skin_2').onclick = function(){
    				mySkin('skin/facebook/facebook.css');
    			};
    			$('skin_3').onclick = function(){
    				mySkin('skin/mini/mini.css');
    			};
    			$('skin_4').onclick = function(){
    				mySkin('skin/aero/aero.css');
    				$('skin_0').click();
    				artDialog({content:'自己动手,丰衣足食', lock:true});
    			};
    			$('showBg').onclick = function(){
    				if (!$('test_3544')) {
    					document.getElementsByTagName('body')[0].className = 'showBg';
    					artDialog({id:'test_3544', content:'<div id="topMenu" style="background:#000; 200px; height:2em;line-height:2em;text-align:center; filter:alpha(opacity=70); opacity:0.7;">[<a href="#" style="color:#FFF" onclick="showWin();return false">打开新对话框</a>]  [<a id="bgCloseBtn" href="#" style="color:#FFF" onclick="bgShow();return false">关闭</a>]</div>', x:'left', y:'top', style:'noSkin', fixed:true});
    				} else {
    					bgShow();
    				};
    				return false;
    			};
    		};
    		
    		//运行代码[不支持Chrome]
    		$('runCodeBtn').onclick = function(){
    			var fn = $('runCode').value;
    			$('runCodeDiv').innerHTML = '<iframe style="display:none" id="runCodeIframe"></iframe>';
    			var fw = $('runCodeIframe').contentWindow;
    			var f = fw.document;
    			f.contentEditable = true; 
    			//f.open();
    			f.writeln('<!DOCTYPE><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">try{window.parent.'+fn+'}catch(e){alert(e.description);};</script><body></body></html>');
    			//f.close();
    			return false;
    		};
    		
    		
    		var mailName = 'admin' + '@' + 'plane' + 'art' + '.cn';
    		$('myMail').innerHTML = mailName;
    	});
    
    })();
    
    //显示一个新对话框
    function showWin(){
    			artDialog({content:'欢迎使用 "artDialog" 对话框组件!', fixed:true, lock:false,style:'succeed'}, function(){artDialog({title:' ', content:'谢谢观赏', lock:true, time:2})});
    };
    
    //显示背景
    function bgShow(){
    	var body = document.getElementsByTagName('body')[0];
    	if(body.className != 'showBg') {
    		body.className = 'showBg';
    		document.getElementById('bgCloseBtn').innerHTML = '关闭背景';
    	} else {
    		body.className = '';
    		document.getElementById('bgCloseBtn').innerHTML = '打开背景';
    	};
    };
    

      

  • 相关阅读:
    HDU 2544 最短路
    Codeforces Round #358 (Div. 2) Alyona and Strings
    Codeforces Round #358 (Div. 2) Alyona and the Tree
    Codeforces Round #357 (Div. 2) Runaway to a Shadow
    pycharm快捷键和一些常用的设置
    Python不同功能的函数
    面向对象技术简介
    数据结构
    python学习笔记
    ORACLE基本语法
  • 原文地址:https://www.cnblogs.com/chenmfly/p/4626044.html
Copyright © 2011-2022 走看看