ตัวอย่างเช่น jQuery UI - Slider (Slider)
ลากจับเพื่อเลือกค่า
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสมาชิกเลื่อนดูเอกสาร API สมาชิกเลื่อน (เลื่อน Widget ที่)
ฟังก์ชั่นเริ่มต้น
เลื่อนพื้นฐานคือแนวนอนและมีที่จับเดียวสามารถย้ายด้วยปุ่มเมาส์หรือลูกศร
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - ฟังก์ชั่นเริ่มต้น </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#slider") .slider ();
});
</ script>
</ head>
<body>
<div id = "เลื่อน"> </ div>
</ body>
</ html>
ตัวเลือกสี
การรวมกันของสามเลื่อนการสร้างตัวเลือกสี RGB ที่เรียบง่าย
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - เลือกสี </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
#red, #green, #blue {
ลอย: ด้านซ้าย;
ความชัดเจน: ซ้าย;
width: 300px;
margin: 15px;
}
#swatch {
ความกว้าง: 120px;
ความสูง: 100px;
ขอบด้านบน: 18px;
ขอบซ้าย: 350px;
background-image: none;
}
#red .ui เลื่อนช่วง {พื้นหลัง: # ef2929;}
#red .ui เลื่อนจับ {border-color: # ef2929;}
#green .ui เลื่อนช่วง {พื้นหลัง: # 8ae234;}
#green .ui เลื่อนจับ {border-color: # 8ae234;}
#blue .ui เลื่อนช่วง {พื้นหลัง: # 729fcf;}
#blue .ui เลื่อนจับ {border-color: # 729fcf;}
</ style>
<script>
ฟังก์ชั่น hexFromRGB (R, G, B) {
var hex = [
r.toString (16)
g.toString (16)
b.toString (16)
];
$ .each (Hex, ฟังก์ชั่น (NR, Val) {
ถ้า (val.length === 1) {
ฐานสิบหก [NR] = "0" + วาล;
}
});
กลับ hex.join ( "") .toUpperCase ();
}
ฟังก์ชั่น refreshSwatch () {
var สีแดง = $ ( "#red") .slider ( "คุ้มค่า")
สีเขียว = $ ( "#green") .slider ( "คุ้มค่า")
สีฟ้า = $ ( "#blue") .slider ( "คุ้มค่า")
ซวย = hexFromRGB (สีแดง, สีเขียว, สีฟ้า);
$ ( "#swatch") .css ( "background-color", "#" + Hex);
}
$ (ฟังก์ชั่น () {
$ ( "#red, #green, #blue") .slider ({
ปฐมนิเทศ: "แนวนอน"
ช่วง "นาที"
Max: 255
มูลค่า 127,
Slide: refreshSwatch,
การเปลี่ยนแปลง: refreshSwatch
});
$ ( "#red") .slider ( "Value", 255);
$ ( "#green") .slider ( "Value", 140);
$ ( "#blue") .slider ( "Value", 60);
});
</ script>
</ head>
<ระดับร่างกาย = "UI-Widget เนื้อหา" style = "border: 0;">
<p class = "UI-รัฐเริ่มต้น UI-มุมทุก UI-ผู้ช่วย clearfix" style = "padding: 4px;">
<span class = "UI-ไอคอน UI-ไอคอนดินสอ" style = "ลอย: ด้านซ้าย; margin: 5px -2px 0 0;"> </ span>
เลือกสีอย่างง่าย </ p>
<div id = "สีแดง"> </ div>
<div id = "สีเขียว"> </ div>
<div id = "สีฟ้า"> </ div>
<div id = "สวอตช์" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด"> </ div>
</ body>
</ html>
ใหญ่ของเลื่อน
การรวมกันของแถบเลื่อนแนวนอนและแนวแต่ละคนมีตัวเลือกของตัวเองเพื่อสร้างเครื่องเล่นเพลง UI
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - เลื่อน </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
ช่วง #eq {
ความสูง: 120px; ลอย: ด้านซ้าย; margin: 15px
}
</ style>
<script>
$ (ฟังก์ชั่น () {
// การตั้งค่าระดับเสียงโท $ ( "#master") .slider ({
คุ้มค่า: 60,
ปฐมนิเทศ: "แนวนอน"
ช่วง "นาที"
ภาพเคลื่อนไหว: จริง
});
// ตั้งควอไลเซอร์กราฟิก $ ( "#eq> ช่วง") .each (ฟังก์ชั่น () {
// อ่านค่าเริ่มต้นจากแท็กและลบ var value = parseInt ($ (นี้) .Text (), 10);
$ (นี้) .empty (). Slider ({
มูลค่าค่า
ช่วง "นาที"
ภาพเคลื่อนไหว: จริง
ปฐมนิเทศ: "แนวตั้ง"
});
});
});
</ script>
</ head>
<body>
<p class = "UI-รัฐเริ่มต้น UI-มุมทุก UI-ผู้ช่วย clearfix" style = "padding: 4px;">
<ระดับ Span = "UI-ไอคอน UI-ไอคอนปริมาณที่" style = "ลอย: ด้านซ้าย; margin: 5px -2px 0 0;"> </ span>
ระดับเสียงหลัก </ p>
<div id = "ต้นแบบ" style = "width: 260px; margin: 15px;"> </ div>
<p class = "UI-รัฐเริ่มต้น UI-มุมทุกคน" style = "padding: 4px; ขอบด้านบน: 4em;">
<ระดับ Span = "UI-ไอคอน UI-ไอคอนสัญญาณ" style = "ลอย: ด้านซ้าย; margin: 5px -2px 0 0;"> </ span>
กราฟฟิคควอไลเซอร์ </ p>
<div id = "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>
ช่วง Slider
การตั้งค่า range ตัวเลือกที่เป็นความจริงที่จะได้รับช่วงของค่าที่มีสองลากจับ ระหว่างการจัดการการควบคุมที่มีสีพื้นหลังที่แตกต่างกันกรอกข้อมูลเพื่อระบุค่าของช่วงเป็นตัวเลือก
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - ช่วงเลื่อน </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# Slider ช่วง") .slider ({
ช่วง: จริง
นาที: 0
Max: 500
ค่า: [75, 300]
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider ช่วง") .slider ( "ค่า", 0) +
"- $" + $ ( "# Slider ช่วง") .slider ( "ค่า", 1));
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "จำนวน"> ช่วงราคา: </ label>
<ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อนช่วง"> </ div>
</ body>
</ html>
กับช่วงสูงสุดคงที่
ซ่อมช่วงสูงสุดของการเลื่อนผู้ใช้สามารถเลือกขั้นต่ำ การตั้งค่า range ตัวเลือกที่จะ "แม็กซ์"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - ช่วงที่มีสูงสุดคงที่ </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# Slider ช่วง-Max") .slider ({
ช่วง: "แม็กซ์"
นาที: 1
แม็กซ์: 10
มูลค่า: 2,
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider ช่วง-Max") .slider ( "ค่า"));
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "จำนวน"> จำนวนขั้นต่ำของห้องพัก: </ label>
<ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อนช่วง-Max"> </ div>
</ body>
</ html>
ช่วงที่มีขั้นต่ำคงที่
ขั้นต่ำคงที่เลื่อนช่วงผู้ใช้สามารถเลือกสูงสุด การตั้งค่า range ตัวเลือก "นาที"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - ช่วงขั้นต่ำคงที่ </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# Slider ช่วงนาที") .slider ({
ช่วง "นาที"
คุ้มค่า: 37,
นาที: 1
Max: 700
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider ช่วงนาที") .slider ( "ค่า"));
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "จำนวน"> ราคาสูงสุด: </ label>
<ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อนช่วงนาที"> </ div>
</ body>
</ html>
ที่ถูกผูกไว้เพื่อเลือกเลื่อน
วิธีการผูกเลื่อนเพื่อเลือกองค์ประกอบที่มีอยู่ เลือกยังคงมองเห็นเพื่อแสดงการเปลี่ยนแปลง เมื่อมีการเปลี่ยนแปลงการเลือกอัปเดตตัวเลื่อน
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - ถูกผูกไว้เพื่อเลือกเลื่อน </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
var เลือก = $ ( "#minbeds");
var เลื่อน = $ ( "<div id = 'เลื่อน'> </ div>") .insertAfter (เลือก) .slider ({
นาที: 1
Max: 6
ช่วง "นาที"
คุ้มค่า: เลือก [0] .selectedIndex + 1,
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
เลือก [0] .selectedIndex = ui.value - 1;
}
});
$ ( "#minbeds") .change (ฟังก์ชั่น () {
slider.slider ( "คุ้มค่า" this.selectedIndex + 1);
});
});
</ script>
</ head>
<body>
<form id = "จองห้องพัก">
<label สำหรับ = "minbeds"> จำนวนขั้นต่ำของเตียง </ label>
<select name = "minbeds" id = "minbeds">
<option> 1 </ option>
<option> 2 </ option>
<option> 3 </ option>
<option> 4 </ option>
<option> 5 </ option>
<option> 6 </ option>
</ เลือก>
</ form>
</ body>
</ html>
เลื่อนแถบเลื่อน
ใช้แถบเลื่อนเพื่อดำเนินการค้นหาเนื้อหาของหน้าเว็บ ในกรณีนี้มันสามารถที่จะได้รับค่าของแถบเลื่อนที่
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - เลื่อนแถบเลื่อน </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
.scroll บานหน้าต่าง {ล้น: อัตโนมัติความกว้าง: 99%; ลอย: ด้านซ้าย;}
.scroll เนื้อหา {กว้าง: 2440px; ลอย: ด้านซ้าย;}
.scroll เนื้อหารายการ {กว้าง: 100px; ความสูง: 100px; ลอย: ด้านซ้าย; margin: 10px; font-size: 3em; line-height: 96 พิกเซล; text-align: ศูนย์;}
.scroll บาร์ห่อ {ชัดเจนซ้าย; padding: 0 0 4px 2px; margin: 0 -1px -1px -1px;}
.scroll บาร์ห่อ .ui เลื่อน {พื้นหลัง: none; ชายแดน: 0; ความสูง: 2em; margin: 0 อัตโนมัติ;}
.scroll บาร์ห่อ .ui จับผู้ช่วยผู้ปกครอง {ตำแหน่ง: ญาติความกว้าง: 100%; ความสูง: 100%; margin: 0 อัตโนมัติ;}
.scroll บาร์ห่อ .ui เลื่อนจับ {ด้านบน: .2em; ความสูง: 1.5em;}
.scroll บาร์ห่อ .ui เลื่อนจับ .ui ไอคอน {margin: -8px อัตโนมัติ 0; ตำแหน่ง: ญาติ; ด้านบน: 50%;}
</ style>
<script>
$ (ฟังก์ชั่น () {
// เลื่อนแผงส่วน var scrollPane = $ ( ".scroll บาน")
scrollContent = $ ( ".scroll เนื้อหา");
// สร้างเลื่อนแถบเลื่อน var = $ ( ".scroll บาร์") .slider ({
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
ถ้า (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "ขอบซ้าย", Math.Round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "Px");
} else {
scrollContent.css ( "ขอบซ้าย", 0);
}
}
});
// ผนวกไอคอนในการประมวลผล var handleHelper = scrollbar.find ( ".ui เลื่อนจัดการ")
.mousedown (ฟังก์ชั่น () {
scrollbar.width (handleHelper.width ());
})
.mouseup (ฟังก์ชั่น () {
scrollbar.width ( "100%");
})
.append ( "<ระดับช่วง = 'UI-ไอคอน UI-ไอคอนจับจุดแนวตั้ง"> </ span> ")
.wrap ( "<div ชั้น = 'UI-จับผู้ช่วยผู้ปกครอง"> </ 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 ( "") ความกว้าง (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); // ซาฟารีหมดเวลา});
</ script>
</ head>
<body>
<div class = "เลื่อนบานหน้าต่าง UI-Widget UI-Widget หัว UI-มุมทั้งหมด">
<div class = "เลื่อนเนื้อหา">
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 1 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 2 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 3 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 4 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 5 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 6 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 7 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 8 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 9 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 10 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 11 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 12 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 13 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 14 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 15 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 16 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 17 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 18 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 19 </ div>
<div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 20 </ div>
</ div>
<div class = "แถบเลื่อนห่อ UI-Widget เนื้อหา UI-มุมด้านล่าง">
<div class = "แถบเลื่อน"> </ div>
</ div>
</ div>
</ body>
</ html>
ตําแหน่งเพิ่มขึ้น
โดย step ตั้งค่าตัวเลือกเลื่อนจำนวนเต็มในการตั้งค่าที่เพิ่มขึ้นจะเป็นตัวเลื่อนหารสูงสุด การเพิ่มขึ้นของค่าเริ่มต้นคือ 1
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - ชิดเพิ่มขึ้น </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#slider") .slider ({
มูลค่า: 100
นาที: 0
Max: 500
ขั้นตอนที่: 50
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Value"));
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "จำนวน"> บริจาคจำนวนเงิน ($ 50 เพิ่มขึ้นทีละ): </ label>
<ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อน"> </ div>
</ body>
</ html>
ช่วงแนวตั้งเลื่อน
เปลี่ยนขอบเขตของทิศทางที่ตั้งฉากกับตัวเลื่อน โดย .height() กำหนดค่าความสูงหรือตั้งค่าความสูงโดย CSS และตั้ง orientation ตัวเลือกของ "แนวตั้ง"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - เลื่อนช่วงแนวตั้ง </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# Slider ช่วง") .slider ({
ปฐมนิเทศ: "แนวตั้ง"
ช่วง: จริง
ค่า: [17, 67]
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider ช่วง") .slider ( "ค่า", 0) +
"- $" + $ ( "# Slider ช่วง") .slider ( "ค่า", 1));
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "จำนวน"> เป้าหมายการขาย (ล้าน): </ label>
<ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อนช่วง" style = "height: 250px;"> </ div>
</ body>
</ html>
เลื่อนแนวตั้ง
เปลี่ยนทิศทางของการเลื่อนที่เป็นแนวตั้ง โดย .height() กำหนดค่าความสูงหรือตั้งค่าความสูงโดย CSS และตั้ง orientation ตัวเลือกของ "แนวตั้ง"
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Slider (Slider) - เลื่อนแนวตั้ง </ title>
<link rel = "สไตล์ชีต" 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# เลื่อนแนวตั้ง") .slider ({
ปฐมนิเทศ: "แนวตั้ง"
ช่วง "นาที"
นาที: 0
Max: 100
คุ้มค่า: 60,
Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# เลื่อนแนวตั้ง") .slider ( "ค่า"));
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "จำนวน"> ปริมาตร: </ label>
<ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อนแนวตั้ง" style = "height: 200px;"> </ div>
</ body>
</ html>