스핀 버튼 사용자 정의 텍스트 상자 값은 jQuery_jquery에 따라 증가하거나 감소합니다.

양식을 디자인할 때 텍스트 상자에 대한 값 자동 증가 또는 자동 감소 기능을 구현해야 하는 경우가 있습니다. 예를 들어 기본값은 1입니다. 지정된 단계 값을 높이려면 위로 버튼을 클릭하고 아래로 버튼을 클릭하면 됩니다. 지정된 단계 값을 줄입니다. jQuery 플러그인을 사용하면 이 기능을 구현하는 데 몇 줄의 코드만 필요합니다.

사용 지침
1. jQuery 라이브러리 파일과 jQuery Spin Button라이브러리 파일(현재 버전 1.1.1)을 사용해야 합니다.

재료 준비
상하 버튼 사진, 기본 경로:/img/spin/, 위쪽 및 아래쪽 버튼 그림 이름: spin-button.png, 사용자 정의 수정 가능

예제 코드
1, 파일 부분 포함

코드 복사 코드는 다음과 같습니다.

2. HTML 부분(사용자 정의 텍스트 상자)

코드 복사 코드는 다음과 같습니다.

세 번째, javascript 부분(jQuery 플러그인 jQuery Spin Butt에서 호출)

코드 복사 코드는 다음과 같습니다.

< ;script type="text/javascript">
$(document).ready(function(){
$('#number').spin();
})
< ;/script>

위에서 볼 수 있듯이 jQuery 플러그인 jQuery Spin Button을 사용하여 텍스트 상자 값을 늘리거나 줄이려면 매우 간단합니다. 버튼 이미지와 값의 초기 값만 설정하면 됩니다. . 사용자 정의 텍스트 상자의 값을 자체적으로 늘리거나 줄이는 기능을 구현합니다.

4가지, 사용자 정의 구성
imageBasePath: '/img/spin/', 버튼 이미지 경로
spinBtnImage: 'spin-button.png', 이미지 버튼 이미지 이름
spinUpImage: 'spin-up.png', 상승 증가 버튼의 이미지 이름
spinDownImage: 'spin-down.png', 하향 감소 버튼의 이미지 이름
간격: 1, 단계 값
max : null , 최대값
min: null, 최소값
timeInterval: 500, 클릭 시간 간격
timeBlink: 200 클릭 깜박임 시간

1, 사용자 정의 단계 값은 10(코드는 위의 자바스크립트 부분과 동일)
$('#number').spin({interval:10})

2, 최대값과 최소값을 맞춤설정하세요 ​​
$('# number').spin( {max:100,min: -100});

3, 사용자 정의 버튼 이미지 경로
$('#number').spin({imageBasePath: '/images/ '});

jQuery 플러그인 jQuery 스핀 버튼 사용자 정의 구성은 개인화된 텍스트 상자 값 자동 증가 및 감소 기능을 사용자 정의하는 데 매우 편리하며 일반적으로 사용도 매우 간단합니다. 사용자 정의 텍스트 상자 값 자동 증가 또는 감소가 사용됩니다. jQuery 플러그인 jQuery Spin Button은 한 줄의 코드로 쉽게 완료할 수 있습니다.
데모 보기: http://demo.jb51.net/js/jquery-spin/index.html