مسج واجهة المستخدم سبيل المثال - الفرز (قابل للفرز)
استخدام الماوس لضبط القائمة أو شبكة فرزها العناصر.
لمزيد من التفاصيل حول التفاعل للفرز، راجع وثائق API الحاجيات للفرز (للفرز على القطعة) .
وظيفة الافتراضي
يتم تمكين ميزة للفرز على أي عنصر DOM. انقر واسحب الماوس إلى قائمة عناصر الموقع الجديد، وسيتم تعديل العناصر الأخرى تلقائيا. افتراضيا، تبادل للفرز كل دخول draggable السمة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - وظيفة الافتراضي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#sortable {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ العرض: 60٪؛}
#sortable لى {هامش: 0 3PX 3PX 3PX؛ الحشو: 0.4em؛ الحشو اليسار: 1.5em؛ حجم الخط: 1.4em؛ الطول: 18px؛}
#sortable لى فترة {الموقف: مطلقة؛ هامش اليسار: -1.3em؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#sortable") .sortable ()؛
$ ( "#sortable") .disableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<UL معرف = "للفرز">
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 1 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 2 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 3 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 4 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 5 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 6 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-arrowthick-2-NS"> </ SPAN> البند 7 </ لى>
</ UL>
</ الجسم>
</ HTML>
قائمة الاتصال
من connectWith تمرير خيار محدد لوضع قائمة من العناصر في القائمة المفروزة إلى آخر، والعكس بالعكس. وأسهل طريقة هي مع قائمة من جميع الفئات ذات الصلة من فئة CSS، ثم تمر الفئة إلى وظيفة للفرز (على سبيل المثال، connectWith: '.myclass' ).
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - قائمة اتصال </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
# Sortable1، # sortable2 {قائمة على النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0 0 2.5em، تعويم: غادر؛ هامش اليمين: 10px؛}
# Sortable1 لى، و# sortable2 لى {هامش: 0 5px 5px 5px؛ الحشو: 5px؛ حجم الخط: 1.2em، العرض: 120px؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "# Sortable1، # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<UL معرف = "sortable1" الطبقة = "connectedSortable">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 5 </ لى>
</ UL>
<UL معرف = "sortable2" الطبقة = "connectedSortable">
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 5 </ لى>
</ UL>
</ الجسم>
</ HTML>
علامة التبويب قائمة الاتصال
عن طريق وضع الجزء العلوي من عناصر القائمة إلى علامة التبويب المناسب لوضع قائمة من العناصر في القائمة المفروزة إلى آخر، والعكس بالعكس.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - التبويب قائمة اتصال </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
# Sortable1 لى، و# sortable2 لى {هامش: 0 5px 5px 5px؛ الحشو: 5px؛ حجم الخط: 1.2em، العرض: 120px؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "# Sortable1، # sortable2") .sortable () disableSelection ()؛
فار $ علامات التبويب = $ ( "#tabs") .tabs ()؛
فار $ tab_items = $ ( "المجاهدين: ليثيوم الأول"، $ علامات التبويب) .droppable ({
نقبل: "لي .connectedSortable"
hoverClass: "واجهة المستخدم للدولة، تحوم"
قطرة: وظيفة (الحدث، واجهة المستخدم) {
فار $ البند = $ (هذا)؛
فار $ قائمة = $ ($ item.find ( "أ") .attr ( "أ href"))
.find ( ".connectedSortable")؛
ui.draggable.hide ( "بطيء"، وظيفة () {
$ Tabs.tabs ( "خيار"، "نشطة"، $ tab_items.index ($ البند))؛
$ (هذا) .appendTo ($ القائمة). تظهر ( "بطيء")؛
})؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<UL معرف = "sortable1" الطبقة = "connectedSortable واجهة المستخدم المساعد إعادة تعيين">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 5 </ لى>
</ UL>
</ div>
<شعبة معرف = "علامات التبويب-2">
<UL معرف = "sortable2" الطبقة = "connectedSortable واجهة المستخدم المساعد إعادة تعيين">
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 5 </ لى>
</ UL>
</ div>
</ div>
</ الجسم>
</ HTML>
البداية المتأخرة
تأخر بسبب تأخر الوقت والمسافة لمنع نوع عرضي. بواسطة delay ميلي ثانية يجب تعيين الخيار قبل بدء السحب من هذا القبيل. من خلال distance بكسل يجب تعيين الخيار قبل بدء السحب من هذا القبيل.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - تأخر بداية </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
# Sortable1، # sortable2 {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ هامش القاع: 15px؛ التكبير: 1؛}
# Sortable1 لى، و# sortable2 لى {هامش: 0 5px 5px 5px؛ الحشو: 5px؛ حجم الخط: 1.2em، العرض: 95٪؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "# Sortable1") .sortable ({
التأخير: 300
})؛
$ ( "# Sortable2") .sortable ({
المسافة: 15
})؛
$ ( "لي") .disableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<H3 الطبقة = "مستندات"> 300mS وتأخير الوقت: </ H3>
<UL معرف = "sortable1">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
</ UL>
<H3 الطبقة = "مستندات"> تأخير مسافة 15px: </ H3>
<UL معرف = "sortable2">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
</ UL>
</ الجسم>
</ HTML>
يتم عرضها على شكل شبكة
دعونا يتم عرض إدخالات للفرز على شكل شبكة، بحيث تستخدم CSS مع نفس الأبعاد وعرض العائمة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - عرض شبكة </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#sortable {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ العرض: 450px؛}
لى #sortable {هامش: 3PX 3PX 3PX 0؛ الحشو: 1PX، تعويم: غادر؛ العرض: 100px؛ الطول: 90px؛ حجم الخط: 4em؛ مواءمة النصوص: مركز؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#sortable") .sortable ()؛
$ ( "#sortable") .disableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<UL معرف = "للفرز">
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 1 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 2 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 3 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 4 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 5 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 6 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 7 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 8 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 9 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 10 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 11 </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 12 </ لى>
</ UL>
</ الجسم>
</ HTML>
وضع نائبا
عندما سحب دخول للفرز إلى موقع جديد، سوف الإدخالات الأخرى إفساح المجال لدخول. طرح placeholder خيار نقل إلى تعريف فئة من النمط البصري فارغة. القيم المنطقية forcePlaceholderSize الخيار لتعيين حجم العنصر النائب.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - نائب وضعها </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#sortable {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ العرض: 60٪؛}
#sortable لى {هامش: 0 5px 5px 5px؛ الحشو: 5px؛ حجم الخط: 1.2em، الطول: 1.5em؛}
أتش تي أم أل> هيئة #sortable لى {الطول: 1.5em؛ خط الطول: 1.2em؛}
.ui للدولة-تسليط الضوء على {الطول: 1.5em؛ خط الطول: 1.2em؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#sortable") .sortable ({
نائب: "واجهة المستخدم للدولة-تسليط الضوء على"
})؛
$ ( "#sortable") .disableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<UL معرف = "للفرز">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 2 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 5 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 6 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 7 </ لى>
</ UL>
</ الجسم>
</ HTML>
تجهيز قائمة فارغة
بواسطة تم تعيين الخيار false ، لمنع قائمة من كافة إدخالات يتم وضعها في قائمة فارغة منفصلة. افتراضيا، يمكن وضع قيود للفرز في قائمة فارغة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - التعامل مع قائمة فارغة </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
# Sortable1، # sortable2، # sortable3 {قائمة على النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ تعويم: غادر؛ هامش اليمين: 10px؛ الخلفية: #eee؛ الحشو: 5px؛ العرض: 143px؛}
# Sortable1 لى، و# sortable2 لى، و# sortable3 لى {هامش: 5px؛ الحشو: 5px؛ حجم الخط: 1.2em، العرض: 120px؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "المجاهدين"
})؛
$ ( "Ul.dropfalse") .sortable ({
connectWith: "المجاهدين"،
dropOnEmpty: كاذبة
})؛
$ ( "# Sortable1، # sortable2، # sortable3") .disableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<UL معرف = "sortable1" الطبقة = "droptrue">
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> يمكن وضعها .. </ لى>
<الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> .. قائمة فارغة </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 5 </ لى>
</ UL>
<UL معرف = "sortable2" الطبقة = "dropfalse">
<الدرجة لي = "واجهة المستخدم للدولة-تسليط الضوء على"> لا يمكن أن يوضع .. </ لى>
<الدرجة لي = "واجهة المستخدم للدولة-تسليط الضوء على"> .. قائمة فارغة </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 3 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 4 </ لى>
<لى الطبقة = "واجهة المستخدم للدولة-تسليط الضوء على"> البند 5 </ لى>
</ UL>
<UL معرف = "sortable3" الطبقة = "droptrue">
</ UL>
style="clear:both"> <br
</ الجسم>
</ HTML>
وتشمل / استبعاد دخول
المعين من قبل items تمرير خيارات محدد مسج التي يمكن فرز العناصر. هذا الخيار هو الخارج لا يمكن أن يكون أمر مشروع، ولكنها ليست صحيحة الهدف دخول للفرز.
إذا كنت ترغب في منع إدخالات محددة فرزها، إلى cancel خيار تمرير محدد مسج. دخول إلغاء ما زالت صالحة فرز الهدف الإدخالات الأخرى.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - تضمين / استبعاد دخول </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
# Sortable1، # sortable2 {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ التكبير: 1؛}
# Sortable1 لى، و# sortable2 لى {هامش: 0 5px 5px 5px؛ الحشو: 3PX، العرض: 90٪؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "# Sortable1") .sortable ({
العناصر: "لي: لا (.ui المعوقين الدولة)"
})؛
$ ( "# Sortable2") .sortable ({
إلغاء: ".ui للدولة المعوقين"
})؛
$ ( "# Sortable1 لى، و# sortable2 لي") .disableSelection ()؛
})؛
</ script>
</ رئيس>
<body>
<H3 الطبقة = "مستندات"> تحديد العناصر التي لللفرز: </ H3>
<UL معرف = "sortable1">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<الدرجة لي = "الافتراضية واجهة المستخدم للدولة، واجهة المستخدم للدولة المعوقين"> (لست للفرز أو هدف إسقاط) </ لى>
<الدرجة لي = "الافتراضية واجهة المستخدم للدولة، واجهة المستخدم للدولة المعوقين"> (لست للفرز أو هدف إسقاط) </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
</ UL>
<H3 الطبقة = "مستندات"> إلغاء النظام (ولكن كهدف قطرة): </ H3>
<UL معرف = "sortable2">
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 1 </ لى>
<الدرجة لي = "الافتراضية واجهة المستخدم للدولة، واجهة المستخدم للدولة المعوقين"> (لست للفرز) </ لى>
<الدرجة لي = "الافتراضية واجهة المستخدم للدولة، واجهة المستخدم للدولة المعوقين"> (لست للفرز) </ لى>
<لى الطبقة = "واجهة المستخدم للدولة الافتراضي"> البند 4 </ لى>
</ UL>
</ الجسم>
</ HTML>
مكونات البوابة (المداخل)
تمكين مكونات البوابة (على غرار شعبة)، وللفرز، واستخدام connectWith الخيار للسماح بالاتصال بين الأعمدة النوع.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الفرز (قابل للفرز) - مكونات البوابة (المداخل) </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
هيئة {
مين العرض: 520px؛
}
.column {
العرض: 170px؛
تطفو: اليسار،
الحشو القاع: 100px؛
}
.portlet {
هامش: 0 1em 1em 0؛
الحشو: 0.3em.
}
.portlet-رأس {
الحشو: 0.2em 0.3em.
هامش القاع: 0.5em.
موقع: نسبي.
}
.portlet-تبديل {
الموقف: مطلقة؛
أعلى: 50٪؛
الحق: 0؛
هامش قمة: -8px.
}
.portlet المحتوى {
الحشو: 0.4em.
}
.portlet-نائبا {
الحدود: 1PX أسود منقط.
هامش: 0 1em 1em 0؛
الطول: 50px؛
}
</ النمط>
<script>
$ (وظيفة () {
$ ( ".column") .sortable ({
connectWith: ".column"
التعامل مع: ".portlet-رأس"،
إلغاء: ".portlet-تبديل"،
نائب: "مدخل-نائب واجهة المستخدم الزاوية للجميع"
})؛
$ ( ".portlet")
.addClass ( "واجهة المستخدم واجهة المستخدم التطبيق المصغر تطبيق مصغر-المحتوى واجهة المستخدم المساعد-clearfix واجهة المستخدم الزاوية للجميع")
.find ( ".portlet-رأس")
.addClass ( "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع")
.prepend ( "<تمتد الطبقة =" واجهة المستخدم، واجهة المستخدم رمز-رمز-minusthick مدخل-تبديل "> </ SPAN>")؛
$ ( ".portlet-تبديل"). انقر (وظيفة () {
رمز فار = $ (هذا)؛
icon.toggleClass ( "واجهة المستخدم-رمز-minusthick واجهة المستخدم-رمز-plusthick")؛
icon.closest ( ".portlet") .find ( ".portlet المحتوى") .toggle ()؛
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "عمود">
<فئة الدرجة = "المدخل">
<div الطبقة = "المدخل-رأس"> اشترك </ div>
<div الطبقة = "مدخل المحتوى"> أبجد هوز دولور الجلوس امات، consectetuer adipiscing إيليت </ div>
</ div>
<فئة الدرجة = "المدخل">
<فئة الدرجة = "المدخل-رأس"> الأخبار </ div>
<div الطبقة = "مدخل المحتوى"> أبجد هوز دولور الجلوس امات، consectetuer adipiscing إيليت </ div>
</ div>
</ div>
<فئة الدرجة = "عمود">
<فئة الدرجة = "المدخل">
<فئة الدرجة = "المدخل-رأس"> عربة </ div>
<div الطبقة = "مدخل المحتوى"> أبجد هوز دولور الجلوس امات، consectetuer adipiscing إيليت </ div>
</ div>
</ div>
<فئة الدرجة = "عمود">
<فئة الدرجة = "المدخل">
<div الطبقة = "المدخل-رأس"> الرابط </ div>
<div الطبقة = "مدخل المحتوى"> أبجد هوز دولور الجلوس امات، consectetuer adipiscing إيليت </ div>
</ div>
<فئة الدرجة = "المدخل">
<فئة الدرجة = "المدخل-رأس"> صورة </ div>
<div الطبقة = "مدخل المحتوى"> أبجد هوز دولور الجلوس امات، consectetuer adipiscing إيليت </ div>
</ div>
</ div>
</ الجسم>
</ HTML>