Latest web development tutorials

jQuery를 UI API - 회전 부재 (스피너 위젯)

범주

위젯 (위젯)

용법

설명 : 위 / 아래 화살표 버튼과 키 처리, 입력 값 향상된 텍스트 입력 기능을 제공합니다.

새로운 버전 : 1.9

회 전자 (회 전자), 또는 단계들의 수를 (번호 스테퍼 위젯) 제어는 다양한 디지털 입력을 완벽하게 제어 처리에 사용된다. 그것은 사용자가 직접 값을 입력하거나, 키보드, 마우스 휠을 통해 기존의 값을 변경할 회전 할 수 있습니다. 세계화 (세계화)와 결합하면, 당신도 다른 지역에서의 표시 통화와 날짜를 회전 할 수 있습니다.

두 개의 버튼을 사용하여 회 전자 (회 전자)의 증가에 대한 텍스트 범위를 입력하고 현재 값을 감소합니다. 동일한 증가와 감소를 수행하기 위해 키보드를 사용할 수 있도록 회 전자 키 이벤트를 추가한다. 의 회 전자 대표 글로벌화 (세계화) 디지털 포맷과 해상도입니다.

키보드 상호 작용

  • UP는 : 가치를 한 단계 높일 수 있습니다.
  • DOWN : 값 단계를 줄일 수 있습니다.
  • PAGE UP은 : 값을 증가시킵니다.
  • PAGE DOWN은 : 값을 감소시킵니다.

마우스로 회전 버튼을 클릭하면, 초점은 텍스트 필드에 남아 있습니다.

회가 읽을 때 ( <input readonly> ), 사용자 (최대 증가 또는 감소 불일치, 숫자가 아닌 입력보다 큰 최소 미만) 잘못된 값을 초래할 수있는 값을 입력 할 수 있습니다. 증가 또는 감소, 프로그래밍 방식 또는 회전 버튼의 방법으로는, 값이 유효한 값으로 강제 될 경우 (자세한 내용은 다음을 참조하시기 바랍니다 stepUp() 및 stepDown() 설명한다.

테마

사용하는 회전 부재 (스피너 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일의 스피너를 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :

  • ui-spinner 회 외부 용기 :.
    • ui-spinner-input 인스턴스화 회전 부재 (스피너 위젯) : <input> 요소입니다.
    • ui-spinner-button : 회전이 증가하거나 버튼 컨트롤의 값을 감소하는 데 사용됩니다. 버튼까지 추가로 제공됩니다 ui-spinner-up 추가와 버튼 다운, 클래스, ui-spinner-down , 클래스입니다.

의존

추가 정보

  • 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.
  • 요소의 값이 변경 네이티브 실행되지 않는 경우에 있도록 프로그래밍 요소의 요소 값을 조작 change 이벤트.
  • 그것은 지원하지 않습니다 <input type="number"> 는 로컬 UI 회 전자와의 충돌을 야기하기 때문에, 선택을 만듭니다.

예

일반 디지털 선택. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 회전 부재 (스피너 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<입력 한 id = "회">
 
<스크립트>
$ ( "#spinner") .spinner ();
</ 스크립트>
 
</ BODY>
</ HTML>