jQuery를 UI 예 - 도구 설명 상자 (도구 설명)
사용자 정의, themable 도구 설명 상자, 기본 도구 설명 상자를 교체합니다.
툴팁 멤버에 대한 자세한 내용은 API 문서를 참조하십시오 툴팁 상자 부재 (위젯을 도움말) .
기본 기능
링크에 마우스를 가져 가면, 각 요소에 초점을 순환에 탭 키를 사용합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 기본 기능 </ 제목>
<링크 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">
<스크립트>
$ (함수 () {
$ (문서) .tooltip ();
});
</ 스크립트>
<스타일>
라벨 {
디스플레이 : 인라인 블록;
폭 : 5em;
}
</ 스타일>
</ 헤드>
<바디>
<P> <a href="#" title="部件的名称"> 툴팁 </a>에이 모든 요소에 바인딩 할 수 있습니다. 당신이 요소 위에 마우스를 가져 가면, 제목 속성은 도구 설명 상자와 같은 기본으로, 다음 요소에 작은 상자에 표시됩니다. </ P>
<P> 그러나, 스타일을 정의 할 수 있도록 네이티브 툴팁 박스 없기 때문에. <a의 href="http://themeroller.com" title="ThemeRoller:jQuery UI에 의해 테마 的主题创建应用程序"> ThemeRoller </a>를 생성하면 그에 따라 툴팁 상자의 스타일을 정의 할 수 있습니다. </ P>
<P> 툴팁 박스는 각 영역에 추가 정보를 표시하는 소자를 형성하는데 사용될 수있다. </ P>
<P> 나이 < "나이"= 레이블이> : </ 라벨> <입력 한 id = "나이"제목 = ". 나이는 통계에 사용되는"> </ P>
<P> 도구 설명 상자를 볼 수있는 해당 영역 위로 마우스를. </ P>
</ BODY>
</ HTML>
사용자 지정 스타일
링크에 마우스를 가져 가면, 각 요소에 초점을 순환에 탭 키를 사용합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 사용자 지정 스타일 </ 제목>
<링크 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">
<스크립트>
$ (함수 () {
$ (문서) .tooltip ({
위치 : {
내 "중앙 하단-20",
에서 "중앙 상단"
사용 : 기능 (위치, 피드백을) {
$ (이) .CSS (위치);
$ ( "<DIV>")
.addClass ( "화살표")
.addClass (feedback.vertical)
.addClass (feedback.horizontal)
.appendTo (이에게);
}
}
});
});
</ 스크립트>
<스타일>
.ui-도구 설명, .arrow : {후
배경 : 검정;
국경 : 2 픽셀 백색 고체;
}
.ui-툴팁 {
패딩 : 10px 20 픽셀;
색상 : 흰색;
국경 반경 : 20 픽셀;
폰트 : 굵은 14px "헬 베티 뉴", 산세 - 세리;
텍스트 - 변환 : 대문자;
상자 그림자 : 블랙 0 0 7px;
}
.arrow {
폭 : 70 픽셀;
높이 : 16px;
오버 플로우 : 숨겨진;
위치 : 절대;
좌측 : 50 %;
마진 왼쪽 : -35px;
바닥 : -16px;
}
.arrow.top {
상단 : -16px;
바닥 : 자동;
}
.arrow.left {
왼쪽 : 20 %;
}
.arrow : 후 {
내용 : "";
위치 : 절대;
왼쪽 : 20 픽셀;
상단 : -20px;
폭 : 25 픽셀;
높이 : 25 픽셀;
상자 그림자 : 6 픽셀 5px 9px -9px 블랙;
-webkit-변환 : 회전 (45deg);
(45deg) 회전; -moz-변환
(45deg) 회전; -ms는-변환
-o-변환 : 회전 (45deg를);
tranform : 회전 (45deg);
}
.arrow.top : 후 {
바닥 : -20px;
상단 : 자동;
}
</ 스타일>
</ 헤드>
<바디>
<P> <a href="#" title="部件的名称"> 툴팁 </a>에이 모든 요소에 바인딩 할 수 있습니다. 당신이 요소 위에 마우스를 가져 가면, 제목 속성은 도구 설명 상자와 같은 기본으로, 다음 요소에 작은 상자에 표시됩니다. </ P>
<P> 그러나, 스타일을 정의 할 수 있도록 네이티브 툴팁 박스 없기 때문에. <a의 href="http://themeroller.com" title="ThemeRoller:jQuery UI에 의해 테마 的主题创建应用程序"> ThemeRoller </a>를 생성하면 그에 따라 툴팁 상자의 스타일을 정의 할 수 있습니다. </ P>
<P> 툴팁 박스는 각 영역에 추가 정보를 표시하는 소자를 형성하는데 사용될 수있다. </ P>
<P> 나이 < "나이"= 레이블이> : </ 라벨> <입력 한 id = "나이"제목 = ". 나이는 통계에 사용되는"> </ P>
<P> 도구 설명 상자를 볼 수있는 해당 영역 위로 마우스를. </ P>
</ BODY>
</ HTML>
사용자 지정 애니메이션
이 예는 애니메이션을 사용자 정의 할 수, 당신은 또한 오픈 이벤트를 사용할 수있는 애니메이션을 사용자 정의 할 쇼 숨기기 옵션을 사용하는 방법을 보여줍니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 사용자 지정 애니메이션 </ 제목>
<링크 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">
<스크립트>
$ (함수 () {
$ ( "#보기 - 옵션") .tooltip ({
쇼 : {
효과 : "slideDown"
지연 : 250
}
});
$ ( "# 숨기기 - 옵션") .tooltip ({
숨기기 {
효과 : "폭발",
지연 : 250
}
});
$ ( "# 오픈 이벤트") .tooltip ({
쇼 : 널 (null),
위치 : {
내 "상단 왼쪽",
에서 "왼쪽 하단"
},
오픈 : 함수 (이벤트, UI) {
ui.tooltip.animate ({가기 : ui.tooltip.position () 최고 + 10}, "빨리");
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 툴팁 상자 애니메이션을 사용자 정의하는 방법에는 여러 가지가 있습니다. </ P>
<P> 당신은 <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> 쇼 </a>를 사용하고 있습니다 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide"는 </a>에 옵션을 숨길 title="爆炸隐藏">. </ P>
<P> 또한 <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> 오픈 </a>을 사용할 수 있습니다 이벤트. </ P>
</ BODY>
</ HTML>
사용자 지정 내용
단일 인스턴스에 다른 이벤트 위임 도구 설명 상자를 결합하는 항목과 내용의 옵션을 사용자 정의하는 방법을 보여줍니다.
당신은 실현 될 수있는 기능의 향후 버전 툴팁 상자의 상호 작용을지도해야 할 수도 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 사용자 정의 컨텐츠 </ 제목>
<링크 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">
<스타일>
.photo {
폭 : 300 픽셀;
텍스트 정렬 : 센터;
}
.photo .ui-위젯 헤더 {
마진 : 1em 0;
}
.MAP {
폭 : 350px;
높이 : 350px;
}
.ui-툴팁 {
최대 폭 : 350px;
}
</ 스타일>
<스크립트>
$ (함수 () {
$ (문서) .tooltip ({
항목 : "IMG, [데이터-지역], [제목]",
내용 : 함수 () {
VAR 요소 = $ (이);
경우 (element.is ( "[데이터 지오]")) {
변수 텍스트 = element.text ();
반환 "<IMG 클래스 = '지도'고도 = '"+ 텍스트 +
" '의 Src ='HTTP : //maps.google.com/maps/api/staticmap?"+
"줌 = 11 크기 = 350x350 및지도 유형 = 지형 및 센서 = 거짓 센터 ="+
텍스트 + " '>";
}
경우 (element.is ( "[제목]")) {
( "제목") element.attr 반환;
}
경우 (element.is ( "IMG")) {
( "고도")을 element.attr 반환;
}
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯의 사진">
<사업부 클래스 = "UI 위젯 헤더 UI 코너 - 모든">
<H2> 성 스테판 성당 (성 스테판 성당) </ H2>
<H3> <a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo=""> 비엔나, 오스트리아 (비엔나, 오스트리아) </A> < / H3>
</ DIV>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<IMG SRC = "../ WP - 콘텐츠 / 업로드 / 2014/03 / 일 - stephens.jpg"ALT = "성 스테판 성당 (세인트 스티븐 & APOS;의 성당)"클래스 = "UI 코너 - 모든">
</a>를
</ DIV>
<사업부 클래스 = "UI 위젯의 사진">
<사업부 클래스 = "UI 위젯 헤더 UI 코너 - 모든">
<H2> 타워 브릿지 (타워 브리지) </ H2>
<H3> <a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo=""> 런던 (런던, 영국) </A> < / H3>
</ DIV>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<IMG SRC = "../ WP - 콘텐츠 / 업로드 / 2014/03 / 타워 bridge.jpg"ALT = "타워 브릿지 (타워 브리지)"클래스 = "UI 코너 - 모든">
</a>를
</ DIV>
<a href="http://commons.wikimedia.org/wiki/Main_Page"> 위키 미디어 공용 <P> 모든 사진 </a>를, 그리고 <A HREF = "http://creativecommons.org/가 소유 BY-SA 3.0 </a>를 저작권 소유자에서 라이센스 / 별 SA / 3.0 / deed.en "제목 ="크리에이티브 커먼즈 저작자 표시 - 동일 3.0 "> CC. </ P>
</ BODY>
</ HTML>
형태
도움말 텍스트를 표시하거나 입력 상자 위에 마우스 호버하자 또는 포커스가 입력 상자가 아래 버튼을 사용하여, 당신은 입력 상자에 해당 도움말 텍스트를 표시 할 수 있습니다.
그 동시에 모든 도움말 텍스트가보다 일관된 모양 표시, 그래서 CSS에 고정 폭을 정의합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 양식 </ 제목>
<링크 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">
<스타일>
라벨 {
디스플레이 : 인라인 블록; 폭 : 5em;
}
FIELDSET의 사업부 {
마진 - 하단 : 2EM;
}
FIELDSET .help {
디스플레이 : 인라인 블록;
}
.ui-툴팁 {
폭 : 210px;
}
</ 스타일>
<스크립트>
$ (함수 () {
var에 툴팁 = $ ( "[제목]") .tooltip ();
$ ( "<버튼>")
는 .text ( "제품보기 도움")
.button ()
.click (함수 () {
tooltips.tooltip ( "오픈");
})
.insertAfter ( "양식");
});
</ 스크립트>
</ 헤드>
<바디>
<양식>
<FIELDSET>
<DIV>
<= "FIRSTNAME"에 대한 라벨> 이름 </ 라벨>
<입력 한 id = "FIRSTNAME"이름 = "FIRSTNAME"제목 = "당신의 이름을 입력 해주세요.">
</ DIV>
<DIV>
성 </ 라벨> <= "LASTNAME"에 대한 라벨>
<입력 한 id = "LASTNAME"이름 = "LASTNAME"제목 = "마지막 이름을 입력하세요.">
</ DIV>
<DIV>
< "주소"= 대한 라벨> 주소 </ 라벨>
<입력 한 id = "주소"이름 = "주소"제목 = "집이나 직장 주소입니다.">
</ DIV>
</ FIELDSET>
</ FORM>
</ BODY>
</ HTML>
추적 마우스
요소 위로 마우스를 이동, 그것은 마우스의 움직임을 따를 때이 경우 툴팁 상자에서 마우스에 대해 위치한다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 마우스를 추적 </ 제목>
<링크 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">
<스타일>
라벨 {
디스플레이 : 인라인 블록;
폭 : 5em;
}
</ 스타일>
<스크립트>
$ (함수 () {
$ (문서) .tooltip ({
트랙 : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> <a href="#" title="部件的名称"> 툴팁 </a>에이 모든 요소에 바인딩 할 수 있습니다. 당신이 요소 위에 마우스를 가져 가면, 제목 속성은 도구 설명 상자와 같은 기본으로, 다음 요소에 작은 상자에 표시됩니다. </ P>
<P> 그러나, 스타일을 정의 할 수 있도록 네이티브 툴팁 박스 없기 때문에. <a의 href="http://themeroller.com" title="ThemeRoller:jQuery UI에 의해 테마 的主题创建应用程序"> ThemeRoller </a>를 생성하면 그에 따라 툴팁 상자의 스타일을 정의 할 수 있습니다. </ P>
<P> 툴팁 박스는 각 영역에 추가 정보를 표시하는 소자를 형성하는데 사용될 수있다. </ P>
<P> 나이 < "나이"= 레이블이> : </ 라벨> <입력 한 id = "나이"제목 = ". 나이는 통계에 사용되는"> </ P>
<P> 도구 설명 상자를 볼 수있는 해당 영역 위로 마우스를. </ P>
</ BODY>
</ HTML>
비디오 플레이어
같은 / 주 / 통계 버튼을 가상 비디오 플레이어, 사용자 지정 스타일 툴팁 상자의 각 버튼.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 도구 설명 상자 (도움말) - 비디오 플레이어 </ 제목>
<링크 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">
<스타일>
.player {
폭 : 500 픽셀;
높이 : 300 픽셀;
국경 : 2 픽셀 홈 회색;
배경 : RGB (200, 200, 200);
텍스트 정렬 : 센터;
라인 - 높이 : 300 픽셀;
}
.ui-툴팁 {
국경 : 1 픽셀 고체 흰색;
배경 : RGBA (20, 20, 20, 1);
색상 : 흰색;
}
은 .set {
디스플레이 : 인라인 블록;
}
.notification {
위치 : 절대;
디스플레이 : 인라인 블록;
글꼴 크기 : 2EM;
패딩 : .5em;
상자 그림자 : 2 픽셀 2 픽셀 5px -2px RGBA (0,0,0,0.5);
}
</ 스타일>
<스크립트>
$ (함수 () {
함수 {(입력) 알릴
var에 MSG는 + $ .trim (input.data ( "툴팁 제목") || input.text을 ()) "선택";
$ ( "<DIV>")
.appendTo (는 document.body)
는 .text (MSG)
.addClass ( "알림 UI 상태 기본 UI 코너 바닥")
.position ({
내 "중앙 상단"
에서 "중앙 상단"
의 : 창
})
.show ({
효과 : "블라인드"
})
.delay (1000)
.hide ({
효과 : "블라인드",
기간 : "천천히"
} 함수 () {
$ (이) .remove ();
});
}
$ ( "버튼") .each (함수 () {
VAR 버튼 = $ (이) .button ({
아이콘 : {
주 : $ (이) .DATA ( "아이콘")
},
텍스트 :! $ (이) .attr ( "제목")
});
button.click (함수 () {
(버튼)에 통보;
});
});
$ ( "은 .set") .buttonset ({
항목 : "단추"
});
$ (문서) .tooltip ({
위치 : {
내 "중앙 상단"
에서 "중앙 하단의 + 5"
},
쇼 : {
기간 : "빠른"
},
숨기기 {
효과 : "숨기기"
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "플레이어"> 여기에 비디오입니다 (HTML5?) </ DIV>
<사업부 클래스 = "도구">
<스팬 클래스 = "설정">
</ 버튼> 같은 <버튼 데이터 아이콘 "UI-아이콘 - 원 화살표-N"제목 "나는이 비디오를 좋아한다"=>
내가이 비디오를 좋아하지 않아 < "UI-아이콘 - 원 - 화살표들"= 버튼 데이터 아이콘> </ 버튼>
</ SPAN>
<사업부 클래스 = "설정">
<버튼 데이터 아이콘 = "UI-아이콘 - 원 플러스"제목 = "재생 목록에 추가"> 추가 </ 버튼>
<Button 클래스 = "메뉴"데이터 아이콘 = "UI-아이콘 삼각형-1의"> 즐겨 찾기에 추가 </ 버튼>
</ DIV>
<버튼 제목 = "이 동영상을 공유"> 공유 </ 버튼>
부적절한 </ 버튼>으로 표시 <버튼 데이터 아이콘 = "UI-아이콘-경고">
</ DIV>
</ BODY>
</ HTML>