ตัวอย่างเช่น jQuery UI - การเรียงลำดับ (จัดเรียง)
ใช้เมาส์เพื่อปรับรายการหรือตารางเรียงองค์ประกอบ
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการทำงานร่วมกันจัดเรียงให้ดูเอกสาร API เครื่องมือจัดเรียง (จัดเรียงวิดเจ็ต)
ฟังก์ชั่นเริ่มต้น
คุณลักษณะการจัดเรียงเปิดใช้งานบนองค์ประกอบ DOM ใด ๆ คลิกและลากเมาส์ไปที่รายการขององค์ประกอบของสถานที่ใหม่ที่รายการอื่น ๆ จะได้รับการปรับโดยอัตโนมัติ โดยค่าเริ่มต้นการจัดเรียงแต่ละรายการที่ใช้ร่วมกัน draggable แอตทริบิวต์
<! 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>
#sortable {list สไตล์-Type: none; margin: 0; padding: 0; ความกว้าง: 60%;}
#sortable li {margin: 0 3px 3px 3px; padding: 0.4em; padding ซ้าย: 1.5em; font-size: 1.4em; ความสูง: 18px;}
ช่วง #sortable li {position: absolute; ขอบซ้าย: -1.3em;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ script>
</ head>
<body>
<ul id = "จัดเรียง">
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> รายการที่ 1 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> รายการที่ 2 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> วาระที่ 3 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> วาระที่ 4 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> รายการ 5 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> วาระที่ 6 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> <span class = "UI-ไอคอน UI-ไอคอน arrowthick-2-NS"> </ span> รายการที่ 7 </ li>
</ ul>
</ body>
</ html>
รายการการเชื่อมต่อ
โดย connectWith ผ่านตัวเลือกตัวเลือกที่จะนำรายชื่อขององค์ประกอบในรายการที่เรียงลำดับไปยังอีกและในทางกลับกัน วิธีที่ง่ายที่สุดคือการที่มีรายชื่อในกลุ่มที่เกี่ยวข้องทั้งหมดของคลาส CSS ที่แล้วผ่านชั้นเรียนเพื่อฟังก์ชั่นการจัดเรียง (เช่น connectWith: '.myclass' )
<! 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>
# Sortable1 # sortable2 {list สไตล์-Type: none; margin: 0; padding: 0 0 2.5em; ลอย: ด้านซ้าย; ขอบขวา: 10px;}
# Sortable1 Li, # sortable2 li {margin: 5px 5px 0 5px; padding: 5px; font-size: 1.2em; กว้าง: 120px;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "# Sortable1 # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ();
});
</ script>
</ head>
<body>
<ul id = "sortable1" class = "connectedSortable">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 2 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการ 5 </ li>
</ ul>
<ul id = "sortable2" class = "connectedSortable">
<li class = "UI-รัฐไฮไลท์"> รายการที่ 1 </ li>
<li class = "UI-รัฐไฮไลท์"> รายการที่ 2 </ li>
<li class = "UI-รัฐไฮไลท์"> วาระที่ 3 </ li>
<li class = "UI-รัฐไฮไลท์"> วาระที่ 4 </ li>
<li class = "UI-รัฐไฮไลท์"> 5 รายการ </ li>
</ ul>
</ 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>
# Sortable1 Li, # sortable2 li {margin: 5px 5px 0 5px; padding: 5px; font-size: 1.2em; กว้าง: 120px;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "# Sortable1 # sortable2") .sortable () disableSelection () .;
var $ แท็บ = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "UL: li แรก" แท็บ $) .droppable ({
ยอมรับ "Li .connectedSortable"
hoverClass: "UI รัฐ-hover"
วางฟังก์ชั่น (เหตุการณ์ UI) {
var $ รายการ = $ (นี้);
var $ รายการ = $ ($ item.find ( "A") .attr ( "href"))
ประจำวันหา ( ".connectedSortable");
ui.draggable.hide ( "ช้า" ฟังก์ชั่น () {
$ Tabs.tabs ( "ตัวเลือก", "งาน", $ tab_items.index ($ รายการ));
$ (นี้) .appendTo ($ รายการ) .show ( "ช้า");
});
}
});
});
</ script>
</ head>
<body>
<div id = "แท็บ">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> ไมโครเวฟได้บังคับ </a> </ li>
</ ul>
<div id = "แท็บ-1">
<ul id = "sortable1" class = "connectedSortable UI-ผู้ช่วยรีเซ็ต">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 2 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการ 5 </ li>
</ ul>
</ div>
<div id = "แท็บ 2">
<ul id = "sortable2" class = "connectedSortable UI-ผู้ช่วยรีเซ็ต">
<li class = "UI-รัฐไฮไลท์"> รายการที่ 1 </ li>
<li class = "UI-รัฐไฮไลท์"> รายการที่ 2 </ li>
<li class = "UI-รัฐไฮไลท์"> วาระที่ 3 </ li>
<li class = "UI-รัฐไฮไลท์"> วาระที่ 4 </ li>
<li class = "UI-รัฐไฮไลท์"> 5 รายการ </ li>
</ ul>
</ div>
</ div>
</ body>
</ html>
เริ่มต้นล่าช้า
ล่าช้าโดยหน่วงเวลาและระยะทางในการป้องกันการเรียงลำดับโดยไม่ได้ตั้งใจ โดย delay มิลลิวินาทีตัวเลือกที่จะต้องตั้งค่าก่อนที่จะเริ่มการลากของการจัดเรียงที่ โดย distance พิกเซลตัวเลือกที่จะต้องตั้งค่าก่อนที่จะเริ่มการลากของการจัดเรียงที่
<! 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>
# Sortable1 # sortable2 {list สไตล์-Type: none; margin: 0; padding: 0; margin ล่าง: 15px; ซูม: 1;}
# Sortable1 Li, # sortable2 li {margin: 5px 5px 0 5px; padding: 5px; font-size: 1.2em; ความกว้าง: 95%;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "# Sortable1") .sortable ({
ล่าช้า: 300
});
$ ( "# Sortable2") .sortable ({
ระยะทาง: 15
});
$ ( "หลี่") .disableSelection ();
});
</ script>
</ head>
<body>
<ระดับ H3 = "เอกสาร"> 300ms หน่วงเวลา: </ h3>
<ul id = "sortable1">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 2 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
</ ul>
<ระดับ H3 = "เอกสาร"> ล่าช้าระยะทาง 15px: </ h3>
<ul id = "sortable2">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 2 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
</ ul>
</ body>
</ html>
มันจะแสดงเป็นตาราง
ให้จัดเรียงรายการจะแสดงเป็นตารางเพื่อให้พวกเขาใช้ 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">
<style>
#sortable {list สไตล์-Type: none; margin: 0; padding: 0; กว้าง: 450px;}
Li #sortable {margin: 3px 3px 3px 0; padding: 1px; ลอย: ด้านซ้าย; กว้าง: 100px; ความสูง: 90px; font-size: 4em; text-align: ศูนย์;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ script>
</ head>
<body>
<ul id = "จัดเรียง">
<ระดับ Li = "UI-รัฐเริ่มต้น"> 1 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 2 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 3 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 4 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 5 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 6 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 7 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 8 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 9 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 10 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 11 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> 12 </ li>
</ ul>
</ body>
</ html>
วางตัวยึด
เมื่อลากรายการจัดเรียงไปยังตำแหน่งใหม่, รายการอื่น ๆ จะทำให้ห้องพักสำหรับรายการ ขอให้ placeholder ตัวเลือกการโอนเพื่อกำหนดระดับของสไตล์ภาพที่ว่างเปล่า ค่าบูลีน forcePlaceholderSize ตัวเลือกในการกำหนดขนาดของตัวยึดที่
<! 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>
#sortable {list สไตล์-Type: none; margin: 0; padding: 0; ความกว้าง: 60%;}
#sortable li {margin: 5px 5px 0 5px; padding: 5px; font-size: 1.2em; ความสูง: 1.5em;}
html> ร่างกาย #sortable li {ความสูง: 1.5em; line-height: 1.2em;}
.ui รัฐไฮไลท์ {ความสูง: 1.5em; line-height: 1.2em;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "#sortable") .sortable ({
ยึด "UI-รัฐไฮไลท์"
});
$ ( "#sortable") .disableSelection ();
});
</ script>
</ head>
<body>
<ul id = "จัดเรียง">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 2 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการ 5 </ li>
<li class = "UI-รัฐเริ่มต้น"> 6 รายการ </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 7 </ li>
</ ul>
</ body>
</ html>
การประมวลผลรายการที่ว่างเปล่า
โดย ตั้งค่าตัวเลือก false เพื่อป้องกันไม่ให้รายการทั้งหมดของรายการจะถูกวางลงในรายการที่ว่างเปล่าแยกต่างหาก โดยค่าเริ่มต้นรายการจัดเรียงสามารถวางลงในรายการที่ว่างเปล่า
<! 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>
# Sortable1 # sortable2 # sortable3 {list สไตล์-Type: none; margin: 0; padding: 0; ลอย: ด้านซ้าย; ขอบขวา: 10px; พื้นหลัง: #eee; padding: 5px; กว้าง: 143px;}
# Sortable1 Li, # sortable2 Li, Li # sortable3 {margin: 5px; padding: 5px; font-size: 1.2em; กว้าง: 120px;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "UL"
});
$ ( "Ul.dropfalse") .sortable ({
connectWith: "UL"
dropOnEmpty: เท็จ
});
$ ( "# Sortable1 # sortable2 # sortable3") .disableSelection ();
});
</ script>
</ head>
<body>
<ul id = "sortable1" class = "droptrue">
<ระดับ Li = "UI-รัฐเริ่มต้น"> สามารถวาง .. </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น"> .. รายการที่ว่างเปล่า </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 3 </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
<li class = "UI-รัฐเริ่มต้น"> รายการ 5 </ li>
</ ul>
<ul id = "sortable2" class = "dropfalse">
<ระดับ Li = "UI-รัฐไฮไลท์"> ไม่สามารถวาง .. </ li>
<ระดับ Li = "UI-รัฐไฮไลท์"> .. รายการที่ว่างเปล่า </ li>
<li class = "UI-รัฐไฮไลท์"> วาระที่ 3 </ li>
<li class = "UI-รัฐไฮไลท์"> วาระที่ 4 </ li>
<li class = "UI-รัฐไฮไลท์"> 5 รายการ </ li>
</ ul>
<ul id = "sortable3" class = "droptrue">
</ ul>
style="clear:both"> <br
</ body>
</ html>
รวม / ไม่รวมรายการ
กำหนดโดย items ผ่านการเลือกตัวเลือก jQuery รายการที่สามารถจัดเรียง ตัวเลือกนี้จะอยู่นอกโครงการไม่สามารถสั่งซื้อได้ แต่พวกเขาไม่ได้เป็นเป้าหมายที่ถูกต้องรายการจัดเรียง
หากคุณต้องการที่จะป้องกันไม่ให้รายการที่เฉพาะเจาะจงเรียงเพื่อ cancel เลือกที่จะผ่านการเลือก jQuery รายการยกเลิกยังคงเป็นเป้าหมายที่ถูกต้องเรียงลำดับรายการอื่น ๆ
<! 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>
# Sortable1 # sortable2 {list สไตล์-Type: none; margin: 0; padding: 0; ซูม: 1;}
# Sortable1 Li, # sortable2 li {margin: 5px 5px 0 5px; padding: 3px; ความกว้าง: 90%;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "# Sortable1") .sortable ({
รายการ "หลี่: ไม่ได้ (.ui รัฐพิการ)"
});
$ ( "# Sortable2") .sortable ({
ยกเลิก ".ui รัฐพิการ"
});
$ ( "# Sortable1 Li, Li # sortable2") .disableSelection ();
});
</ script>
</ head>
<body>
<ระดับ H3 = "เอกสาร"> ระบุรายการที่จัดเรียง: </ h3>
<ul id = "sortable1">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น UI รัฐพิการ"> (ฉันไม่สามารถจัดเรียงหรือเป้าหมายลดลง) </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น UI รัฐพิการ"> (ฉันไม่สามารถจัดเรียงหรือเป้าหมายลดลง) </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
</ ul>
<ระดับ H3 = "เอกสาร"> ยกเลิกคำสั่งซื้อ ( แต่เป็นเป้าหมายลดลง): </ h3>
<ul id = "sortable2">
<li class = "UI-รัฐเริ่มต้น"> รายการที่ 1 </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น UI รัฐพิการ"> (ฉันไม่สามารถจัดเรียง) </ li>
<ระดับ Li = "UI-รัฐเริ่มต้น UI รัฐพิการ"> (ฉันไม่สามารถจัดเรียง) </ li>
<li class = "UI-รัฐเริ่มต้น"> วาระที่ 4 </ li>
</ ul>
</ body>
</ html>
ส่วนประกอบพอร์ทัล (พอร์ตเล็ต)
เปิดใช้งานส่วนประกอบพอร์ทัล (สไตล์ div) เช่นการจัดเรียงและใช้ connectWith ตัวเลือกที่จะช่วยให้การสื่อสารระหว่างคอลัมน์เรียงลำดับ
<! 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>
ร่างกาย {
นาทีความกว้าง: 520px;
}
.column {
ความกว้าง: 170 พิกเซล;
ลอย: ด้านซ้าย;
padding ล่าง: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet หัว {
padding: 0.2em 0.3em;
ขอบล่าง: 0.5em;
ตำแหน่ง: ญาติ;
}
.portlet-สลับ {
position: absolute;
ด้านบน: 50%;
ขวา: 0;
ขอบด้านบน: -8px;
}
.portlet เนื้อหา {
padding: 0.4em;
}
.portlet-ยึด {
ชายแดน: 1px สีดำประ;
margin: 0 1em 1em 0;
ความสูง: 50px;
}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( ".column") .sortable ({
connectWith: ".column"
จัดการ: ".portlet หัว"
ยกเลิก ".portlet-สลับ"
ยึด "พอร์ตเล็ตตัวยึด UI-มุมทุกคน"
});
$ ( ".portlet")
.addClass ( "UI-Widget UI-Widget เนื้อหา UI-ผู้ช่วย clearfix UI-มุมทุกคน")
ประจำวันหา ( ".portlet หัว")
.addClass ( "UI-Widget หัว UI-มุมทุกคน")
.prepend ( "<span class = 'UI-ไอคอน UI-ไอคอน minusthick พอร์ตเล็ตสลับ"> </ span> ");
$ ( ".portlet-สลับ") จำนวนคลิก (ฟังก์ชั่น () {
ไอคอน var = $ (นี้);
icon.toggleClass ( "UI-ไอคอน minusthick UI-ไอคอน plusthick");
icon.closest ( ".portlet") ประจำวันหา ( ".portlet เนื้อหา") .toggle ();
});
});
</ script>
</ head>
<body>
<ระดับ Div = "คอลัมน์">
<ระดับ Div = "พอร์ตเล็ต">
<div class = "พอร์ตเล็ตหัว"> สมัคร </ div>
<div class = "พอร์ตเล็ตเนื้อหา"> Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit </ div>
</ div>
<ระดับ Div = "พอร์ตเล็ต">
<ระดับ Div = "พอร์ตเล็ตหัว"> ข่าว </ div>
<div class = "พอร์ตเล็ตเนื้อหา"> Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit </ div>
</ div>
</ div>
<ระดับ Div = "คอลัมน์">
<ระดับ Div = "พอร์ตเล็ต">
<ระดับ Div = "พอร์ตเล็ตหัว"> รถเข็น </ div>
<div class = "พอร์ตเล็ตเนื้อหา"> Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit </ div>
</ div>
</ div>
<ระดับ Div = "คอลัมน์">
<ระดับ Div = "พอร์ตเล็ต">
<div class = "พอร์ตเล็ตหัว"> เชื่อมโยง </ div>
<div class = "พอร์ตเล็ตเนื้อหา"> Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit </ div>
</ div>
<ระดับ Div = "พอร์ตเล็ต">
<ระดับ Div = "พอร์ตเล็ตหัว"> ภาพ </ div>
<div class = "พอร์ตเล็ตเนื้อหา"> Lorem Ipsum บังคับ Amet นั่ง, consectetuer adipiscing Elit </ div>
</ div>
</ div>
</ body>
</ html>