jQuery를 UI 예 - 회 전자 (회 전자)
은 / 아래 화살표 버튼과 키 처리, 입력 값 향상된 텍스트 입력 기능으로.
회 전자 멤버에 대한 자세한 내용은 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") 발 () ..);
}
위치 함수 () {
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>