jQuery를 UI 예 - 슬라이더 (슬라이더)
값을 선택 핸들을 드래그합니다.
슬라이더 멤버에 대한 자세한 내용은 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">
<스크립트>
$ (함수 () {
$ ( "#slider") .slider ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "슬라이더"> </ DIV>
</ BODY>
</ HTML>
색상 선택기
세 슬라이더의 조합은 간단한 RGB 색상 선택기를 만들 수 있습니다.
<! 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">
<스타일>
#red, #green, #blue {
플로트 : 왼쪽;
분명 : 왼쪽;
폭 : 300 픽셀;
여백 : 15 픽셀;
}
#swatch {
폭 : 120 픽셀;
높이 : 100 픽셀;
여백 - 가기 : 18px;
마진 왼쪽 : 350px;
배경 이미지 : 없음;
}
#red .ui-슬라이더 범위 {배경 : #의 ef2929;}
#red .ui-슬라이더 핸들 {테두리 색 : #의 ef2929;}
#green .ui-슬라이더 범위 {배경 : # 8ae234;}
#green .ui-슬라이더 핸들 {테두리 색 : # 8ae234;}
#blue .ui-슬라이더 범위 {배경 : #의 729fcf;}
#blue .ui-슬라이더 핸들 {테두리 색 : # 729fcf;}
</ 스타일>
<스크립트>
함수 hexFromRGB (R, G, B) {
VAR 육각 = [
r.toString (16)
g.toString (16)
b.toString (16)
]
$의 .each (16 진수, 기능 (NR, 발) {
경우 (val.length의 === 1) {
헥스 [NR] = "0"+ 브로;
}
});
() ( "") .toUpperCase hex.join 반환;
}
refreshSwatch 함수 () {
var에 빨간색 = $ ( "#red") .slider ( "값"),
녹색 = $ ( "#green") .slider ( "값"),
파란색 =의 $ ( "#blue") .slider ( "값"),
헥스 = hexFromRGB (적색, 녹색, 청색);
$ ( "#swatch")에 .css ( "배경 색", "#"+ 16 진수);
}
$ (함수 () {
$ ( "#red, #green, #blue") .slider ({
방향 : "수평"
범위 : "분"
최대 : 255,
값 : 127,
슬라이드 : refreshSwatch을,
변경 : refreshSwatch
});
$ ( "#red") .slider ( "값", 255);
$ ( "#green") .slider ( "값", 140);
$ ( "#blue") .slider ( "값", 60);
});
</ 스크립트>
</ 헤드>
<바디 클래스 = "UI 위젯 콘텐츠"스타일 = "테두리 : 0;">
<P 클래스 = "UI 상태 기본 UI 코너 - 모든 UI 헬퍼 - clearfix"스타일 = "패딩 : 4 픽셀;">
<스팬 클래스 = "UI-아이콘 UI를-아이콘 연필"스타일 = "플로트 : 왼쪽, 여백 : -2px 5px 0 0;"> </ SPAN>
간단한 색상 선택기 </ P>
<사업부 아이디 = "빨간색"> </ DIV>
<사업부 아이디 = "녹색"> </ DIV>
<사업부 아이디 = "파란색"> </ DIV>
<사업부 아이디 = "견본"클래스 = "UI 위젯 콘텐츠 UI 코너 - 모든"> </ DIV>
</ BODY>
</ HTML>
슬라이더 복수
수평 및 수직 슬라이더 자체 옵션으로 각각의 조합은 음악 플레이어 UI를 생성한다.
<! 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">
<스타일>
#eq 범위 {
높이 : 120 픽셀, 플로트 : 왼쪽, 여백 : 15 픽셀
}
</ 스타일>
<스크립트>
$ (함수 () {
{(마스터 볼륨 $ ( "#master") .slider을 설정 //
값 : 60,
방향 : "수평"
범위 : "분"
애니메이션 : 사실
});
() {그래픽 이퀄라이저 $ ( "#eq> 기간") .each (기능을 설정 //
// 태그의 초기 값을 읽어 들여, VAR 값 =에서는 parseInt ($ (이)는 .text (), 10)를 제거;
$ (이) .empty (). 슬라이더 ({
값 : 값,
범위 : "분"
애니메이션 : 사실,
방향 : "수직"
});
});
});
</ 스크립트>
</ 헤드>
<바디>
<P 클래스 = "UI 상태 기본 UI 코너 - 모든 UI 헬퍼 - clearfix"스타일 = "패딩 : 4 픽셀;">
<스팬 클래스 = "UI-아이콘 UI를-아이콘 - 볼륨의"스타일 = "플로트 : 왼쪽, 여백 : -2px 5px 0 0;"> </ span>을
마스터 볼륨 </ P>
<사업부 아이디 = "마스터"스타일 = "너비 : 260px; 여백 : 15 픽셀;"> </ DIV>
<P 클래스 = "UI 상태 기본 UI 코너 모두"스타일 = "패딩 : 4 픽셀, 여백 - 가기 : 4em;">
<스팬 클래스 = "UI-아이콘 UI를-아이콘 신호"스타일 = "플로트 : 왼쪽, 여백 : -2px 5px 0 0;"> </ SPAN>
그래픽 이퀄라이저 </ P>
<사업부 아이디 = "EQ">
<SPAN> 88 </ SPAN>
<SPAN> 77 </ SPAN>
<SPAN> 55 </ SPAN>
<SPAN> 33 </ SPAN>
<SPAN> 40 </ SPAN>
<SPAN> 45 </ SPAN>
<SPAN> 70 </ SPAN>
</ DIV>
</ BODY>
</ HTML>
범위 슬라이더
설정 range 옵션이 드래그 핸들 값의 범위를 얻기 위해, 사실이다. 다른 배경 색상 제어 핸들 간격의 값은 선택 나타낼 채운다.
<! 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">
<스크립트>
$ (함수 () {
$ ( "# 슬라이더 범위") .slider ({
범위 : 사실,
분 : 0,
최대 : 500,
값 : 75, 300,
슬라이드 : 함수 (이벤트, UI) {
$ ( "#amount") .val ( "$"+ Ui.values [0] + "- $"+ ui.values [1]);
}
});
$ ( "#amount") .val ( "$"+ $ ( "# 슬라이더 범위") .slider ( "값", 0) +
"- $"+ $ ( "# 슬라이더 범위") .slider ( "값", 1));
});
</ 스크립트>
</ 헤드>
<바디>
<P>
< "양"= 대한 라벨> 가격 범위 : </ 라벨>
<입력 유형 = "텍스트"ID = "양"스타일 = "테두리 : 0; 색상 : #의 f6931f; 글꼴 - 무게 : 굵게;">
</ P>
<사업부 아이디 = "슬라이더 범위"> </ DIV>
</ BODY>
</ HTML>
고정 된 최대 범위
슬라이더의 최대 범위를 해결하면, 사용자는 최소를 선택할 수있다. 설정 range 옵션을 "최대".
<! 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">
<스크립트>
$ (함수 () {
$ ( "# 슬라이더 범위 - 최대") .slider ({
범위 : "최대"
분 : 1,
최대 : 10,
값 : 2,
슬라이드 : 함수 (이벤트, UI) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# 슬라이더 범위 - 최대") .slider ( "값"));
});
</ 스크립트>
</ 헤드>
<바디>
<P>
< "양"= 대한 라벨> 객실의 최소 번호 : </ 라벨>
<입력 유형 = "텍스트"ID = "양"스타일 = "테두리 : 0; 색상 : #의 f6931f; 글꼴 - 무게 : 굵게;">
</ P>
<사업부 아이디 = "슬라이더 범위 - 최대"> </ DIV>
</ BODY>
</ HTML>
고정 된 최소 범위
최소 고정 범위 슬라이더, 사용자는 최대 값을 선택할 수있다. 설정 range 옵션 "분".
<! 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">
<스크립트>
$ (함수 () {
$ ( "# 슬라이더 범위 분") .slider ({
범위 : "분"
값 : 37,
분 : 1,
최대 : 700,
슬라이드 : 함수 (이벤트, UI) {
$ ( "#amount") .val ( "$"+ Ui.value);
}
});
$ ( "#amount") .val ( "$"+ $ ( "# 슬라이더 범위 분") .slider ( "값"));
});
</ 스크립트>
</ 헤드>
<바디>
<P>
최고 가격 < "양"= 용 라벨> </ 라벨>
<입력 유형 = "텍스트"ID = "양"스타일 = "테두리 : 0; 색상 : #의 f6931f; 글꼴 - 무게 : 굵게;">
</ P>
<사업부 아이디 = "슬라이더 범위 분"> </ DIV>
</ 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">
<스크립트>
$ (함수 () {
VAR ( "#minbeds") = $을 선택;
VAR 슬라이더 = $ ( "<DIV ID = '슬라이더'> </ DIV>") .insertAfter는 (선택) .slider ({
분 : 1,
최대 : 6,
범위 : "분"
값 : [0] .selectedIndex + 1을 선택,
슬라이드 : 함수 (이벤트, UI) {
선택 [0] .selectedIndex = ui.value - 1;
}
});
$ ( "#minbeds") .change (함수 () {
slider.slider ( "값", this.selectedIndex + 1);
});
});
</ 스크립트>
</ 헤드>
<바디>
<양식 ID = "예약">
침대의 최소 개수 <= "minbeds"에 대한 라벨> </ 라벨>
<선택 이름 = "minbeds"ID = "minbeds">
<옵션> 1 </ 옵션>
<옵션> 2 </ 옵션>
<옵션> 3 </ 옵션>
<옵션> 4 </ 옵션>
<옵션> 5 </ 옵션>
<옵션> 6 </ 옵션>
</ 선택>
</ 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">
<스타일>
.scroll-창 {오버 플로우 : 자동; 폭 : 99 %; 플로트 : 왼쪽;}
.scroll 콘텐츠 {폭 : 2440px; 플로트 : 왼쪽;}
.scroll 콘텐츠 항목 {폭 : 100 픽셀, 높이 100 픽셀; 플로트 : 왼쪽, 여백 : 10px; 글꼴 크기 : 3em; 라인 - 높이 : 96px; 텍스트 정렬 : 센터;}
.scroll 바 랩 {맑은는 : 왼쪽으로 패딩 : 0 4 픽셀 0 2 픽셀; 마진 : 0 -1px -1px -1px;}
.scroll 바 - 랩 .ui-슬라이더 {배경 : 없음; 국경 : 0; 높이 : 2EM; 여백 : 0 자동;}
.scroll 바 랩 .ui-핸들 도우미 부모 {위치 : 상대; 폭 : 100 %; 높이 : 100 %; 여백 : 0 자동;}
{맨 : .2em는, 높이 : 1.5em;} .scroll 바 - 랩 .ui-슬라이더 핸들
.scroll 바 랩 .ui-슬라이더 핸들 .ui-아이콘 {마진 : -8px 자동 0; 위치 : 상대; 최고 : 50 %;}
</ 스타일>
<스크립트>
$ (함수 () {
// 스크롤 패널 부 var에 스크롤 = $ ( ".scroll-창"),
scrollContent = $ ( ".scroll 콘텐츠");
// {(슬라이더 var에 스크롤 = $ ( ".scroll 바") .slider 만들기
슬라이드 : 함수 (이벤트, UI) {
경우 (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "여백 왼쪽", Math.round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "픽셀");
} 그밖에 {
scrollContent.css ( "여백 왼쪽", 0);
}
}
});
// ( ".ui-슬라이더 핸들") var에 handleHelper = scrollbar.find을 처리하기 위해 아이콘을 추가
.mousedown (함수 () {
scrollbar.width (handleHelper.width ());
})
.mouseup (함수 () {
scrollbar.width ( "100 %");
})
으로 .Append ( "<스팬 클래스 = '▽를-아이콘 UI를-아이콘 그립-곳곳에 수직'> </ SPAN>")
.wrap ( "<DIV 클래스 = '▽를 핸들 헬퍼 부모'> </ DIV>") .parent ();
슬라이더 손잡이 스크롤 때문에, 오버 플로우 부분 scrollPane.css ( "오버 플로우", "숨겨진")을 숨길 변경 //;
// 스크롤링 거리를 스크롤 바의 크기와 핸들 기능 sizeScrollbar의 비율에 의해 정의에 따르면 () {
var에 나머지 = scrollContent.width () - scrollPane.width ();
VAR 비율 = 나머지 / scrollContent.width ();
VAR handleSize = scrollPane.width () - (비율 * scrollPane.width ());
scrollbar.find ( ".ui-슬라이더 핸들")에 .css ({
폭 : handleSize,
"여백 왼쪽"-handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// 콘텐츠 기반 스크롤 위치 () {슬라이더 resetValue 함수의 값을 재설정
var에 나머지 = scrollPane.width () - scrollContent.width ();
VAR leftVal = scrollContent.css ( "여백 왼쪽") === "자동"0?
에서는 parseInt (scrollContent.css ( "마진 왼쪽"));
VAR 비율 = Math.round (leftVal / 나머지 * 100);
scrollbar.slider ( "값", 비율);
}
// 슬라이더 100 %, 및 윈도우가 증가함에 따라, 표시 기능을 reflowContent (이면) {
VAR 보여주는 = scrollContent.width () +에서는 parseInt (scrollContent.css ( "여백 왼쪽"), 10);
VAR 격차 = scrollPane.width () - 도시;
경우 (갭> 0) {
scrollContent.css ()에서는 parseInt (scrollContent.css ( "여백 왼쪽", "왼쪽 여백", 10) + 간격);
}
}
// 핸들을 변경하게되면, 줌 창 위치 $ (창) .resize (함수 () {
resetValue ();
sizeScrollbar ();
reflowContent ();
});
// 스크롤 크기에서는 setTimeout (sizeScrollbar, 10) 초기화; // 사파리 타임 아웃을});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "스크롤 - 창 UI 위젯 UI 위젯 헤더 UI 코너 - 모든">
<사업부 클래스 = "스크롤 콘텐츠를">
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 1 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 2 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 3 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 4 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 5 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 6 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 7 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 8 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 9 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 10 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 11 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 12 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 13 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 14 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 15 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 16 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 17 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 18 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 19 </ DIV>
<사업부 클래스 = "스크롤 콘텐츠 항목의 UI 위젯 헤더를"> 20 </ DIV>
</ DIV>
<사업부 클래스 = "스크롤 바 - 랩 UI 위젯 콘텐츠 UI 코너 하단">
<사업부 클래스 = "스크롤 바"> </ DIV>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
증분을 맞 춥니 다
함으로써 step 옵션 증분 값을 설정하는 정수 슬라이더로 설정된 보통 최대 제수 슬라이더이다. 기본 증분은 1입니다.
<! 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">
<스크립트>
$ (함수 () {
$ ( "#slider") .slider ({
값 : 100,
분 : 0,
최대 : 500,
단계 : 50,
슬라이드 : 함수 (이벤트, UI) {
$ ( "#amount") .val ( "$"+ Ui.value);
}
});
$ ( "#amount") .val ( "$"+ $ ( "#slider") .slider ( "값"));
});
</ 스크립트>
</ 헤드>
<바디>
<P>
< "양"= 대한 라벨> 기부 금액 ($ (50) 단위) : </ 라벨>
<입력 유형 = "텍스트"ID = "양"스타일 = "테두리 : 0; 색상 : #의 f6931f; 글꼴 - 무게 : 굵게;">
</ P>
<사업부 아이디 = "슬라이더"> </ DIV>
</ BODY>
</ HTML>
수직 범위 슬라이더
슬라이더에 수직 인 방향의 범위를 변경합니다. 으로 .height() 높이 값을 할당하거나 CSS에 의해 높이 및 세트 orientation 은 "수직"에 대한 옵션을.
<! 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">
<스크립트>
$ (함수 () {
$ ( "# 슬라이더 범위") .slider ({
방향 : "수직"
범위 : 사실,
값 : 17, 67,
슬라이드 : 함수 (이벤트, UI) {
$ ( "#amount") .val ( "$"+ Ui.values [0] + "- $"+ ui.values [1]);
}
});
$ ( "#amount") .val ( "$"+ $ ( "# 슬라이더 범위") .slider ( "값", 0) +
"- $"+ $ ( "# 슬라이더 범위") .slider ( "값", 1));
});
</ 스크립트>
</ 헤드>
<바디>
<P>
(수백만에서) < "양"= 대한 라벨> 판매 목표 : </ 라벨>
<입력 유형 = "텍스트"ID = "양"스타일 = "테두리 : 0; 색상 : #의 f6931f; 글꼴 - 무게 : 굵게;">
</ P>
<사업부 아이디 = "슬라이더 범위"스타일 = "높이 : 250 픽셀;"> </ DIV>
</ BODY>
</ HTML>
수직 슬라이더
슬라이더의 방향이 수직 변경한다. 으로 .height() 높이 값을 할당하거나 CSS에 의해 높이 및 세트 orientation 은 "수직"에 대한 옵션을.
<! 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">
<스크립트>
$ (함수 () {
$ ( "# 슬라이더 수직") .slider ({
방향 : "수직"
범위 : "분"
분 : 0,
최대 : 100,
값 : 60,
슬라이드 : 함수 (이벤트, UI) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# 슬라이더 수직") .slider ( "값"));
});
</ 스크립트>
</ 헤드>
<바디>
<P>
< "양"= 대한 라벨> 볼륨 </ 라벨>
<입력 유형 = "텍스트"ID = "양"스타일 = "테두리 : 0; 색상 : #의 f6931f; 글꼴 - 무게 : 굵게;">
</ P>
<사업부 아이디 = "슬라이더를 수직"스타일 = "높이 : 200 픽셀;"> </ DIV>
</ BODY>
</ HTML>