مسج واجهة المستخدم سبيل المثال - علامات التبويب (علامات)
مجال المحتوى واحدة من لوحة متعددة، كل لوحة في عنوان القائمة.
لمزيد من التفاصيل حول مكونات علامات التبويب، راجع وثائق API عضوا التبويب (على القطعة علامات التبويب) .
وظيفة الافتراضي
انقر فوق علامة التبويب للتبديل ينقسم إلى جزء منطقي مختلفة من المحتوى.
<! 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">
<script>
$ (وظيفة () {
$ ( "#tabs") .tabs ()؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
<لي> <a href="#tabs-3"> Aenean خمل </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
<شعبة معرف = "علامات التبويب-2">
<P> مرضي tincidunt، دوى الجلوس امات facilisis feugiat، أوديو metus حامل؛ حبلى ما كان عليه سابقا، UT pharetra ماسا metus معرف نونك. Duis scelerisque molestie turpis. سد fringilla، ماسا eget luctus malesuada، metus إيروس molestie LECTUS، التحرير تيمبوس إيروس ماسا التحرير دولور. Aenean aliquet fringilla ووزارة شؤون المرأة. Suspendisse الحوار الاقتصادي الاستراتيجي ligula في aliquam ligula suscipit. Praesent في إيروس دهليز ميل adipiscing adipiscing. مرضي facilisis. Curabitur ornare consequat نونك. Aenean فيل metus. أوت الاستفسار viverra ولا عقوبة. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat، تيلوس pellentesque pretium الاستفسار، الهرية أبجد euismod الهرية، الاتحاد الأوروبي ليو ornare احترازيا فيل الهرية. Mauris consectetur tortor آخرون بوروس. </ P>
</ div>
<شعبة معرف = "علامات التبويب-3">
<P> Mauris eleifend بتوقيت شرق الولايات المتحدة وآخرون turpis. Duis معرف erat. potenti Suspendisse. Aliquam vulputate، والر فيل vehicula accumsan، ميل neque rutrum erat، الاتحاد الأوروبي congue أورسي أبجد eget أبجد. دهليز غير ما كان عليه سابقا. الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا ، في inceptos himenaeos. Fusce sodales. Quisque الاتحاد الأوروبي URNA فيل ENIM commodo pellentesque. Praesent الاتحاد الأوروبي RISUS hendrerit ligula تيمبوس pretium. Curabitur أبجد ENIM، pretium اللجنة الوطنية للانتخابات، feugiat اللجنة الوطنية للانتخابات، luctus لذلك، lacus. </ P>
<P> Duis CURSUS. Maecenas إيروس ligula، غير المصنفة في موضع blandit، pharetra في، سمبر في، ماجنا. Nullam ميلان lacus. facilisi لا عقوبة. Praesent viverra خوستو السيرة neque. Praesent blandit adipiscing velit. potenti Suspendisse. Donec ماتيس، والر فيل pharetra blandit، ماجنا ligula faucibus إيروس، معرف euismod lacus دولور eget أوديو. نام scelerisque. Donec غير يبيرو ااا ولا عقوبة ماتيس commodo. أوت sagittis. Donec احترازيا LECTUS، feugiat porttitor، tempor ميلان، tempor الذاتية، والر. Aenean vehicula velit الاتحاد الأوروبي تيلوس interdum rutrum. Maecenas commodo. Pellentesque غير المصنفة في موضع إيليت. Fusce في lacus. Vivamus ليبيرو السيرة LECTUS hendrerit hendrerit. </ P>
</ div>
</ div>
</ الجسم>
</ HTML>
محتوى قابل للطي
انقر على علامة التبويب المحددة لتبديل المحتوى مغلق / مفتوح. لتمكين هذه الميزة، تحتاج إلى تعيين collapsible الخيار إلى true.
<! 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">
<script>
$ (وظيفة () {
$ ( "#tabs") .tabs ({
للطي: صحيح
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
<لي> <a href="#tabs-3"> Aenean خمل </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<P> <strong> انقر فوق علامة التبويب مرة أخرى لإغلاق لوحة المحتوى. </ قوي> </ P>
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
<شعبة معرف = "علامات التبويب-2">
<P> <strong> انقر فوق علامة التبويب مرة أخرى لإغلاق لوحة المحتوى. </ قوي> </ P>
<P> مرضي tincidunt، دوى الجلوس امات facilisis feugiat، أوديو metus حامل؛ حبلى ما كان عليه سابقا، UT pharetra ماسا metus معرف نونك. Duis scelerisque molestie turpis. سد fringilla، ماسا eget luctus malesuada، metus إيروس molestie LECTUS، التحرير تيمبوس إيروس ماسا التحرير دولور. Aenean aliquet fringilla ووزارة شؤون المرأة. Suspendisse الحوار الاقتصادي الاستراتيجي ligula في aliquam ligula suscipit. Praesent في إيروس دهليز ميل adipiscing adipiscing. مرضي facilisis. Curabitur ornare consequat نونك. Aenean فيل metus. أوت الاستفسار viverra ولا عقوبة. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat، تيلوس pellentesque pretium الاستفسار، الهرية أبجد euismod الهرية، الاتحاد الأوروبي ليو ornare احترازيا فيل الهرية. Mauris consectetur tortor آخرون بوروس. </ P>
</ div>
<شعبة معرف = "علامات التبويب-3">
<P> <strong> انقر فوق علامة التبويب مرة أخرى لإغلاق لوحة المحتوى. </ قوي> </ P>
<P> Duis CURSUS. Maecenas إيروس ligula، غير المصنفة في موضع blandit، pharetra في، سمبر في، ماجنا. Nullam ميلان lacus. facilisi لا عقوبة. Praesent viverra خوستو السيرة neque. Praesent blandit adipiscing velit. potenti Suspendisse. Donec ماتيس، والر فيل pharetra blandit، ماجنا ligula faucibus إيروس، معرف euismod lacus دولور eget أوديو. نام scelerisque. Donec غير يبيرو ااا ولا عقوبة ماتيس commodo. أوت sagittis. Donec احترازيا LECTUS، feugiat porttitor، tempor ميلان، tempor الذاتية، والر. Aenean vehicula velit الاتحاد الأوروبي تيلوس interdum rutrum. Maecenas commodo. Pellentesque غير المصنفة في موضع إيليت. Fusce في lacus. Vivamus ليبيرو السيرة LECTUS hendrerit hendrerit. </ P>
</ div>
</ div>
</ الجسم>
</ HTML>
الحصول على المحتوى عبر اياكس
تعيين قيمة href صلة في علامة تبويب إلى علامة التبويب إلى الوصول إلى المحتوى الخارجي عبر اياكس. عندما طلبات اياكس تنتظر الرد، علامة تبويب إلى "تحميل ..."، عندما كان الحمل عودة كاملة إلى علامة التبويب عام.
العلامة 3 و 4 تثبت بطء التحميل والأضرار التي لحقت به أجاكس، وكيفية التعامل مع الأخطاء من جانب الملقم في هذه الظروف. يرجى ملاحظة أن كلا تتطلب خادم الويب يمكن أن يفسر PHP. أنها لا تعمل خارج نظام الملفات.
<! 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">
<script>
$ (وظيفة () {
$ ( "#tabs") .tabs ({
beforeLoad: وظيفة (الحدث، واجهة المستخدم) {
ui.jqXHR.error (وظيفة () {
ui.panel.html (
"لا يمكن تحميل الجدولة. وإذا كان هذا ليس العرض." +
واضاف "اننا سوف يحل المشكلة في أقرب وقت ممكن.")؛
})؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> مسبقة </A> </ لى>
<لي> العلامة <a href="ajax/content1.html"> 1 </A> </ لى>
<لي> العلامة <a href="ajax/content2.html"> 2 </A> </ لى>
<لي> <a العلامة href="ajax/content3-slow.php"> 3 (بطيئة) </A> </ لى>
<لي> <a href="ajax/content4-broken.php"> التسمية 4 (تالف) </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
</ div>
</ الجسم>
</ HTML>
فتح عندما تحوم الماوس
قبل event خيار للتبديل الأجزاء عند الفأر تحوم على / قبالة الوضع. القيمة الافتراضية هي الحدث "فوق".
<! 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">
<script>
$ (وظيفة () {
$ ( "#tabs") .tabs ({
الحدث: "مرر الفأرة فوق"
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
<لي> <a href="#tabs-3"> Aenean خمل </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
<شعبة معرف = "علامات التبويب-2">
<P> مرضي tincidunt، دوى الجلوس امات facilisis feugiat، أوديو metus حامل؛ حبلى ما كان عليه سابقا، UT pharetra ماسا metus معرف نونك. Duis scelerisque molestie turpis. سد fringilla، ماسا eget luctus malesuada، metus إيروس molestie LECTUS، التحرير تيمبوس إيروس ماسا التحرير دولور. Aenean aliquet fringilla ووزارة شؤون المرأة. Suspendisse الحوار الاقتصادي الاستراتيجي ligula في aliquam ligula suscipit. Praesent في إيروس دهليز ميل adipiscing adipiscing. مرضي facilisis. Curabitur ornare consequat نونك. Aenean فيل metus. أوت الاستفسار viverra ولا عقوبة. aliquam erat volutpat. pellentesque convallis. Maecenas feugiat، تيلوس pellentesque pretium الاستفسار، الهرية أبجد euismod الهرية، الاتحاد الأوروبي ليو ornare احترازيا فيل الهرية. Mauris consectetur tortor آخرون بوروس. </ P>
</ div>
<شعبة معرف = "علامات التبويب-3">
<P> Mauris eleifend بتوقيت شرق الولايات المتحدة وآخرون turpis. Duis معرف erat. potenti Suspendisse. Aliquam vulputate، والر فيل vehicula accumsan، ميل neque rutrum erat، الاتحاد الأوروبي congue أورسي أبجد eget أبجد. دهليز غير ما كان عليه سابقا. الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا ، في inceptos himenaeos. Fusce sodales. Quisque الاتحاد الأوروبي URNA فيل ENIM commodo pellentesque. Praesent الاتحاد الأوروبي RISUS hendrerit ligula تيمبوس pretium. Curabitur أبجد ENIM، pretium اللجنة الوطنية للانتخابات، feugiat اللجنة الوطنية للانتخابات، luctus لذلك، lacus. </ P>
<P> Duis CURSUS. Maecenas إيروس ligula، غير المصنفة في موضع blandit، pharetra في، سمبر في، ماجنا. Nullam ميلان lacus. facilisi لا عقوبة. Praesent viverra خوستو السيرة neque. Praesent blandit adipiscing velit. potenti Suspendisse. Donec ماتيس، والر فيل pharetra blandit، ماجنا ligula faucibus إيروس، معرف euismod lacus دولور eget أوديو. نام scelerisque. Donec غير يبيرو ااا ولا عقوبة ماتيس commodo. أوت sagittis. Donec احترازيا LECTUS، feugiat porttitor، tempor ميلان، tempor الذاتية، والر. Aenean vehicula velit الاتحاد الأوروبي تيلوس interdum rutrum. Maecenas commodo. Pellentesque غير المصنفة في موضع إيليت. Fusce في lacus. Vivamus ليبيرو السيرة LECTUS hendrerit hendrerit. </ P>
</ div>
</ div>
</ الجسم>
</ 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">
<نمط>
التسمية #dialog، ومدخلات #dialog {عرض: كتلة؛}
التسمية #dialog {هامش قمة: 0.5em؛}
إدخال #dialog، تيكستاريا #dialog {العرض: 95٪؛}
#tabs {هامش قمة: 1em؛}
#tabs لى .ui-رمز-بالقرب {تعويم: غادر؛ هامش: 0.4em 0.2em 0 0؛ المؤشر: المؤشر؛}
#add_tab {المؤشر: المؤشر؛}
</ النمط>
<script>
$ (وظيفة () {
فار tabTitle = $ ( "#tab_title")،
tabContent = $ ( "#tab_content")،
tabTemplate = "<li> و<a href='#{href}'> # {التسمية} </A> <تمتد الطبقة =" واجهة المستخدم، واجهة المستخدم رمز أيقونة من مسافة قريبة "دور = 'عرض'> إزالة تبويب </ SPAN > </ لى> "،
tabCounter = 2؛
فار علامات التبويب = $ ( "#tabs") .tabs ()؛
// تهيئة مربع حوار مشروط: زر وشكل إعادة الداخلي "وثيقة" الحوار رد فار = $ ( "#dialog") .dialog تخصيص ({
autoOpen: كاذبة،
مشروط: صحيح،
أزرار: {
إضافة: وظيفة () {
addTab ()؛
$ (هذا) .dialog ( "وثيقة")؛
}،
إلغاء: وظيفة () {
$ (هذا) .dialog ( "وثيقة")؛
}
}،
وثيقة: وظيفة () {
تشكيل [0] .reset ()؛
}
})؛
// AddTab النموذج: دعا عند تقديم وظيفة addTab وإغلاق مربع الحوار فار شكل = dialog.find ( "شكل") .submit (وظيفة (الحدث) {
addTab ()؛
dialog.dialog ( "وثيقة")؛
event.preventDefault ()؛
})؛
// الفعلية وظيفة addTab: استخدام النموذج أعلاه لإضافة وظيفة علامة التبويب مدخلات جديدة addTab () {
التسمية فار = tabTitle.val () || "الجدولة" + tabCounter،
معرف = "tabs-" + tabCounter،
لى = $ (tabTemplate.replace (/ # \ {أ href \} / ز، "#" + ID) .replace (/ # \ {تسمية \} / ز، والتسمية))،
tabContentHtml = tabContent.val () || "الجدولة" + tabCounter + "المحتوى"؛
tabs.find ( ".ui علامات التبويب-الملاحة") .append (لي).
tabs.append ( "<div معرف =" + معرف + ""> <p> و"+ tabContentHtml +" </ P> </ div> ")؛
tabs.tabs ( "تجديد")؛
tabCounter ++؛
}
// زر AddTab: قيمة مربع الحوار فتح $ ( "#add_tab")
.button ()
. انقر (وظيفة () {
dialog.dialog ( "فتح")؛
})؛
// انهيار أيقونة: إزالة علامة التبويب tabs.delegate ( "span.ui-رمز من مسافة قريبة" عند النقر عليها، "فوق"، وظيفة () {
فار panelId = $ (هذا) .closest ( "لي"). إزالة () ATTR ( "الأغنية ضوابط")؛
$ ( "#" + PanelId). إزالة ()؛
tabs.tabs ( "تجديد")؛
})؛
tabs.bind ( "keyup"، وظيفة (الحدث) {
إذا (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. فار panelId = tabs.find ( ".ui علامات التبويب النشطة"). إزالة () ATTR ( "الأغنية ضوابط")؛
$ ( "#" + PanelId). إزالة ()؛
tabs.tabs ( "تجديد")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "الحوار" عنوان = "تبويب البيانات">
<النموذج>
<الطبقة مجموعة حقول = "واجهة المستخدم المساعد إعادة تعيين">
<تسمية ل= "TAB_TITLE"> عنوان </ التسمية>
<إدخال نوع = "نص" اسم = "TAB_TITLE" معرف = "TAB_TITLE" قيمة = "" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع">
<تسمية ل= "tab_content"> المحتوى </ التسمية>
<اسم ناحية النص = "tab_content" معرف = "tab_content" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع"> </ textarea> من
</ مجموعة حقول>
</ النموذج>
</ div>
<زر معرف = "add_tab"> إضافة علامة تبويب </ زر>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> <الطبقة تمتد = "واجهة المستخدم، واجهة المستخدم رمز أيقونة من مسافة قريبة" دور = "عرض"> إزالة علامة التبويب </ SPAN> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
</ div>
</ الجسم>
</ HTML>
نوع (قابل للفرز)
علامات السحب فوق لإعادة ترتيبها.
مجرد دعوة .ui-tabs-nav عنصر على .sortable() ، يمكنك أن تدع علامات التبويب للفرز.
<! 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">
<script>
$ (وظيفة () {
فار علامات التبويب = $ ( "#tabs") .tabs ()؛
tabs.find ( "علامات التبويب .ui-الملاحة") .sortable ({
محور: "س"،
وقف: وظيفة () {
tabs.tabs ( "تجديد")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
<لي> <a href="#tabs-3"> Aenean خمل </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
<شعبة معرف = "علامات التبويب-2">
<P> مرضي tincidunt، دوى الجلوس امات facilisis feugiat، أوديو metus حامل؛ حبلى ما كان عليه سابقا، UT pharetra ماسا metus معرف نونك. Duis scelerisque molestie turpis. سد fringilla، ماسا eget luctus malesuada، metus إيروس molestie LECTUS، التحرير تيمبوس إيروس ماسا التحرير دولور. Aenean aliquet fringilla ووزارة شؤون المرأة. Suspendisse الحوار الاقتصادي الاستراتيجي ligula في aliquam ligula suscipit. Praesent في إيروس دهليز ميل adipiscing adipiscing. مرضي facilisis. Curabitur ornare consequat نونك. Aenean فيل metus. أوت الاستفسار viverra ولا عقوبة. aliquam erat volutpat. pellentesque convallis. Maecenas feugiat، تيلوس pellentesque pretium الاستفسار، الهرية أبجد euismod الهرية، الاتحاد الأوروبي ليو ornare احترازيا فيل الهرية. Mauris consectetur tortor آخرون بوروس. </ P>
</ div>
<شعبة معرف = "علامات التبويب-3">
<P> Mauris eleifend بتوقيت شرق الولايات المتحدة وآخرون turpis. Duis معرف erat. potenti Suspendisse. Aliquam vulputate، والر فيل vehicula accumsan، ميل neque rutrum erat، الاتحاد الأوروبي congue أورسي أبجد eget أبجد. دهليز غير ما كان عليه سابقا. الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا ، في inceptos himenaeos. Fusce sodales. Quisque الاتحاد الأوروبي URNA فيل ENIM commodo pellentesque. Praesent الاتحاد الأوروبي RISUS hendrerit ligula تيمبوس pretium. Curabitur أبجد ENIM، pretium اللجنة الوطنية للانتخابات، feugiat اللجنة الوطنية للانتخابات، luctus لذلك، lacus. </ P>
<P> Duis CURSUS. Maecenas إيروس ligula، غير المصنفة في موضع blandit، pharetra في، سمبر في، ماجنا. Nullam ميلان lacus. facilisi لا عقوبة. Praesent viverra خوستو السيرة neque. Praesent blandit adipiscing velit. potenti Suspendisse. Donec ماتيس، والر فيل pharetra blandit، ماجنا ligula faucibus إيروس، معرف euismod lacus دولور eget أوديو. نام scelerisque. Donec غير يبيرو ااا ولا عقوبة ماتيس commodo. أوت sagittis. Donec احترازيا LECTUS، feugiat porttitor، tempor ميلان، tempor الذاتية، والر. Aenean vehicula velit الاتحاد الأوروبي تيلوس interdum rutrum. Maecenas commodo. Pellentesque غير المصنفة في موضع إيليت. Fusce في lacus. Vivamus ليبيرو السيرة LECTUS hendrerit hendrerit. </ P>
</ div>
</ div>
</ الجسم>
</ HTML>
الجزء السفلي من علامة التبويب
مع بعض CSS إضافي (لتحديد المواقع) وشبيبة (وضعت في العنصر فئة الصحيح)، علامة التبويب JIEKE في الجزء السفلي من المحتوى.
<! 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">
<script>
$ (وظيفة () {
$ ( "#tabs") .tabs ()؛
// تعديل الدرجة
$ ( ".tabs من أسفل .ui علامات التبويب، الملاحة، .tabs القاع .ui علامات التبويب-الملاحة> *")
.removeClass ( "واجهة المستخدم الزاوية عن واجهة المستخدم الركن العلوي")
.addClass ( "واجهة المستخدم أسفل الزاوية")؛
الملاحة المحمول في جزء نهاية // $ ( ".tabs القاع .ui علامات التبويب-الملاحة") .appendTo ( ".tabs-القاع")؛
})؛
</ script>
<نمط>
/ * القسري على ارتفاع، بحيث لا يتغير علامة التبويب مع ارتفاع محتوى يتم تغيير * /
#tabs .tabs-هل {تعويم: غادر؛ الطول: 200px؛}
.tabs القاع .ui علامات التبويب-الملاحة {واضح: الأيسر. الحشو: 0 .2em .2em .2em؛}
.tabs القاع .ui علامات التبويب-الملاحة لى {العلوي: السيارات، أسفل: 0؛ هامش: 0 .2em 1PX 0؛ الحدود القاع: السيارات؛ الحدود بين كبار: 0؛}
.tabs القاع .ui علامات التبويب-الملاحة li.ui علامات التبويب النشطة {هامش قمة: -1px؛ الحشو أعلى: 1PX؛}
</ النمط>
</ رئيس>
<body>
<شعبة معرف = "علامات التبويب" الطبقة = "علامات التبويب من أسفل">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
<لي> <a href="#tabs-3"> Aenean خمل </A> </ لى>
</ UL>
<فئة الدرجة = "علامات التبويب-هل"> </ div>
<شعبة معرف = "علامات التبويب-1">
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
<شعبة معرف = "علامات التبويب-2">
<P> مرضي tincidunt، دوى الجلوس امات facilisis feugiat، أوديو metus حامل؛ حبلى ما كان عليه سابقا، UT pharetra ماسا metus معرف نونك. Duis scelerisque molestie turpis. سد fringilla، ماسا eget luctus malesuada، metus إيروس molestie LECTUS، التحرير تيمبوس إيروس ماسا التحرير دولور. Aenean aliquet fringilla ووزارة شؤون المرأة. Suspendisse الحوار الاقتصادي الاستراتيجي ligula في aliquam ligula suscipit. Praesent في إيروس دهليز ميل adipiscing adipiscing. مرضي facilisis. Curabitur ornare consequat نونك. Aenean فيل metus. أوت الاستفسار viverra ولا عقوبة. aliquam erat volutpat. pellentesque convallis. Maecenas feugiat، تيلوس pellentesque pretium الاستفسار، الهرية أبجد euismod الهرية، الاتحاد الأوروبي ليو ornare احترازيا فيل الهرية. Mauris consectetur tortor آخرون بوروس. </ P>
</ div>
<شعبة معرف = "علامات التبويب-3">
<P> Mauris eleifend بتوقيت شرق الولايات المتحدة وآخرون turpis. Duis معرف erat. potenti Suspendisse. Aliquam vulputate، والر فيل vehicula accumsan، ميل neque rutrum erat، الاتحاد الأوروبي congue أورسي أبجد eget أبجد. دهليز غير ما كان عليه سابقا. الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا ، في inceptos himenaeos. Fusce sodales. Quisque الاتحاد الأوروبي URNA فيل ENIM commodo pellentesque. Praesent الاتحاد الأوروبي RISUS hendrerit ligula تيمبوس pretium. Curabitur أبجد ENIM، pretium اللجنة الوطنية للانتخابات، feugiat اللجنة الوطنية للانتخابات، luctus لذلك، lacus. </ P>
<P> Duis CURSUS. Maecenas إيروس ligula، غير المصنفة في موضع blandit، pharetra في، سمبر في، ماجنا. Nullam ميلان lacus. facilisi لا عقوبة. Praesent viverra خوستو السيرة neque. Praesent blandit adipiscing velit. potenti Suspendisse. Donec ماتيس، والر فيل pharetra blandit، ماجنا ligula faucibus إيروس، معرف euismod lacus دولور eget أوديو. نام scelerisque. Donec غير يبيرو ااا ولا عقوبة ماتيس commodo. أوت sagittis. Donec احترازيا LECTUS، feugiat porttitor، tempor ميلان، tempor الذاتية، والر. Aenean vehicula velit الاتحاد الأوروبي تيلوس interdum rutrum. Maecenas commodo. Pellentesque غير المصنفة في موضع إيليت. Fusce في lacus. Vivamus ليبيرو السيرة LECTUS hendrerit hendrerit. </ P>
</ div>
</ div>
</ الجسم>
</ 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">
<script>
$ (وظيفة () {
$ ( "#tabs") .tabs () AddClass ( "واجهة المستخدم علامات التبويب-العمودية واجهة المستخدم المساعد-clearfix")؛
$ ( "#tabs لي") .removeClass ( "واجهة المستخدم الزاوية أعلى") ( "اليسار واجهة المستخدم الزاوية") .addClass.
})؛
</ script>
<نمط>
.ui علامات التبويب-عمودي {عرض: 55em؛}
.ui علامات التبويب-العمودية .ui علامات التبويب-الملاحة {الحشو: .2em .1em .2em .2em، تعويم: غادر؛ العرض: 12em؛}
.ui علامات التبويب-العمودية .ui علامات التبويب-الملاحة لى {اضحة: غادر؛ عرض: 100٪؛ العرض الحدود القول: 1PX الهامة؛ الحدود اليمين العرض:! 0 الهامة؛ الهامش:! 0 -1px .2em 0؛
.ui علامات التبويب-العمودي .ui علامات التبويب-الملاحة لى {عرض: كتلة؛}
.ui علامات التبويب-العمودية .ui علامات التبويب-الملاحة li.ui علامات التبويب النشطة {الحشو القاع: 0؛ الحشو اليمين: .1em؛ الحدود اليمين العرض: 1PX؛ الحدود اليمين العرض: 1PX؛}
.ui علامات التبويب-العمودية .ui علامات التبويب لوحة {الحشو: 1em، تعويم: الصحيح، العرض: 40em؛}
</ النمط>
</ رئيس>
<body>
<شعبة معرف = "علامات">
<UL>
<لي> <a href="#tabs-1"> نونك tincidunt </A> </ لى>
<لي> <a href="#tabs-2"> Proin دولور </A> </ لى>
<لي> <a href="#tabs-3"> Aenean خمل </A> </ لى>
</ UL>
<شعبة معرف = "علامات التبويب-1">
<H2> المحتوى عنوان 1 </ H2>
<P> Proin إيليت arcu، rutrum commodo، vehicula تيمبوس، commodo لذلك، تكشيرة. Curabitur غير المصنفة في موضع arcu. Donec sollicitudin ميل الجلوس امات mauris. نام elementum quam ullamcorper ما كان عليه سابقا. Etiam aliquet ماسا وآخرون أبجد. Mauris dapibus lacus auctor RISUS. Aenean tempor ullamcorper ليو. Vivamus ااا ماجنا quis ligula eleifend adipiscing. Duis أورسي. السيرة aliquam sodales tortor هوز. ولا عقوبة aliquam. Duis aliquam molestie erat. أوت آخرون mauris فيل الر فريوس sollicitudin. الحوار الاقتصادي الاستراتيجي التحرير دولور غير المصنفة في موضع أورسي tincidunt interdum. هوز Phasellus. نونك tristique تيمبوس LECTUS . </ P>
</ div>
<شعبة معرف = "علامات التبويب-2">
<H2> عنوان المحتوى 2 </ H2>
<P> مرضي tincidunt، دوى الجلوس امات facilisis feugiat، أوديو metus حامل؛ حبلى ما كان عليه سابقا، UT pharetra ماسا metus معرف نونك. Duis scelerisque molestie turpis. سد fringilla، ماسا eget luctus malesuada، metus إيروس molestie LECTUS، التحرير تيمبوس إيروس ماسا التحرير دولور. Aenean aliquet fringilla ووزارة شؤون المرأة. Suspendisse الحوار الاقتصادي الاستراتيجي ligula في aliquam ligula suscipit. Praesent في إيروس دهليز ميل adipiscing adipiscing. مرضي facilisis. Curabitur ornare consequat نونك. Aenean فيل metus. أوت الاستفسار viverra ولا عقوبة. aliquam erat volutpat. pellentesque convallis. Maecenas feugiat، تيلوس pellentesque pretium الاستفسار، الهرية أبجد euismod الهرية، الاتحاد الأوروبي ليو ornare احترازيا فيل الهرية. Mauris consectetur tortor آخرون بوروس. </ P>
</ div>
<شعبة معرف = "علامات التبويب-3">
<H2> المحتوى عنوان 3 </ H2>
<P> Mauris eleifend بتوقيت شرق الولايات المتحدة وآخرون turpis. Duis معرف erat. potenti Suspendisse. Aliquam vulputate، والر فيل vehicula accumsan، ميل neque rutrum erat، الاتحاد الأوروبي congue أورسي أبجد eget أبجد. دهليز غير ما كان عليه سابقا. الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا ، في inceptos himenaeos. Fusce sodales. Quisque الاتحاد الأوروبي URNA فيل ENIM commodo pellentesque. Praesent الاتحاد الأوروبي RISUS hendrerit ligula تيمبوس pretium. Curabitur أبجد ENIM، pretium اللجنة الوطنية للانتخابات، feugiat اللجنة الوطنية للانتخابات، luctus لذلك، lacus. </ P>
<P> Duis CURSUS. Maecenas إيروس ligula، غير المصنفة في موضع blandit، pharetra في، سمبر في، ماجنا. Nullam ميلان lacus. facilisi لا عقوبة. Praesent viverra خوستو السيرة neque. Praesent blandit adipiscing velit. potenti Suspendisse. Donec ماتيس، والر فيل pharetra blandit، ماجنا ligula faucibus إيروس، معرف euismod lacus دولور eget أوديو. نام scelerisque. Donec غير يبيرو ااا ولا عقوبة ماتيس commodo. أوت sagittis. Donec احترازيا LECTUS، feugiat porttitor، tempor ميلان، tempor الذاتية، والر. Aenean vehicula velit الاتحاد الأوروبي تيلوس interdum rutrum. Maecenas commodo. Pellentesque غير المصنفة في موضع إيليت. Fusce في lacus. Vivamus ليبيرو السيرة LECTUS hendrerit hendrerit. </ P>
</ div>
</ div>
</ الجسم>
</ HTML>