نظام التبويبات أو الـ Tabs ، هو نظام بسيط وجميل لتقسيم البيانات الموجودة بالصفحة ..
الفكرة الأساسية
الفكرة الأساسية لهذا النظام هي تحميل جميع بيانات الصفحة في وقت واحد ، ومن ثم يتم تقسيمها الى اقسام معينه ، يتم عرض القسم المحدد ويتم اخفاء باقي الأقسام ..
تطبيق عملي
الوسيلة الأنسب لتطبيق الفكرة السابقة هي باستخدام الـ css ..
انظر الكود التالي :
كود PHP:
<div style="display: none;"></div>
الان من خلال الخاصية display التي قيمتها none قمنا باخفاء الـ div ..
ماذا لو اردنا عرضه ؟
ببساطة نزيل none
كود PHP:
<div style="display: ;"></div>
او نزيل الـ style باكمله !!
الان لو فرضنا ان لدينا محتويات كالتالي :
كود PHP:
<div id="a">this is the home page..</div>
<div id="b" style="display: none;">this is the about us page..</div>
<div id="c" style="display: none;">this is the contact us page..</div>
* لاحظ ان لكل div يوجد id خاص به ..
* لاحظ ايضا الـ div الثاني والثالث خاصية الـ dispaly لهم هي none اي انهم في وضع مخفي
الان لو اردنا تطبيق نظام الـ Tabs عليهم ، فاننا سنحتاج الى تغيير خاصية الـ display الخاصة بهم ..
سنستخدم الـ javascript الرائعة ..
انظر الكود التالي :
كود PHP:
function show(a,b,c) {
a.style.display = '';
b.style.display = 'none';
c.style.display = 'none';
}
في تصوري ان الفكرة اصبحت واضحة الان ..
الدالة show تستقبل المتغيرات a, b, c التي هي عبارة عن id الـ divs الموجودة لدينا ..
تقوم الدالة بعرض العنصر الاول الممرر لها وتخفي الباقي عن طريق الخاصية dispaly ..
لوقمنا باستخدام الدالة بهذه الطريقة
سيتم عرض المحتوي الاول a ويتم اخفاء المحتويين b و c
سيتم عرض المحتوي b ويتم اخفاء a و c
عرض c واخفاء a و b
الفكرة واضحة تماما الان .. اليس كذلك ..
حسناً .. لكي نقوم بالتبديل يجب ان يتم الضغط على رابط المحتوى المطلوب .. اليس كذلك ؟
كود PHP:
<a href="javascript:show(a,b,c)">home page</a>
ستصبح الطريقة كاملة كالتالي :
كود PHP:
<script language="javascript">
function show(a,b,c) {
a.style.display = '';
b.style.display = 'none';
c.style.display = 'none';
}
</script>
<div><a href="javascript:show(a,b,c)">home page</a> | <a href="javascript:show(b,c,a)">about us</a> | <a href="javascript:show(c,a,b)">contact us</a></div>
<div id="a">this is the home page..</div>
<div id="b" style="display: none;">this is the about us page..</div>
<div id="c" style="display: none;">this is the contact us page..</div>
قليل من التعديل و الـ css وينتج ..
كود PHP:
<style type="text/css">
a {
color: blue;
text-decoration: none;
}
a:hover {
color : red;
text-decoration: underline;
}
div {
font-family: verdana;
}
</style>
<script language="javascript">
function show(a,b,c) {
a.style.display = '';
b.style.display = 'none';
c.style.display = 'none';
}
</script>
<div><a href="javascript:show(a,b,c)">home page</a> | <a href="javascript:show(b,c,a)">about us</a> | <a href="javascript:show(c,a,b)">contact us</a></div>
<div id="a">this is the home page..</div>
<div id="b" style="display: none;">this is the about us page..</div>
<div id="c" style="display: none;">this is the contact us page..</div>
الان اصبح لدينا نظام Tabs بسيط ..
الـ Tabs و الـ Ajax
هذا النظام اكثر تعقيداً من النظام البسيط السابق ..
الفرق الجذري بين النظامين هو ان النظام الاول يقوم بتحميل جميع المحتويات سابقاً ( مع بداية تحميل الصفحة ) ، بينما النظام الثاني .. يقوم بتحميل المحتويات عند الضغط على التبويب المحدد ..
لن اتطرق هذا النظام لعدة اسباب :
- لست خبيراً بالـ Ajax
- ارى ان البساطة افضل من التعقيد ( مع انه لا يوجد اي تعقيد في الـ Ajax )
- اعتقد انه من الافضل ان يتم تحميل كافة المحتويات مسبقاً ، الا في بعض الصفحات التي تحتاج الى تحديث مستمر
الـ Ajax جميله لها ايجابيات كثيرة ، لكن لها سلبيات ايضاً ..
http://www.swalif.net/softs/swalif54/softs137620/
نظرة خاطفة على تقنية AJAX
انا لست ضد هذه التقنية بالطبع ، بل معها ..
عموماً هي تقنية من التقنيات .. لها ايجابيات وسلبيات ، قد تغلب ايجابياتها سلبياتها ..
أخيراً
اود ان ارى بعض التطبيقات منكم على هذا النظام ولكن بتصميم اجمل مما قمت بعمله اذا كان يعد تصميما !! ، فانا لست بمصمم اصلاً !!
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Remano 
