jQuery UI เช่น - แผงพับ (หีบเพลง)
ภายในจอแสดงผลที่มีพื้นที่ จำกัด สำหรับแผงพับการนำเสนอเนื้อหาข้อมูล
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการมีส่วนร่วมหีบเพลงดูเอกสาร API สมาชิกแผงพับ (หีบเพลง Widget)
ฟังก์ชั่นเริ่มต้น
คลิกที่หัวเพื่อขยายเนื้อหายุบ / แบ่งออกเป็นส่วนต่าง ๆ ของตรรกะเช่นแท็บ (แท็บ) เดียวกัน คุณสามารถเลือกการตั้งค่าเมื่อเมาส์วนเวียนอยู่ว่าจะเปลี่ยนไปเปิดส่วนต่าง ๆ ของการเปิด / ปิดสถานะ
แท็ก HTML พื้นฐานคือชุดของชื่อ (แท็ก H3) และ div เนื้อหาเพื่อให้เนื้อหาที่สามารถนำมาใช้โดยไม่ต้องผ่าน JavaScript
<! 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">
<script>
$ (ฟังก์ชั่น () {
$ ( "#accordion") .accordion ();
});
</ script>
</ head>
<body>
<div id = "หีบเพลง">
<h3> ส่วนที่ 1 </ h3>
<div>
<p>
มาร์ทมาร์ท ante, blandit et, ultrices ที่ suscipit Eget, Quam. จำนวนเต็ม
UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum นั่ง
Amet, ในขณะนี้. น้ำอะแดปเตอร์. แบบพกพา suscipit อยู่. น้ำไมล์. ไมโครเวฟ viverra สิงห์ยูทาห์
Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate
</ p>
</ div>
<h3> ส่วนที่ 2 </ h3>
<div>
<p>
ไม่ใช่ urna sed. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง
Purus. Vivamus สำนัก, บังคับที่ aliquet ปั๊ม, มาร์ท turpis porttitor
velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน
suscipit faucibus urna
</ p>
</ div>
<h3> ส่วนที่ 3 </ h3>
<div>
<p>
น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis
Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero
AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน
Lacinia ornare, Quam ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI
</ p>
<ul>
<li> รายการหนึ่ง </ li>
<li> รายการรายการที่สอง </ li>
<li> รายการสาม </ li>
</ ul>
</ div>
<h3> ส่วนที่ 4 </ h3>
<div>
<p>
Cras ภาษิต. Pellentesque Habitant ผ้าเทนนิส senectus et netus
et malesuada fames AC egestas turpis. เดิมพัน ante Ipsum Primis ใน
faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae; Aenean Lacinia
มาร์ทหรือ EST
</ p>
<p>
Suspendisse สหภาพยุโรป NISL. Nullam UT Libero. จำนวนเต็ม dignissim consequat Lectus
ระดับ aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ
inceptos himenaeos
</ p>
</ div>
</ div>
</ body>
</ html>
เนื้อหาพับ
โดยค่าเริ่มต้นการติดตั้งการล่มสลายอยู่เสมอส่วนหนึ่งจะเปิด เพื่อให้ทุกส่วนพับสามารถตั้งค่า collapsible ตัวเลือกที่จะเป็นจริง คลิกที่เปิดอยู่ในปัจจุบันส่วนจะยุบบานหน้าต่างเนื้อหา
<! 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">
<script>
$ (ฟังก์ชั่น () {
$ ( "#accordion") .accordion ({
พับ: จริง
});
});
</ script>
</ head>
<body>
<div id = "หีบเพลง">
<h3> ส่วนที่ 1 </ h3>
<div>
<p> มาร์ทมาร์ท ante, blandit et, ultrices ที่ suscipit Eget, Quam. จำนวนเต็ม UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum Amet นั่ง, ในขณะนี้. น้ำอะแดปเตอร์. แบบพกพา suscipit อยู่. น้ำไมล์. ไมโครเวฟ viverra สิงห์ UT Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate. </ p>
</ div>
<h3> ส่วนที่ 2 </ h3>
<div>
<p> Sed ไม่ใช่ urna. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง Purus. Vivamus สำนัก, บังคับที่ปั๊ม aliquet, มาร์ท turpis porttitor velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน suscipit faucibus urna. < / p>
</ div>
<h3> ส่วนที่ 3 </ h3>
<div>
<p> น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis. Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน Lacinia ornare , วิธีการ ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI. </ p>
<ul>
<li> รายการหนึ่ง </ li>
<li> รายการรายการที่สอง </ li>
<li> รายการสาม </ li>
</ ul>
</ div>
<h3> ส่วนที่ 4 </ h3>
<div>
<p> Cras ภาษิต Pellentesque Habitant ผ้าเทนนิส senectus et netus et malesuada fames AC turpis egestas เดิมพัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae; .. Aenean Lacinia มาร์ทหรือ EST </ p> <p> Suspendisse สหภาพยุโรป NISL . Nullam UT Libero. จำนวนเต็ม dignissim consequat Lectus. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. </ p>
</ div>
</ div>
</ body>
</ html>
ไอคอนที่กำหนดเอง
ผ่าน icons ตัวเลือกในการปรับแต่งไอคอนชื่อ icons ตัวเลือกที่จะยอมรับชื่อเริ่มต้นและเปิดใช้งาน (เปิด) ระดับรัฐ ใช้กรอบ UI CSS ของชั้นใด ๆ หรือสร้างชั้นเองที่จะใช้ภาพพื้นหลัง
<! 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">
<script>
$ (ฟังก์ชั่น () {
ไอคอน var = {
ส่วนหัว: "UI-ไอคอนวงกลมลูกศร-E"
activeHeader: "UI-ไอคอนวงกลมลูกศร-S"
};
$ ( "#accordion") .accordion ({
ไอคอน: ไอคอน
});
$ ( "#toggle") .button (). คลิก (ฟังก์ชั่น () {
ถ้า ($ ( "#accordion") .accordion ( "ตัวเลือก", "ไอคอน")) {
$ ( "#accordion") .accordion ( "ตัวเลือก", "ไอคอน" null);
} else {
$ ( "#accordion") .accordion ( "ตัวเลือก", "ไอคอน" ไอคอน);
}
});
});
</ script>
</ head>
<body>
<div id = "หีบเพลง">
<h3> ส่วนที่ 1 </ h3>
<div>
<p> มาร์ทมาร์ท ante, blandit et, ultrices ที่ suscipit Eget, Quam. จำนวนเต็ม UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum Amet นั่ง, ในขณะนี้. น้ำอะแดปเตอร์. แบบพกพา suscipit อยู่. น้ำไมล์. ไมโครเวฟ viverra สิงห์ UT Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate. </ p>
</ div>
<h3> ส่วนที่ 2 </ h3>
<div>
<p> Sed ไม่ใช่ urna. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง Purus. Vivamus สำนัก, บังคับที่ปั๊ม aliquet, มาร์ท turpis porttitor velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน suscipit faucibus urna. < / p>
</ div>
<h3> ส่วนที่ 3 </ h3>
<div>
<p> น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis. Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน Lacinia ornare , วิธีการ ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI. </ p>
<ul>
<li> รายการหนึ่ง </ li>
<li> รายการรายการที่สอง </ li>
<li> รายการสาม </ li>
</ ul>
</ div>
<h3> ส่วนที่ 4 </ h3>
<div>
<p> Cras ภาษิต Pellentesque Habitant ผ้าเทนนิส senectus et netus et malesuada fames AC turpis egestas เดิมพัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae; .. Aenean Lacinia มาร์ทหรือ EST </ p> <p> Suspendisse สหภาพยุโรป NISL . Nullam UT Libero. จำนวนเต็ม dignissim consequat Lectus. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. </ p>
</ div>
</ div>
<ปุ่ม id = "สลับ"> ไอคอนสลับ </ ปุ่ม>
</ body>
</ html>
พื้นที่บรรจุ
ตั้งแต่แผงพับประกอบด้วยองค์ประกอบระดับบล็อกและเริ่มต้นความกว้างเติมพื้นที่ตามแนวนอน เพื่อเติมเต็มพื้นที่ตามแนวตั้งจัดสรรโดยภาชนะที่ตั้ง heightStyle ตัวเลือก "fill" สคริปต์จะตั้งค่าความสูงของแผงขนาดพับเก็บหลักโดยอัตโนมัติ
<! 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>
# หีบเพลง Resizer {
padding: 10px;
ความกว้าง: 350px;
ความสูง: 220px;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "#accordion") .accordion ({
heightStyle: "เติม"
});
});
$ (ฟังก์ชั่น () {
$ ( "# หีบเพลง Resizer") .resizable ({
minHeight: 140,
minWidth: 200
ปรับขนาด: ฟังก์ชั่น () {
$ ( "#accordion") .accordion ( "รีเฟรช");
}
});
});
</ script>
</ head>
<body>
<ระดับ H3 = "เอกสาร"> ปรับภาชนะบรรจุด้านนอก: </ h3>
<div id = "หีบเพลง Resizer" class = "UI-Widget เนื้อหา">
<div id = "หีบเพลง">
<h3> ส่วนที่ 1 </ h3>
<div>
<p> มาร์ทมาร์ท ante, blandit et, ultrices ที่ suscipit Eget, Quam. จำนวนเต็ม UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum Amet นั่ง, ในขณะนี้. น้ำอะแดปเตอร์. แบบพกพา suscipit อยู่. น้ำไมล์. ไมโครเวฟ viverra สิงห์ UT Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate. </ p>
</ div>
<h3> ส่วนที่ 2 </ h3>
<div>
<p> Sed ไม่ใช่ urna. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง Purus. Vivamus สำนัก, บังคับที่ปั๊ม aliquet, มาร์ท turpis porttitor velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน suscipit faucibus urna. < / p>
</ div>
<h3> ส่วนที่ 3 </ h3>
<div>
<p> น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis. Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน Lacinia ornare , วิธีการ ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI. </ p>
<ul>
<li> รายการหนึ่ง </ li>
<li> รายการรายการที่สอง </ li>
<li> รายการสาม </ li>
</ ul>
</ div>
<h3> ส่วนที่ 4 </ h3>
<div>
<p> Cras ภาษิต Pellentesque Habitant ผ้าเทนนิส senectus et netus et malesuada fames AC turpis egestas เดิมพัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae; .. Aenean Lacinia มาร์ทหรือ EST </ p> <p> Suspendisse สหภาพยุโรป NISL . Nullam UT Libero. จำนวนเต็ม dignissim consequat Lectus. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. </ p>
</ div>
</ div>
</ div>
</ body>
</ html>
ความสูงที่ไม่ใช่แบบอัตโนมัติ
การตั้งค่า heightStyle: "content" เพื่อให้แผ่นพับเก็บความสูงเดิมของพวกเขา
<! 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">
<script>
$ (ฟังก์ชั่น () {
$ ( "#accordion") .accordion ({
heightStyle: "เนื้อหา"
});
});
</ script>
</ head>
<body>
<div id = "หีบเพลง">
<h3> ส่วนที่ 1 </ h3>
<div>
<p> มาร์ทมาร์ท ante, blandit et, ultrices ที่ susceros. น้ำไมล์. ไมโครเวฟ viverra สิงห์ UT Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate. </ p>
</ div>
<h3> ส่วนที่ 2 </ h3>
<div>
<p> Sed ไม่ใช่ urna. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง Purus. Vivamus สำนัก, บังคับที่ปั๊ม aliquet, มาร์ท turpis porttitor velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน suscipit faucibus urna. < / p>
</ div>
<h3> ส่วนที่ 3 </ h3>
<div>
<p> น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis. Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน Lacinia ornare , วิธีการ ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI. </ p>
<ul>
<li> รายการ </ li>
<li> รายการ </ li>
<li> รายการ </ li>
<li> รายการ </ li>
<li> รายการ </ li>
<li> รายการ </ li>
<li> รายการ </ li>
</ ul>
</ div>
</ div>
</ body>
</ html>
เมื่อเปิดโฉบ
คลิกที่หัวเพื่อขยายเนื้อหายุบ / แบ่งออกเป็นส่วนต่าง ๆ ของตรรกะเช่นแท็บ (แท็บ) เดียวกัน คุณสามารถเลือกการตั้งค่าเมื่อเมาส์วนเวียนอยู่ว่าจะเปลี่ยนไปเปิดส่วนต่าง ๆ ของการเปิด / ปิดสถานะ
แท็ก HTML พื้นฐานคือชุดของชื่อ (แท็ก H3) และ div เนื้อหาเพื่อให้เนื้อหาที่สามารถนำมาใช้โดยไม่ต้องผ่าน JavaScript
<! 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">
<script>
$ (ฟังก์ชั่น () {
$ ( "#accordion") .accordion ({
เหตุการณ์: "คลิก hoverintent"
});
});
/ *
* HoverIntent | สงวนลิขสิทธิ์ พ.ศ. 2011 ไบรอัน Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* ดัดแปลงโดยทีม jQuery UI
* /
$ .event.special.hoverintent = {
การตั้งค่าฟังก์ชั่น () {
$ (นี้) .bind ( "mouseover" jQuery.event.special.hoverintent.handler);
}
teardown: ฟังก์ชั่น () {
$ (นี้) .unbind ( "mouseover" jQuery.event.special.hoverintent.handler);
}
จัดการ: ฟังก์ชั่น (event) {
var currentX, CURRENTY, หมดเวลา
ข้อโต้แย้ง args =
target = $ (event.target)
previousX = event.pageX,
previousy = event.pageY;
ฟังก์ชั่นการติดตาม (event) {
currentX = event.pageX;
CURRENTY = event.pageY;
};
ฟังก์ชั่นที่ชัดเจน () {
เป้า
.unbind ( "MouseMove" แทร็ค)
.unbind ( "mouseout" ชัดเจน);
clearTimeout (หมดเวลา);
}
ฟังก์ชั่นการจัดการ () {
เสา var,
orig = เหตุการณ์;
ถ้า ((Math.abs (previousX - currentX) +
Math.abs (previousy - CURRENTY)) <7) {
ชัดเจน ();
เหตุการณ์ = $ .Event ( "hoverintent");
สำหรับ (prop ใน orig) {
ถ้า (! (prop ในกรณี)) {
กิจกรรม [ประคับประคอง] = orig [ประคับประคอง];
}
}
// ป้องกันการเข้าถึงกับเหตุการณ์เดิมเพราะเหตุการณ์ใหม่จะถูกเรียกถ่ายทอดสดเหตุการณ์เก่าไม่สามารถใช้ได้อีก (# 6028)
ลบ event.originalEvent;
target.trigger (event);
} else {
previousX = currentX;
previousy = CURRENTY;
หมดเวลา = setTimeout (จัดการ, 100);
}
}
หมดเวลา = setTimeout (จัดการ, 100);
target.bind ({
mousemove: ติดตาม
mouseout: ชัดเจน
});
}
};
</ script>
</ head>
<body>
<div id = "หีบเพลง">
<h3> ส่วนที่ 1 </ h3>
<div>
<p>
มาร์ทมาร์ท ante, blandit et, ultrices ที่ suscipit Eget, Quam. จำนวนเต็ม
UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum นั่ง
Amet, ในขณะนี้. น้ำอะแดปเตอร์. แบบพกพา suscipit อยู่. น้ำไมล์. ไมโครเวฟ viverra สิงห์ยูทาห์
Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate
</ p>
</ div>
<h3> ส่วนที่ 2 </ h3>
<div>
<p>
ไม่ใช่ urna sed. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง
Purus. Vivamus สำนัก, บังคับที่ aliquet ปั๊ม, มาร์ท turpis porttitor
velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน
suscipit faucibus urna
</ p>
</ div>
<h3> ส่วนที่ 3 </ h3>
<div>
<p>
น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis
Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero
AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน
Lacinia ornare, Quam ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI
</ p>
<ul>
<li> รายการหนึ่ง </ li>
<li> รายการรายการที่สอง </ li>
<li> รายการสาม </ li>
</ ul>
</ div>
<h3> ส่วนที่ 4 </ h3>
<div>
<p>
Cras ภาษิต. Pellentesque Habitant ผ้าเทนนิส senectus et netus
et malesuada fames AC egestas turpis. เดิมพัน ante Ipsum Primis ใน
faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae; Aenean Lacinia
มาร์ทหรือ EST
</ p>
<p>
Suspendisse สหภาพยุโรป NISL. Nullam UT Libero. จำนวนเต็ม dignissim consequat Lectus
ระดับ aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ
inceptos himenaeos
</ p>
</ 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>
/ * เมื่อสั่งซื้อมีปัญหารูปแบบ IE (ดู # 5413) * /
.group {ซูม: 1}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "#accordion")
.accordion ({
ส่วนหัว: "> div> h3"
})
.sortable ({
แกน: "Y"
จัดการ: "h3"
หยุด: ฟังก์ชั่น (เหตุการณ์ UI) {
// เมื่อคุณเรียงลำดับ IE ไม่สามารถลงทะเบียนเบลอเพื่อทริกเกอร์ focusout จัดการเพื่อลบ .ui รัฐโฟกัส
ui.item.children ( "h3") .triggerHandler ( "focusout");
}
});
});
</ script>
</ head>
<body>
<div id = "หีบเพลง">
<ระดับ Div = "กลุ่ม">
<h3> ส่วนที่ 1 </ h3>
<div>
<p> มาร์ทมาร์ท ante, blandit et, ultrices ที่ suscipit Eget, Quam. จำนวนเต็ม UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum Amet นั่ง, ในขณะนี้. น้ำอะแดปเตอร์. แบบพกพา suscipit อยู่. น้ำไมล์. ไมโครเวฟ viverra สิงห์ UT Odio. Curabitur malesuada. การพนัน velit สหภาพยุโรป ante scelerisque vulputate. </ p>
</ div>
</ div>
<ระดับ Div = "กลุ่ม">
<h3> ส่วนที่ 2 </ h3>
<div>
<p> Sed ไม่ใช่ urna. แบบพกพาและ ante. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง Purus. Vivamus สำนัก, บังคับที่ปั๊ม aliquet, มาร์ท turpis porttitor velit, faucibus interdum เทลลัส Libero AC Justo. Vivamus ไม่ใช่ Quam. ใน suscipit faucibus urna. < / p>
</ div>
</ div>
<ระดับ Div = "กลุ่ม">
<h3> ส่วนที่ 3 </ h3>
<div>
<p> น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus. Quisque lobortis. Phasellus pellentesque Purus ใน Massa. Aenean ในกะเทย. Phasellus AC Libero AC เทลลัส pellentesque Semper. Sed AC Felis. Sed commodo, Magna โฟน Lacinia ornare , วิธีการ ante แบ่งปันค้างคาสหภาพยุโรปฟุตบอล Purus สิงห์ venenatis DUI. </ p>
<ul>
<li> รายการหนึ่ง </ li>
<li> รายการรายการที่สอง </ li>
<li> รายการสาม </ li>
</ ul>
</ div>
</ div>
<ระดับ Div = "กลุ่ม">
<h3> ส่วนที่ 4 </ h3>
<div>
<p> Cras ภาษิต Pellentesque Habitant ผ้าเทนนิส senectus et netus et malesuada fames AC turpis egestas เดิมพัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae; .. Aenean Lacinia มาร์ทหรือ EST </ p> <p> Suspendisse สหภาพยุโรป NISL . Nullam UT Libero. จำนวนเต็ม dignissim consequat Lectus. ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia Nostra ต่อ inceptos himenaeos. </ p>
</ div>
</ div>
</ div>
</ body>
</ html>