최고의 의 jQuery UI 예 - 쇼 (보기) 튜토리얼 2024년, 이 튜토리얼에서는 .show () 데모,를 배울 수 있습니다.
일치하는 요소를 표시하는 사용자 지정 효과를 사용합니다.
에 대한 자세한 내용은 .show()
방법의 세부 사항은 API 문서를 참조하십시오 .show ()를 .
효과를 미리보기 버튼을 클릭합니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 효과 - .show () 데모 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> .toggler {폭 : 500 픽셀, 높이 200 픽셀;} #button {패딩 : .5em 1em; 텍스트 장식 : 없음;} #effect {폭 : 240 픽셀, 높이 : 135px; 패딩 : 0.4em; 위치 : 상대;} #effect H3 {여백 : 0; 패딩 : 0.4em; 텍스트 정렬 : 센터;} </ 스타일> <스크립트> $ (함수 () { // () {현재 선택된 효과 기능 runEffect을 실행 //은 () .val ( "#effectTypes") 효과 형 VAR selectedEffect = $ 파생; // 효과의 대부분은} {기본 배달 옵션 VAR 옵션 = 입력 할 필요가 없습니다; // 필요한 매개 변수와 일부 특수 효과 경우 (selectedEffect === "규모") { 옵션 = {퍼센트 : 100}; } 그렇지 경우 (selectedEffect === "크기") { 옵션 = {에 {폭 : 280, 높이 : 185}}; } // 실행 효과 $ ( "#effect") .show (selectedEffect, 옵션, 500, 콜백); }; // 콜백 함수 콜백 () { 에서는 setTimeout (함수 () { $ ( "#effect : 보이는") .removeAttr ( "스타일") .fadeOut (); }, 1000); }; () {선택한 메뉴 효과 $ ( "#button") .click (기능에 따라 값을 설정 // runEffect (); false를 반환; }); $ ( "#effect") .hide (); }); </ 스크립트> </ 헤드> <바디> <사업부 클래스 = "toggler"> <사업부 아이디 = "효과"클래스 = "UI 위젯 콘텐츠 UI 코너 - 모든"> <H3 클래스 = "UI 위젯 헤더 UI 코너 - 모든"> 디스플레이 (표시) </ H3> <P> Etiam 리베로 neque는가 lorem. Sed의 PEDE. Nulla의가 lorem metus, adipiscing 유타, 나오지도 luctus, hendrerit 이력서, 마일에서 언제나하는, eleifend 선관위을 luctus. </ P> </ DIV> </ DIV> <선택 이름 = "효과"ID = "effectTypes"> <옵션 값 = "블라인드"> 음영 효과 (블라인드 효과) </ 옵션> <옵션 값 = "바운스"> 효과 (바운스 효과) 회복 </ 옵션> <옵션 값 = "클립"> 클립 효과 (클립 효과) </ 옵션> <옵션 값 = "드롭"> 방문 효과 (드롭 효과) </ 옵션> <옵션 값 = "폭발"> 폭발 효과 (효과 분해) </ 옵션> <옵션 값 = "배"> 효과를 접는 (특수 효과를 접) </ 옵션> <옵션 값 = "강조"> 하이라이트 효과 (효과를 강조) </ 옵션> <옵션 값 = "퍼프"> 확장 효과 (퍼프 효과) </ 옵션> <옵션 값 = "뛰다"> 효과 (맥동 효과)를 이길 </ 옵션> <옵션 값 = "규모"> 줌 효과 (스케일 효과) </ 옵션> <옵션 값 = "흔들"> 진동 효과 (떨림 효과) </ 옵션> <옵션 값 = "크기"> 크기 효과 (사이즈 효과) </ 옵션> <옵션 값 = "슬라이드"> 슬라이드 효과 (특수 효과 슬라이드) </ 옵션> </ 선택> <a href="#" id="button" class="ui-state-default ui-corner-all"> 실행 효과 </a>에 </ BODY> </ HTML>