최고의 jQuery를 UI 예 - 회 전자 (회 전자) 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,통화,소수,지도,오버플로,시간,를 배울 수 있습니다.
은 / 아래 화살표 버튼과 키 처리, 입력 값 향상된 텍스트 입력 기능으로.
회 전자 멤버에 대한 자세한 내용은 API 문서를 참조하십시오 회전 부재 (스피너 위젯을) .
기본 회전.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 旋转器(Spinner) - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var spinner = $( "#spinner" ).spinner(); $( "#disable" ).click(function() { if ( spinner.spinner( "option", "disabled" ) ) { spinner.spinner( "enable" ); } else { spinner.spinner( "disable" ); } }); $( "#destroy" ).click(function() { if ( spinner.data( "ui-spinner" ) ) { spinner.spinner( "destroy" ); } else { spinner.spinner(); } }); $( "#getvalue" ).click(function() { alert( spinner.spinner( "value" ) ); }); $( "#setvalue" ).click(function() { spinner.spinner( "value", 5 ); }); $( "button" ).button(); }); </script> </head> <body> <p> <label for="spinner">选择一个值:</label> <input id="spinner" name="value"> </p> <p> <button id="disable">切换禁用/启用</button> <button id="destroy">切换部件</button> </p> <p> <button id="getvalue">获取值</button> <button id="setvalue">设置值为 5</button> </p> </body> </html>
이 예는 통화 옵션 및 회 전자의 수, 기부의 형태입니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 旋转器(Spinner) - 货币</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#currency" ).change(function() { $( "#spinner" ).spinner( "option", "culture", $( this ).val() ); }); $( "#spinner" ).spinner({ min: 5, max: 2500, step: 25, start: 1000, numberFormat: "C" }); }); </script> </head> <body> <p> <label for="currency">要捐款的货币</label> <select id="currency" name="currency"> <option value="en-US">US $</option> <option value="de-DE">EUR €</option> <option value="ja-JP">YEN ¥</option> </select> </p> <p> <label for="spinner">要捐款的数量:</label> <input id="spinner" name="spinner" value="5"> </p> </body> </html>
이 예는 소수 회입니다. 0.01의 증가합니다. 배양을 변경할 때 셀렉터의 현재 값을 읽어 문화적 변화를 다루는 코드는 새로운 문화 스타일에 기초하여 값을 재설정한다.
<! DOCTYPE html로> <HTML> <헤드> <메타 문자 집합 = "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 = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / jquery.mousewheel.js"> </ script> <스크립트 SRC = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / globalize.js"> </ script> <스크립트 SRC = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / globalize.culture.de-DE.js"> </ script> <스크립트 SRC = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / globalize.culture.ja-JP.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스크립트> $ (함수 () { $ ( "#spinner") .spinner ({ 단계 : 0.01, 하는 NumberFormat : "N" }); $ ( "#culture") .change (함수 () { VAR 전류 = $ ( "#spinner") .spinner ( "값"); Globalize.culture ($ (이) .val ()); $ ( "#spinner") .spinner ( "값"현재) }); }); </ 스크립트> </ 헤드> <바디> <P> <용 라벨 = "회"> 소수점 회 : </ 라벨> <입력 한 id = "회"이름 = "회"값 = "5.06"> </ P> <P> 문화의 형식 선택 < "문화"= 용 라벨> </ 라벨> <선택 한 id = "문화"> <옵션 값 = "선택"= 선택 "-EN EN"> 영어 </ 옵션> <옵션 값 = "드-DE"> 독일어 </ 옵션> <옵션 값 = "에서 ja-JP"> 일본 </ 옵션> </ 선택> </ P> </ BODY> </ HTML>
위도와 경도를 변경하는 스피너를 사용하여 Google지도 통합.
<! DOCTYPE html로> <HTML> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 회 전자 (회 전자) -지도 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "http://maps.google.com/maps/api/js?sensor=false"> </ script> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / jquery.mousewheel.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스크립트> $ (함수 () { latlong 함수 () { 반환 새로운은 google.maps.LatLng ($ ( "# 위도") 발 (), $ ( "#의 LNG") 발 () ko); } 위치 함수 () { map.setCenter (latlong ()); } $ ( "#lat, #lng") .spinner ({ 단계 : .001, 변경 : 위치, 중지 위치를 }); VAR지도 = 새로운 google.maps.Map ($ ( "#지도") [0], { 줌 : 8, 센터 : latlong () mapTypeId를 : google.maps.MapTypeId.ROADMAP }); }); </ 스크립트> <스타일> #map { 폭 : 500 픽셀; 높이 : 500 픽셀; } </ 스타일> </ 헤드> <바디> <용 = 레이블 "북"> 위도 </ 라벨> <입력 한 id = "위도"이름 = "북"값 = "44.797"> 로 <br> < "LNG"= 대한 라벨> 경도 </ 라벨> <입력 한 id = "경도"이름 = "경도"값 = "- 93.278"> <사업부 아이디 = "지도"> </ DIV> </ BODY> </ HTML>
-10에서 10 오버 플로우 회 제한. -10 10 이상, 오버 플로우의 가치, 그 반대의 경우.
<! DOCTYPE html로> <HTML> <헤드> <메타 문자 집합 = "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 = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / jquery.mousewheel.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스크립트> $ (함수 () { $ ( "#spinner") .spinner ({ 스핀 : 함수 (이벤트, UI) { 경우 (ui.value> 10) { $ (이) .spinner ( "값", -10); false를 반환; } 그렇지 경우 (ui.value <-10) { $ (이) .spinner ( "값", 10); false를 반환; } } }); }); </ 스크립트> </ 헤드> <바디> <P> </ 라벨> : 값을 선택 <= "회"에 대한 라벨> <입력 한 id = "회"이름 = "값"> </ P> </ BODY> </ HTML>
이 회 전자의 사용자 정의 부분에서 확장합니다. 플러그인 분석 및 사용자 정의 단계 및 페이지 옵션 출력 타임 스탬프하기 위해 글로벌화 (세계화)를 사용합니다. 위 / 아래 분 위 / 아래로 커서, 페이지 업 / 다운 시간 단위에 대한 / 감소.
<! DOCTYPE html로> <HTML> <헤드> <메타 문자 집합 = "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 = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / jquery.mousewheel.js"> </ script> <스크립트 SRC = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / globalize.js"> </ script> <스크립트 SRC = "/ 정적 /의 JS / jqueryui / 자원 / 데모 / 외부 / globalize.culture.de-DE.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스크립트> $ 된 .widget ( "Ui.timespinner", $의 .ui.spinner, { 옵션 : { // 두 번째 단계 : 60 * 1000, // H 페이지 : 60 }, _parse : 함수 (값) { 경우 (대한 typeof 가치 === "문자열") { {타임 스탬프 // 경우 (번호 (값) == 값)가 수 (값)을 반환; } + Globalize.parseDate (값)을 반환; } 값을 반환; }, _format : 함수 (값) { Globalize.format (새 날짜 (값), "t")을 반환; } }); $ (함수 () { $ ( "#spinner") .timespinner (); $ ( "#culture") .change (함수 () { VAR 전류 = $ ( "#spinner") .timespinner ( "값"); Globalize.culture ($ (이) .val ()); $ ( "#spinner") .timespinner ( "값"현재) }); }); </ 스크립트> </ 헤드> <바디> <P> <= "회"에 대한 라벨> 시간 회 : </ 라벨> <입력 한 id = "회"이름 = "회"값 = "오후 8시 반"> </ P> <P> 문화의 형식 선택 < "문화"= 용 라벨> </ 라벨> <선택 한 id = "문화"> <옵션 값 = "선택"= 선택 "-EN EN"> 영어 </ 옵션> <옵션 값 = "드-DE"> 독일어 </ 옵션> </ 선택> </ P> </ BODY> </ HTML>