jQuery UI เช่น - Rotator (ปินเนอร์)
โดยการขึ้น / ลงปุ่มลูกศรและการประมวลผลที่สำคัญค่าการป้อนข้อมูลที่เพิ่มฟังก์ชั่นการป้อนข้อความ
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสมาชิกในปินเนอร์ให้ดูที่เอกสาร API สมาชิก Rotator (ปั่น Widget)
ฟังก์ชั่นเริ่มต้น
Rotator เริ่มต้น
<!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>
เงินตรา
ตัวอย่างนี้เป็นรูปแบบการบริจาคมีจำนวนของตัวเลือกสกุลเงินและ Rotator
<!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>
ทศนิยม
ตัวอย่างนี้เป็น Rotator ทศนิยม การเพิ่มขึ้นของ 0.01 รหัสการรับมือกับการเปลี่ยนแปลงทางวัฒนธรรมที่จะอ่านค่าปัจจุบันของตัวเลือกเมื่อมีการเปลี่ยนแปลงวัฒนธรรมก็จะรีเซ็ตค่าตามรูปแบบของวัฒนธรรมใหม่
<! Doctype html>
<html>
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Rotator (ปินเนอร์) - สิบ </ 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 = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.js"> </ script>
<script src = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.js"> </ script>
<script src = "/ / คง JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.culture.de-DE.js"> </ script>
<script src = "/ / คง JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.culture.ja-JP.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>
$ (ฟังก์ชั่น () {
$ ( "#spinner") .spinner ({
ขั้นตอนนี้: 0.01,
NumberFormat: "N"
});
$ ( "#culture") .change (ฟังก์ชั่น () {
var ปัจจุบัน = $ ( "#spinner") .spinner ( "คุ้มค่า");
Globalize.culture ($ (นี้) .val ());
$ ( "#spinner") .spinner ( "Value" ปัจจุบัน);
});
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "ปั่น"> ทศนิยม Rotator: </ label>
<input id = "ปั่น" ชื่อ = "ปั่น" value = "5.06">
</ p>
<p>
<label สำหรับ = "วัฒนธรรม"> เลือกรูปแบบสำหรับวัฒนธรรม: </ label>
<เลือก id = "วัฒนธรรม">
<value option = "en-EN" เลือก = "เลือก"> ภาษาอังกฤษ </ option>
<value option = "de-DE"> เยอรมัน </ option>
<value option = "ja-JP"> ญี่ปุ่น </ option>
</ เลือก>
</ p>
</ body>
</ html>
แผนที่
รวม Google Maps โดยใช้เครื่องปั่นด้ายเพื่อเปลี่ยนละติจูดและลองจิจูด
<! Doctype html>
<html>
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Rotator (ปินเนอร์) - แผนที่ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "http://maps.google.com/maps/api/js?sensor=false"> </ script>
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.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>
$ (ฟังก์ชั่น () {
ฟังก์ชั่น LatLong () {
กลับมาใหม่ google.maps.LatLng ($ ( "# ลาดพร้าว") Val (), $ ( "# LNG") Val () .. );
}
ตำแหน่งที่ฟังก์ชั่น () {
map.setCenter (LatLong ());
}
$ ( "#lat, #lng") .spinner ({
ขั้นตอนที่: 001,
เปลี่ยน: ตำแหน่ง
หยุด: ตำแหน่ง
});
แผนที่ var = google.maps.Map ใหม่ ($ ( "# แผนที่") [0], {
ซูม: 8
Center: LatLong ()
MapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</ script>
<style>
#map {
ความกว้าง: 500px;
ความสูง: 500px;
}
</ style>
</ head>
<body>
<label สำหรับ = "ลาดพร้าว"> รุ้ง </ label>
<input id = "ลาดพร้าว" ชื่อ = "ลาดพร้าว" value = "44.797">
ฟรี
<label สำหรับ = "LNG"> ลองจิจูด </ label>
<input id = "LNG" ชื่อ = "LNG" value = "- 93.278">
<div id = "แผนที่"> </ div>
</ body>
</ html>
ล้น
ข้อ จำกัด Rotator ล้นจาก -10 ถึง 10 สำหรับค่า 10 หรือมากกว่าล้นถึง -10 และในทางกลับกัน
<! Doctype html>
<html>
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Rotator (ปินเนอร์) - ล้น </ 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 = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.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>
$ (ฟังก์ชั่น () {
$ ( "#spinner") .spinner ({
สปิน: ฟังก์ชั่น (เหตุการณ์ UI) {
ถ้า (ui.value> 10) {
$ (นี้) .spinner ( "ค่า", -10);
กลับเท็จ;
} else if (ui.value <-10) {
$ (นี้) .spinner ( "ค่า", 10);
กลับเท็จ;
}
}
});
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "ปั่น"> เลือกค่า: </ label>
<input id = "ปั่น" name = "ค่า">
</ p>
</ body>
</ html>
เวลา
มันยื่นออกมาจากชิ้นส่วนที่กำหนดเอง Rotator ใช้โลกาภิวัตน์ (Globalization) plug-in ที่จะแยกและการประทับเวลาเอาท์พุทด้วยขั้นตอนที่กำหนดเองและตัวเลือกหน้า ขึ้น / ลงเคอร์เซอร์นาทีขึ้น / ลง, หน้าขึ้น / ลงสำหรับการเพิ่มขึ้นชั่วโมง / ลดลง
<! Doctype html>
<html>
<head>
<Meta charset = "UTF-8">
<title> jQuery UI Rotator (ปินเนอร์) - เวลา </ 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 = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.js"> </ script>
<script src = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.js"> </ script>
<script src = "/ / คง JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.culture.de-DE.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>
$ .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 ( "Value" ปัจจุบัน);
});
});
</ script>
</ head>
<body>
<p>
<label สำหรับ = "ปั่น"> เวลา Rotator: </ label>
<input id = "ปั่น" ชื่อ = "ปั่น" value = "08:30">
</ p>
<p>
<label สำหรับ = "วัฒนธรรม"> เลือกรูปแบบสำหรับวัฒนธรรม: </ label>
<เลือก id = "วัฒนธรรม">
<value option = "en-EN" เลือก = "เลือก"> ภาษาอังกฤษ </ option>
<value option = "de-DE"> เยอรมัน </ option>
</ เลือก>
</ p>
</ body>
</ html>