artDialog 간단하게 사용!

9494 단어 artdialog
간단 한 소개
artDialog 는 가 볍 고 고도 로 호 환 되 는 javascript 대화 상자 구성 요소 로 웹 페이지 의 상호작용 을 데스크 톱 소프트웨어 와 같은 사용자 체험 을 할 수 있 습 니 다.
기능: 잠 금 화면 (마스크), 아 날로 그 alert 와 confirm, 다 중 창 팝 업, 정지 위치, Ese 키 로 대화 상 자 를 닫 는 것, 정시 닫 기, 사용자 정의 위치, 드래그, 마우스 로 창 크기 조절, 스킨 케 어 지원...
장점.
  • 주류 브 라 우 저 호 환: IE6 와 IE6 +, Firefox, chrome, Opera, Safari
  • 지원
  • 자가 적응 내용: 미리 설정 하지 않 아 도 됩 니 다. 대화 상 자 는 메시지 내용 의 크기 에 적응 합 니 다. (단추 포함) 메시지 상자 크기 드래그 조절 지원
  • 스마트 메시지 정렬: 대화 상자 너비 가 설정 되 어 있 으 면 텍스트 가 자동 으로 가운데 또는 왼쪽 으로 정렬 됩 니 다
  • 잘못 사용: 정 의 된 너비 높이 가 내용 크기 보다 작 으 면 잘못 되 지 않 습 니 다.
  • 스마트 포 지 셔 닝: 사용자 정의 좌 표를 사용 할 때 스마트 로 위 치 를 수정 하여 시각 적 범 위 를 확보 합 니 다. (팝 업 메뉴 에 적용)
  • 드래그 가 원활 합 니 다. 마우스 가 붙 지 않 고 브 라 우 저 시 야 를 끌 어 내지 않 아 제어 할 수 없습니다
  • 가 벼 움: js 압축 후 8KB 미 만 (js 에 핵심 호 환 레이아웃 CSS 가 내 장 된 경우)
  • 피부 만 들 기: 구 궁 격 구조, 갈고리 가 완선 되 고 피부 만 들 기 가 상당히 간단 하 며 IE6 png 32 투명 과 포 지 셔 닝 솔 루 션 이 내장 되 어 있 습 니 다.
  • IE6 디 더 링 정지 없 음: IE6 에서 현대 브 라 우 저 와 마찬가지 로 완벽 한 정지 포 지 셔 닝 효 과 를 실현 할 수 있 습 니 다
  • IE6 드 롭 다운 컨트롤 지원: IE6 드 롭 다운 컨트롤 지원 (비고: 반투명 피부 지원 하지 않 음)
  • 인터페이스
    설정 매개 변수
  • content: {메시지 내용, HTML 지원}
  • 제목: {제목. 기본 값: '알림'}
  • lock: {화면 을 잠 글 지 여부 입 니 다. 기본 값: false}
  • width: {너비, em 등 단 위 를 지원 합 니 다. 기본 값: 'auto'}
  • height: {높이, em 등 단 위 를 지원 합 니 다. 기본 값: 'auto'}
  • url: {iframe 주소, content 인자 가 존재 할 때 이 인자 가 잘못 되 었 습 니 다}
  • x: {x 좌표, 키 워드 를 사용 할 수 있 습 니 다. 예 를 들 어 왼쪽 / 오른쪽 / center. 기본 값: 'center'}
  • y: {y 좌표, 키 워드 를 사용 할 수 있 습 니 다. 예 를 들 어 top / bottom / center. 기본 값: 'center' (절대 수직 이 아 닌 황금 비율)}
  • fixed: {정지 포 지 셔 닝 을 사용 할 지 여부 입 니 다. 기본 값: false}
  • time: {몇 초 자동 종료}
  • style: {대화 상자 스타일 확장 인자, 사용자 정의 className 을 기록 합 니 다. 자세 한 내용 은 피부 css 파일 의 정 의 를 참조 하고 여러 칸 으로 구분 합 니 다}
  • yes 텍스트: {확인 단추 텍스트. 기본 값: '확인'}
  • noText: {취소 단추 텍스트 입 니 다. 기본 값: '취소'}
  • yes Close: {확인 단 추 를 누 르 면 대화 상 자 를 동시에 닫 을 지 여부 입 니 다. 기본 값: true}
  • id: {대화 상자 에 id 를 정의 합 니 다. 대화 상자 가 닫 히 지 않 으 면 같은 이름 의 대화 상자 가 나타 나 지 않 습 니 다. 예 를 들 어 id 를 'my 2' 로 정의 하면 내용 용기 id 는 'my 2Content'}
  • 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/', width: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="width: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; width: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 = '    ';
    
    	};
    
    };
    
    

    좋은 웹페이지 즐겨찾기