jquery 도구 시리즈 오버레이 learning_jquery

지난번 스크롤 가능에 대한 연구에 이어 오늘은 jquery 도구의 6가지 주요 기능 중 네 번째 기능인 오버레이에 대한 연구를 계속합니다.

스크롤 가능한 학습의 경우 먼저 작업의 html 대상 코드를 제공합니다.

오버레이 열기
기타 오버레이

 

여기 있습니다 오버레이

 

   $$$$$$$$$
& lt;/p & gt;
& lt; P & GT;
Class Aptent Taciti Sociosqu Ad Litora Torquent Per Conubia Nostra,
Per Inceptos Himenaeos,
ImperDiet A, Posuere nec, ante. Quisque mattis Massa id metus. style="margin:10px 0" >여기에 또 다른 오버레이가 있습니다


Class aptent taciti socialsqu ad litora talknt per conubia nostra,
per inceptos Himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante.

;p>
>close





이 기능은 jqueryObject.overlay를 통해 구현됩니다. () 메서드, 여기서 오버레이 메서드는 다음 두 가지 메서드를 제공합니다.
1. $("button[rel]").overlay()//이 메서드는 기본 메서드를 사용하여 프롬프트 오버레이를 표시할 수 있습니다.
2 . $("button[rel]" ).overlay({config object}) //이 메서드는 구성 개체를 통해 오버레이 표시를 사용자 정의합니다. 다음 코드는 두 번째 메소드의 구성 매개변수 구현입니다(jquery의 Ready 메소드에 구현을 넣기만 하면 됩니다).

코드 복사
코드는 다음과 같습니다. :

$("#overlay").overlay({api:true}).load();//오버레이 자동 표시(트리거할 필요 없음, 페이지가 로드되면 자동으로 트리거됨)
$ ("button[rel]").overlay({
시작:{
너비: 300,
절대: false
},
끝:{
상단 :10,
왼쪽:400,
절대:false
},
속도:3000,
fadeInSpeed:3000,
closeOn 클릭: false,
oneInstance:false,
닫기: '#overlayClose',//닫기 버튼 사용자 지정
                                                                               ~ 기능 구성 항목 모드 설정
                                                                                                                              :function(){
               //alert(this .getTr igger().attr("rel ") ":onBeforeLoad");//오버레이 프롬프트 상자의 트리거 rel 속성 값 표시 (this.getTrigger().attr("rel") ":onLoad");
    },
  onBeforeClose: function(){
              Alert(this.getTrigger().attr("rel") ":onBeforeClose");
                                                      return false ;




>



속성

기본값 설명 시작(객체) {top: 'center',left: 'center', width: 0,absolute: false} 은 오버레이 팝업 상자의 시작 위치와 크기를 설정하는 데 사용됩니다. 기본적으로 오버레이 팝업 상자의 시작 위치는 해당 트리거(즉, 표시를 트리거하는 페이지 요소)의 위치이며 오버레이 팝업 상자의 초기 크기는 0입니다. 페이지 요소에 의해 트리거되지 않으면 시작됩니다. 위치는 화면 중앙입니다. 이 속성의 기본값은 다음 매개변수 설정을 통해 재정의될 수 있습니다. top: 오버레이 팝을 설정하는 데 사용됩니다. -up 상자 시작 위치는 화면 상단 가장자리로부터의 거리를 기준으로 합니다. 왼쪽: 오버레이 팝업 상자의 시작 위치와 오버레이 팝업 상자 사이의 거리를 설정하는 데 사용됩니다. 화면의 왼쪽 가장자리. width: 시작 위치에서 오버레이 팝업 상자의 너비를 설정하는 데 사용됩니다(예: 초기 팝업 상자 너비) 시작 시 오버레이의 높이는 너비를 기준으로 자동으로 계산됩니다. 절대: 이 값을 true로 설정하면 오버레이 팝 시작 부분의 위치가 업 상자는 이번에는 브라우저 창의 왼쪽 상단을 기준으로 계산되며 스크롤 위치를 고려하지 않습니다. 이 값을 로 설정하면 오버레이 팝업 시작 위치에 스크롤 위치가 고려됩니다. 　 마침(객체) {top: 100,left: 'center',absolute: false} 은 오버레이를 설정하는 데 사용됩니다. 팝업 상자 최종 위치 및 크기. , 다음 매개변수 설정을 통해 이 속성의 기본값을 재정의할 수 있습니다. top: 오버레이를 설정하는 데 사용됩니다. 팝업 화면 상단 가장자리를 기준으로 하는 상자의 최종 위치입니다. 왼쪽: 오버레이 팝업 상자의 최종 위치를 거리에 따라 설정하는 데 사용됩니다. 화면의 왼쪽 가장자리. 절대: 이 값을 true로 설정하면 오버레이 팝업 상자의 최종 위치가 브라우저 창의 왼쪽 상단에서 계산된 값을 기반으로 하며 스크롤 위치를 고려하지 않습니다. 이 값을 로 설정하면 오버레이 팝업의 최종 위치에 스크롤 위치가 고려됩니다. 또한 오버레이 팝업 상자의 최종 위치 크기는 해당 CSS 속성에 의해 설정됩니다. 노출 　 노출 기능과 함께 오버레이 팝업 상자를 자주 사용합니다. 둘이 함께 사용되는 방식은 오버레이의 구성 속성을 통해 설정됩니다. 이 구성 항목은 노출 기능의 구성 개체를 허용합니다. 이 속성은 두 가지 유형의 매개변수를 허용합니다. 하나는 노출 배경색 설정만 허용하는 문자열이고 다른 하나는 노출 구성 개체입니다. 이 속성의 두 가지 매개변수 모드는 이 문서의 예에서 찾을 수 있습니다. 속도 '보통' 오버레이 팝업 상자 설정 팝업 속도. 이 속성에 허용되는 유효한 값은 느림, 보통, 빠름, 밀리초입니다. 이 속성의 값을 0으로 설정하면 오버레이 팝업 상자가 애니메이션 없이 바로 표시됩니다. fadeInSpeed '빠름' 오버레이 팝 설정- up box 콘텐츠가 표시되는 속도입니다. 이 속성은 speed 속성을 통해 유효한 값을 허용합니다. oneInstance TRUE 기본적으로 한 페이지만 오버레이 팝업 상자가 표시됩니다.그러나 이 속성을 false로 설정하면 페이지에 여러 오버레이 팝업이 표시되도록 허용할 수 있습니다. (참고: 이 속성은 closeOnClick이 false로 설정된 경우에만 더 확실한 효과를 가질 수 있습니다.) closeOnClick TRUE 기본적으로 페이지에서 오버레이 팝업 상자 밖의 다른 영역을 클릭하면 오버레이 팝업 상자가 닫힙니다. 그러나 이 속성을 false로 설정하면 이 기능이 비활성화됩니다. 사전 로드 TRUE 기본적으로 배경 이미지는 브라우저의 캐시에 미리 로드됩니다. 따라서 오버레이 프롬프트 상자가 열리면 오버레이 프롬프트 상자의 배경 이미지가 캐시에 로드되므로 오버레이 프롬프트 상자가 트리거될 때 프롬프트 상자의 전체 팝업 프로세스가 원활하게 진행됩니다. 또한 속성을 false로 설정하면 배경 이미지가 미리 로드되는 것을 방지할 수 있습니다. 닫기 　 닫기 버튼 설정. 사용자가 오버레이 프롬프트 상자에 닫기 버튼을 제공하지 않으면 오버레이 프롬프트 상자가 자동으로 닫기 버튼을 생성합니다. 오버레이 프롬프트 버튼을 끄는 사용자 정의 방법은 이 문서의 관련 예를 참조하세요. zIndex 9999 오버레이의 z 설정 프롬프트 상자 -index 속성(css), z-index 속성의 역할은 관련 정보를 참조하세요. 이 속성은 매우 높은 값인 -999로 설정되었으므로 일반적인 상황에서는 이 속성을 다시 설정할 필요가 없습니다. 그러나 이 값은 페이지에 있는 다른 요소의 Z-색인 값보다 커야 한다는 점에 유의해야 합니다. target rel 속성이 지정되지 않은 경우 오버레이 프롬프트 상자인 경우 이 속성을 통해 오버레이 프롬프트 상자 요소를 설정할 수 있습니다. onBeforeLoad 없음 콜백 함수, 이 속성은 오버레이 프롬프트 상자가 트리거되기 전에 실행됩니다. 함수가 false를 반환하면 오버레이 프롬프트가 발생합니다. 상자가 차단되어 표시되지 않습니다. onLoad None 콜백 함수, 이 속성은 오버레이 프롬프트 상자가 트리거된 후 실행됩니다. onBeforeClose 없음 콜백 함수. 이 속성은 오버레이 프롬프트 상자 닫기 이벤트가 트리거된 후 오버레이 프롬프트 상자가 닫히기 전에 실행됩니다. 오버레이 프롬프트 상자가 닫히지 않도록 하려면 false를 반환합니다. onClose 없음 콜백 함수. 이 속성은 오버레이 프롬프트 상자가 닫힌 후에 트리거됩니다. api FALSE 이 속성 설정은 동일합니다. 선택기로, 탭 기능의 API 속성. 이 속성의 의미는 이 시리즈의 선택기 및 탭 관련 지침을 참조하세요.

또한 툴팁은 오버레이 객체를 얻기 위한 일련의 방법을 제공합니다. 구체적인 사용 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//자동으로 오버레이를 표시합니다. (트리거할 필요가 없습니다. 페이지에 로드됩니다. 완료되면 자동으로 트리거됩니다.)
setTimeout(function(){overlayObj.close();},2000);//2초 후 자동으로 로드됩니다(나타남). 프롬프트 상자가 숨겨집니다
$("#overlayInfo") .append("

overlay is open:" overlayObj.isOpened() "

");//오버레이가 있는지 확인 이때 표시되는 메시지 상자
                                                                                               > ;
$("#overlayInfo").append("

overlay content:" overlayObj.getContent().html() "

"); OnbeforeLoad = Function () {
경고 (this.getContent ().Atr ("ID");
}


다음은 Overlay 객체 설명에 대한 설명입니다.

방법

기본값	설명
load()	오버레이	오버레이 프롬프트 상자를 여는 또 다른 방법입니다. 이 방법으로는 다음을 수행할 수 없습니다. pass 페이지 이벤트가 발생하고 js 스크립트를 통해 오버레이 프롬프트 상자가 직접 열립니다.
close()	오버레이	(js 스크립트에서 이 메소드 호출을 통해) 팝업 오버레이 프롬프트 상자를 닫습니다.
isOpened()	부울	현재 오버레이 프롬프트 상자가 열려 있는지 확인합니다. 현재 오버레이 프롬프트 상자가 열려 있으면 true를 반환합니다.
getBackgroundImage()	jQuery	현재 오버레이 프롬프트 상자의 배경 이미지를 jquery 객체로 반환합니다.
getContent()	jQuery	오버레이 팝업 상자의 콘텐츠를 jquery 객체로 반환합니다.
getTrigger()	jQuery	오버레이 팝업 상자를 실행하는 요소는 jquery 개체로 반환됩니다.
getConf()	객체	팝업박스가 초기화되면 overlay의 구성 객체를 가져옵니다.
api	거짓	구성 객체의 api와 동일합니다.
onBeforeLoad(fn)	API	구성 파일의 onBeforeLoad 속성과 동일합니다.
onLoad(fn)	API	동일한 구성 파일 onLoad 속성에서.
onBeforeClose(fn)	API	동일한 구성 파일 onBeforeClose 속성에서.
onClose(fn)	API	동일한 구성 파일 onClose 속성에서.

마지막으로 전체 샘플 코드가 제공됩니다.

코드 복사 코드는 다음과 같습니다.

br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">

"); //判断此时是否有overlay提示框是否显示
        $("#overlayInfo").append("

오버레이 배경 이미지:" overlayObj.getBackgroundImage() "

");
        $("#overlayInfo").append("

오버레이 트리거:" overlayObj.getTrigger() "

");
        $("#overlayInfo").append("

overlay config-speed:" overlayObj.getConf().speed "

");
        $("#overlayInfo").append("

오버레이 콘텐츠:" overlayObj.getContent().html() "

");

        overlayObj.onBeforeLoad=function(){
            alert(this.getContent().attr("id"));
        }
});
// -->
오버레이 열기
기타 오버레이

    

여기 내 오버레이가 있습니다

    

        $$$$$$$$$$
    

    

         Class aptent taciti socialsqu ad litora talknt per conubia nostra,
         per inceptos Himenaeos. Donec lorem ligula, elementum vitae,
         imperdiet a, posuere nec, ante. Quisque mattis Massa id metus.
    

    

여기 또 다른 오버레이가 있습니다

    

         Class aptent taciti socialsqu ad litora talknt per conubia nostra,
         per inceptos Himenaeos. Donec lorem ligula, elementum vitae,
         imperdiet a, posuere nec, ante. Quisque mattis Massa id metus.
    

    

        닫기