jQuery UI เช่น - ที่ตั้ง (ตำแหน่ง)
ญาติหน้าต่างเอกสารเบรกเคอร์เซอร์เมาส์ / และองค์ประกอบอื่น ๆ ขององค์ประกอบตำแหน่ง
สำหรับข้อมูลเพิ่มเติมเกี่ยว .position() รายละเอียดของวิธีการดูเอกสาร API .position ()
ฟังก์ชั่นเริ่มต้น
ใช้แบบฟอร์มการควบคุมตำแหน่งการจัดวางหรือองค์ประกอบลากอยู่ในตำแหน่งที่จะปรับเปลี่ยนของการชดเชย ลากไปที่องค์ประกอบหลักโดยรอบเพื่อดูการตรวจสอบการชนกัน
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI ที่ตั้ง (ตำแหน่ง) - ฟังก์ชั่นเริ่มต้น </ 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>
#parent {
ความกว้าง: 60%;
ความสูง: 40px;
margin: 10px อัตโนมัติ
padding: 5px;
ชายแดน: 1px ของแข็ง # 777;
สีพื้นหลัง: # fbca93;
text-align: ศูนย์;
}
.positionable {
position: absolute;
จอแสดงผล: บล็อก
ขวา: 0;
ด้านล่าง: 0;
สีพื้นหลัง: # bcd5e6;
text-align: ศูนย์;
}
# Positionable1 {
ความกว้าง: 75px;
ความสูง: 75px;
}
# Positionable2 {
ความกว้าง: 120px;
ความสูง: 40px;
}
เลือกใส่ {
ขอบซ้าย: 15px;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
ตำแหน่งที่ฟังก์ชั่น () {
$ ( ".positionable") .position ({
ของ: $ ( "#parent")
ฉัน: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val ()
ที่: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val ()
ชน: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable") .css ( "ทึบ", 0.5);
$ ( "เลือกใส่") .bind ( "คลิก keyup เปลี่ยน" ตำแหน่ง);
$ ( "#parent") .draggable ({
ลาก: ตำแหน่ง
});
ตำแหน่ง ();
});
</ script>
</ head>
<body>
<div id = "ผู้ปกครอง">
<p>
นี้เป็นที่ตั้งขององค์ประกอบหลักที่
</ p>
</ div>
<div class = "ตำแหน่งได้" id = "positionable1">
<p>
ให้ดำรงตำแหน่ง
</ p>
</ div>
<div class = "ตำแหน่งได้" id = "positionable2">
<p>
ไปยังตำแหน่งที่ 2
</ p>
</ div>
<style Div = "padding: 20px; ขอบด้านบน: 75px;">
สถานที่ตั้ง ...
<div style = "padding ล่าง: 20px;">
<b> ฉัน: </ b>
<เลือก id = "my_horizontal">
<value option = "ซ้าย"> ซ้าย </ option>
<value option = "center"> ศูนย์ </ option>
<value option = "สิทธิ"> ขวา </ option>
</ เลือก>
<เลือก id = "my_vertical">
<value option = "top"> บน </ option>
<value option = "center"> ศูนย์ </ option>
<value option = "ด้านล่าง"> ด้านล่าง </ option>
</ เลือก>
</ div>
<div style = "padding ล่าง: 20px;">
<b> ได้ที่: </ b>
<เลือก id = "at_horizontal">
<value option = "ซ้าย"> ซ้าย </ option>
<value option = "center"> ศูนย์ </ option>
<value option = "สิทธิ"> ขวา </ option>
</ เลือก>
<เลือก id = "at_vertical">
<value option = "top"> บน </ option>
<value option = "center"> ศูนย์ </ option>
<value option = "ด้านล่าง"> ด้านล่าง </ option>
</ เลือก>
</ div>
<div style = "padding ล่าง: 20px;">
<b> ชน: </ b>
<เลือก id = "collision_horizontal">
<value option = "พลิก"> พลิก </ option>
<value option = "พอดี"> พอดี </ option>
<value option = "flipfit"> flipfit </ option>
<value option = "ไม่มี"> ไม่มี </ option>
</ เลือก>
<เลือก id = "collision_vertical">
<value option = "พลิก"> พลิก </ option>
<value option = "พอดี"> พอดี </ option>
<value option = "flipfit"> flipfit </ option>
<value option = "ไม่มี"> ไม่มี </ option>
</ เลือก>
</ div>
</ div>
</ body>
</ html>
วงจรภาพ
เบราว์เซอร์ภาพต้นแบบตามลำดับโดยใช้ตำแหน่งเป็นภาพบนซ้ายกลางขวาแล้ววงจร ใช้การเชื่อมโยงที่ด้านบนเพื่อวงจรผ่านภาพหรือภาพในคลิกซ้ายหรือขวาเพื่อวงจรผ่านภาพ โปรดทราบว่าเมื่อหน้าต่างมีการปรับขนาด, เปลี่ยนตำแหน่งภาพ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI ที่ตั้ง (ตำแหน่ง) - การไหลเวียนของภาพ </ 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>
ร่างกาย {
margin: 0;
}
ภาชนะ # {
ล้น: ซ่อน;
ตำแหน่ง: ญาติ;
ความสูง: 400px;
}
img {
position: absolute;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
// การฟื้นฟูหมายถึงการกำจัดของเหล่านี้ plug-in ที่วิธีการ $ .fn.left = ฟังก์ชั่น (ใช้) {
กลับ this.position ({
ฉัน: "กลางขวา"
ที่: "ซ้าย + 25 กลาง"
ของ "ภาชนะ #"
ชน: "ไม่มี"
โดยใช้: ใช้
});
};
$ .fn.right = function (ใช้) {
กลับ this.position ({
ฉัน: "กลางซ้าย"
ที่: "สิทธิ-25 กลาง"
ของ "ภาชนะ #"
ชน: "ไม่มี"
โดยใช้: ใช้
});
};
$ .fn.center = function (ใช้) {
กลับ this.position ({
ฉัน: "ศูนย์กลาง"
ที่: "ศูนย์กลาง"
ของ "ภาชนะ #"
โดยใช้: ใช้
});
};
$ ( "Img: EQ (0)") .left ();
$ ( "Img: EQ (1)") .center ();
$ ( "Img: EQ (2)") .right ();
ฟังก์ชั่นการเคลื่อนไหว (เพื่อ) {
$ (นี้) .stop (จริงเท็จ) .animate (เพื่อ);
}
ทำงานต่อไป (event) {
event.preventDefault ();
$ ( "Img: EQ (2)") .center (ภาพเคลื่อนไหว);
$ ( "Img: EQ (1)") .left (ภาพเคลื่อนไหว);
. $ ( "Img: EQ (0)") .right () appendTo ( "ภาชนะ #");
}
ทำงานก่อนหน้านี้ (event) {
event.preventDefault ();
$ ( "Img: EQ (0)") .center (ภาพเคลื่อนไหว);
$ ( "Img: EQ (1)") .right (ภาพเคลื่อนไหว);
. $ ( "Img: EQ (2)") .left () prependTo ( "ภาชนะ #");
}
$ ( "#previous") จำนวนคลิก (Previous);
$ ( "#next") จำนวนคลิก (ถัดไป);
$ ( "Img") จำนวนคลิก (ฟังก์ชั่น (event) {
$ ( "Img") .index (นี้) === 0 ก่อนหน้า (event): ต่อไป (event) ;?
});
$ (หน้าต่าง) .resize (ฟังก์ชั่น () {
$ ( "Img: EQ (0)") .left (ภาพเคลื่อนไหว);
$ ( "Img: EQ (1)") .center (ภาพเคลื่อนไหว);
$ ( "Img: EQ (2)") .right (ภาพเคลื่อนไหว);
});
});
</ script>
</ head>
<body>
<div id = "ภาชนะ">
<img src = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "โลก">
<img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "การบิน">
<img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "จรวด">
บน <a id="previous" href="#"> </a>
โดย <a id="next" href="#"> </a>
</ div>
</ body>
</ html>