جافا سكريبت: كيفية إنشاء قائمة تبويب الركن مدورة؟

Question

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

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

لكنها ليست مثالية. هل تعرف أي روابط مفيدة / برامج تعليمية حول علامة التبويب ركن مدور؟

شكرا مقدما :)

هتاف، مارك

Answer 1

ستكون الزوايا الأفضل المظهر دائما أولئك الذين تم إجراؤهم باستخدام صورة. أي شيء آخر هو أفضل محاولة للمتصفح، والتي قد لا تكون ما تريد. من الأسهل بكثير أيضا استخدام الصور.

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

Answer 2

لم تدعمها بعد جميع المتصفحات، ولكن يمكنك استخدام CSS3 لعرض الزوايا المستديرة بسهولة دون الحاجة إلى الصور أو جافا سكريبت:

<div style="-moz-border-radius: 5px; -webkit-border-radius: 5px;">
    Rounded corners!
</div>

مزيد من المعلومات: http://www.css3.info/preview/rounded-burder.

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

Answer 3

لماذا لا تستخدم jquery ui؟ لديهم علامات تبويب مدورة لطيفة. يرى http://jqueryui.com/themeroller/#themegallery.