jQuery 대화 상자 대화 상자 이벤트 사용 예 analyze_jquery

이 문서의 예에서는 jQuery 대화 상자 대화 상자 이벤트의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

대화상자 이벤트

대화 응용 시나리오

대화 상자는 가장 일반적으로 사용되고 실용적인 기능입니다.

1) 정적 프롬프트 대화 상자, 대화 상자의 내용은 고정
2) 동적 프롬프트 대화 상자, 이벤트 소스에 따라 대화 상자의 내용이 변경됩니다
3) 마스크 대화상자, 대화상자가 뜨면 배경이 회색으로 바뀌어 선택할 수 없습니다

jQuery UI의 Dialog 컴포넌트를 사용하면 위의 세 가지 효과를 쉽게 얻을 수 있습니다

Dialog 구성 요소의 주요 기능은 드래그(Draggable) 및 크기 조정(Resizing)이 가능하다는 것입니다.

대화 상자 대화 상자의 사용도 매우 간단합니다. 요소를 선택한 후 이 요소에 ".dialog()"를 사용하여 대화 상자로 바꾸고 다음을 전달하여 대화 상자의 각 요소를 수정할 수 있습니다. 다양한 옵션 속성 클래스.

대개 대화 상자는 div 요소입니다.

<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>

다음 명령문은 기본 옵션 속성을 사용하여 대화 상자를 생성합니다.

jQuery("#divTip").dialog();

위 명령문을 실행하면 div 요소는 드래그 및 확장 가능한 대화 상자가 됩니다.

물론 이는 가장 간단한 애플리케이션일 뿐입니다. 대화 상자 구성 요소를 빠르게 시작하기 위해 전체 예제를 사용해 보겠습니다.

대화 상자 컨트롤을 사용하여 세 가지 특정 팝업 상자를 구현합니다.

하나는 정적 팝업 레이어입니다. 즉, 팝업 레이어의 내용이 고정되어 있습니다.

하나는 동적 팝업 레이어입니다. 즉, 이벤트의 트리거에 따라 팝업 레이어의 내용이 변경됩니다.

다른 하나는 공통 마스크 팝업 레이어입니다. 즉, 팝업 레이어가 표시된 후에는 팝업 레이어 이외의 페이지 요소가 작동할 수 없습니다.

먼저 페이지에 있는 몇 가지 요소의 HTML 스니펫을 살펴보세요.

<!—Demo 静态提示类弹出层—>
<div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.共享同一个静态弹出层，弹出层内容固定：</h3>
  <div>
   <spanid="spanShowTip1">显示提示</span>  <span id="spanShowTip2">显示提示</span>  
   <spanid="spanShowTip3">显示提示</span>   <span id="spanShowTip4">显示提示</span>  
  </div>
  <br/>
  <br/>
<!—Demo动态显示类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px">
  <h3>Demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3>
  <div>
   <spanid="spanShowDataTip1" data="颜色是红色">红色</span>     
<span id="spanShowDataTip2" data="颜色是绿色">绿色</span>    
</div>
</div>
<br />
<br />
<!—Demo.遮罩类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.弹出IFrame</h3>
  <div>
   <inputtype="button" id="bunShowIframe" name=" bunShowIframe" value="显示弹出层" />
  </div>
</div>

요소 페이지에 표시되는 요소는 팝업 레이어 표시 이벤트를 실행하는 데 사용됩니다.

팝업 레이어의 HTML 코드는 다음과 같습니다.

<!—提示类弹出层—>
<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>
<!—遮罩类弹出层—>
<div id="divIframe" title="iFrame 弹出层" style="text-align:center">
  <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe>
</div>

팝업 레이어는 div 요소입니다. 필요에 따라 표시되거나 숨겨집니다.

HTML 요소를 준비한 후 다음 단계는 jQuery UI의 Dialog 컨트롤을 적용하는 것입니다. 먼저, 초기화Dom에서 나중에 조작해야 하는 페이지 요소를 가져옵니다.

initializeDom:function(){//初始化DOM
  this.$spanShowTip=$("span[id^=spanShowTip]");
  this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
  this.$btnShowIframe=$("#btnShowIframe");
  this.$divTip=$("#divTip");
  tis.$divIframe=$("#divIframe");
}

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 특별 주제를 확인할 수 있습니다. "JQuery 전환 효과 및 기술 요약", "jQuery 드래그 효과 및 기술 요약 ", "JQuery 확장 기술 요약", "jQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", " jquery 선택기 사용법 요약 " 및 "jQuery 공통 플러그인 및 사용법 요약 "

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.