هل هناك علامة التبويب مسج التحكم الذي يتعامل مع خطوط متعددة من علامات التبويب ؟

Question

لدي تطبيق ويب مع ديناميكية عدد من علامات التبويب التي تتراوح بين 2 إلى 20.

أنا حاليا باستخدام واجهة المستخدم مسج التبويب المساعد, ولكن وجدت أن هذا السلوك هو أقل من مثالية (أيحوالي 12 علامات التبويب ، عندما يلف السطر الثاني من علامات التحرك مع علامة اختيار في بعض الأحيان القفز عبر 3 خطوط بدلا من اثنين.

هذا هو شقين السؤال أولا هل لدى أحدكم أي فكرة كيف يمكن أن تتوقف الصف الثاني من علامات القفز حولها عند اختيار التغييرات.

بدلا من ذلك لا أحد يعرف من علامة التبويب البرنامج المساعد مسج الذي يتعامل مع خطوط متعددة من علامات حسن (إذا كنت لا يمكن العثور على أي قرار قد ينتهي باستخدام ExtJS أو شيئا من هذا القبيل, ولكن في محاولة للحفاظ على هذا التطبيق خفيفة إلى حد ما-الوزن).

الجواب

بعد التحقيق اتضح أن هذا كان بسبب مسج UI موضوع كنت تستخدم هذا كان مشكلة النمط:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {  padding-bottom: .1em; border-bottom: 0; }

أنا فقط إزالة padding-bottom:.1em و حل المشكلة (على فكرة كان ذلك الصف الثاني من عناصر تتحرك جنبا إلى جنب مع اختيار تغيير).

Answer 1

كنت لا حقا بحاجة الى التمديد في كل شيء.مجرد استخدام العائمة لى مع unstyled UL.لى إنه يجب التفاف بشكل صحيح.عادة ما تكون فكرة جيدة للتأكد من الكلمات في نفس التبويب لا التفاف عن طريق استبدال "" مع " ".

بلدي علامة التبويب مخصص التحكم بنيت بشكل حيوي مع ASP.Net ولكن الجدولة و إخفاء/عرض وظائف كل مسج.

<div id="tabWrapper">
    <ul id="tabContainer">
        <li>Tab&nbsp;1</li>
        <li>Tab&nbsp;2</li>
        <li>Tab&nbsp;3</li>
     </ul>
</div>

الأساسية CSS

#tabWrapper
{
    border-bottom: solid 1px #676767;
}

#tabContainer 
{
    padding:0;
margin:0;
    position:relative;
    z-index: 1;
    float:left;
    list-style:none;
}

#tabContainer li 
{
    float:left;
    margin:0;
    cursor: pointer;
    background: f1f1f1;
    border-top: solid 1px #676767;
    border-left: solid 1px #676767;
    border-right: solid 1px #ababab;
    margin-bottom: -1px;
}

#tabContainer .selected, #tabContainer .selected:hover
{
    background: #fff;
}

Answer 2

لا حل تقني, ولكن نأخذ في الاعتبار أن نيلسن توصي بشدة ضد صفوف متعددة من علامات التبويب:

هناك صف واحد فقط من علامات التبويب.متعددة الصفوف إنشاء القفز عناصر واجهة المستخدم ، تدمير الذاكرة المكانية وبالتالي جعل فإنه من المستحيل بالنسبة للمستخدمين تذكر علامات التبويب التي قاموا بزيارتها بالفعل.أيضا بالطبع صفوف متعددة هي متأكد من أحد أعراض المشاكل التعقيد المفرط:إذا كنت بحاجة إلى المزيد من علامات التبويب من تناسب في صف واحد ، تحتاج إلى تبسيط التصميم الخاص بك.

-- علامات التبويب استخدام الحق:13 لإرشادات الاستخدام

Answer 3

هذه المشكلة وصفت في تقرير الشوائب على واجهة المستخدم مسج تعقب المسألة.على أن علة التقرير ، لم تعلق التصحيح الذي يحل هذه المشكلة في حين الحفاظ على على .ui-علامات التبويب-nav الحدود أدناه غير اختيار علامات التبويب.الهتافات.

Answer 4

لم أكن أحب الطريقة علامات المقدمة عند كسر الخط الثاني وهكذا كتبت المساعد لتقديم "شاهد" علامة التبويب بدلا من كسر إلى السطر الثاني.

https://github.com/jasonday/plusTabs

Answer 5

لقد وجدت أن من المفيد بالنسبة للفرز علامات على خطوط متعددة.واحدة من القضايا كان ذلك علامات لم تكن في مكانها بشكل صحيح إلا إذا axis: 'x' كان المحددة ، ولكن بدا هذا القبيح عندما سحب بين السطور.

تمكنت من تحسين هذا بما يلي:

$('#tab-container')
    .sortable({
        delay       : 200,
        distance    : 20,
        axis        : 'x'
    })
    .on('sort sortchange', function() {
        $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px');
    });

Answer 6

هناك الكثير من الإجابات التي يمكن استخدامها لحل المشكلة بشكل كامل ولكن هنا هو بلدي ¢2.

إلى حد كبير في تبسيط المسائل ، يمكنك فقط إضافة <hr> نصب كما كنت ترغب في فصل الصفوف من علامات التبويب.في رأيي هذا أيضا تبدو أجمل من وجود فتح الصفوف.