البرمجةالدروس

مكتبة jQuery Tools، المكتبة المفقودة للويب – 1 Tabs

سلسلة دروس مكتبة jQuery Tools، المكتبة المفقودة للويب

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

يمكنك مشاهدة الكثير من الأمثلة في موقع المكتبة من هنا [أمثلة jQuery Tools] تتكون المكتبة من 6 أنواع من استخدامات واجهة المستخدم وهي:

  • Tabs الألسنة
  • Tooltibs صندوق التلميحات
  • Overlay النافذة المنبثقة
  • Expose التركيز على عنصر
  • Scrollable القائمة المتحركة
  • Flashembed تضمين الفلاش

لو تلاحظ هذه الأنواع لوجدت بأنها هي أهم الأنواع المميزة المطلوبة في تطوير المواقع مهما كان اختلاف شكلها وتأثيراتها فهي غالباُ لا تكون بعيده عن أي جزء من هذه الأنواع فهي فكرة ذكية لعمل هذه المكتبة المعتمدة على مكتبة jQuery الشهيرة ولكن وجدت بعض الأشياء المستخدمة كثيراً لم يتم إضافتها مثل القوائم التي هي أهم ما يبحث عنها المطور ويستخدمها صاحب الموقع فالزين ما يكمل لكن بإمكاننا استخدام هذه المكتبة لعدة أشياء كثيره كما ذكرت.

سنتطرق إلى كل واحدة بحدة بإذن الله تعالى فواصل معنا بعد الفاصل وسأسعد بانضمامكم معنا..

مقدمة

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

%MINIFYHTML02887f6e0969346c534df8e25ca4349013%

هذا الكود دائماً يضاف ما بين <head> و </head> وهكذا تكون انتهيت من تجهيزك لاستخدام المكتبة في الصفحة بكل بساطة

لكن قد تود بدل من استخدام المكتبة بالطريقة السابقة بحيث يتم استخدام رابط من موقع المكتبة فيمكنك تحميل المكتبة مفتوحة المصدر من خلال موقع المكتبة [تحميل jQuery Tools] واستبدال عنوان ملف المكتبة بالامتداد الذي تم وضعه فيه.

بعد ذلك ستصبح اكواد الصفحة الأساسية شبيهه بأكواد هذه الصفحة:





jQuery Tools Demo%MINIFYHTML02887f6e0969346c534df8e25ca4349014%

%MINIFYHTML02887f6e0969346c534df8e25ca4349015%

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

1/ Tabs الألسنة

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

لمشاهدة المثال اضغط هنا

tabcool

ولكن نحن سنتطرق إلى البداية والشكل الأبسط للعمل عليه ليكون متدرج التوسع فيه حسب ما تراه مناسب لك.

ما سنقوم نحن بعمله حالياً هو مثل هذه الصورة بأبسط ما يمكن لنتعلم الأساسيات.

اضغط هنا لمشاهدة المثال حياً

Aviary Picture 1

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

تصميم صفحات الويب تعتمد بشكل أساسي على لغتين وهما HTML و CSS فالـ HTML هو لتحديد العناصر والـ CSS هو لتحديد شكل العناصر بكل سهوله وهناك لغة الجافاسكريبت والتي تعتمد على البرمجة المنطقية لعمل أوامر منطقية لتغيير أي قيمة في الصفحة وعمل تأثير معين عليها.

سنبدأ في كتابة الـ HTML الذي يمثل عناصر الصفحة وطبعاً عناصر الصفحة التي تظهر في جسم الصفحة دائماً يتم إضافتها في داخل الوسم وسأقوم بإضافتها كالتالي:




محتوى اللسان 1
محتوى اللسان 2
محتوى اللسان 3

سهله جداً وبعدها نضيف كود الـ Javascript في الـ

$(function() {
    $("ul.tabs").tabs("div.panes > div");
});

كود بسيط جداً وطبعاً لا ننسى الكود الذي استدعيناه في مقدمة الموضوع لأنه هو المكتبة.

هكذا انتهينا من عمل الألسنة فقط لا غير! ولو تجربها ستظهر لك الآلية التي تقوم بها الألسنة وهي قوائم ولكل قائمة محتوى يتم إظهار ما يناسبه في كل مره تختار لسان وجرب بنفسك.

Aviary Picture 2

لكن لتجميل شكلها يجب علينا التعامل مع الـ CSS وهي المهمة الأصعب والأهم ولكنها سهلة وميسرة لمن لديه الخبرة في استخدامها والتعامل معها.

هناك في الكود الخاص بنا في الـ HTML أربع عناصر مهمه وهي

سس

    و

  • و و
    والتي بعضها تحتوي على أسماء خاصة مثل

      و

      مما يمكننا التأثير عليها فقط ويمكننا استدعاء العناصر الداخلية بها من خلال العنصر الأب باسمه كـ .tabs li a يجعلنا نستدعي الذي بداخل tabs فقط وليس غيره, وستتضح الصورة لك في التطبيق بإذن الله فسنبدأ كالتالي:

      طبعاً الـ CSS يتم كتابته داخل ملف منفصل او في داخل

      في داخل الوسم

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

      ul.tabs {
      	list-style:none; /* لإخفاء النقط */
      	margin:0;
      	padding:0;
      	border-bottom:1px solid #666666;
      	height:30px;
      }
      
      ul.tabs li {
      	float:right; /* لجعل الألسنة جانبية من اليمين */
      	text-indent:0;
      	padding:0;
      	margin:0;
      }
      
      ul.tabs a {
      	background: #e2e2e2;
      	display:block; /* لجعل الرابط يمكن تحديد عرضه وارتفاعه */
      	height: 29px; /* الارتفاع */
      	line-height:29px;
      	width: 134px; /* العرض */
      	text-align:center;
      	text-decoration:none;
      	color:#333;
      	padding:0px;
      	margin:0px;
      	margin-left:1px;
      	position:relative; /* لجعله بارز قليلاً فوق المحتوى */
      	top:1px; /* زيادة قيمة المساحة العلوية ليكون فوق المحتوى */
      }
      
      ul.tabs a:hover {
      	color:#fff; /* عند تحديد الفأرة على الرابط يتم تغيير لون خطه إلى أبيض */
      }
      
      ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
      	cursor:default !important; /* إزالة علامة المؤشر على الألسنة المحدد عليها */
      	color:#000 !important;
      	background: #ffffff;
      	border:1px solid #999;
      	border-bottom:none;
      }

      ثم بعدها سنقوم بتصميم صندوق المحتوى كالتالي:

      .panes div {
      	display:none;
      	padding:15px 10px;
      	border:1px solid #999;
      	border-top:0;
      	height:100px;
      	font-size:14px;
      	background-color:#fff;
      }

      نقطة أخيرة أود طرحها وهو عند الضغط على اللسان سيظهر لك نقط على مربع اللسان يبين لك إنك قمت بالضغط عليه وطبعاً في كثير من الأحيان تكون مزعجه لذلك يمكنك إزالتها بإضافة التالي:

      a:active {
        outline:none;
      }
      
      :focus {
        -moz-outline-style:none;
      }

      هكذا انتهينا من العمل البسيط الأساسي من الألسنة, يمكنك تحميل الجزء السابق من هنا للاستفادة منه.

      حسب قوتك في لغة التصميم CSS يمكنك الإبداع فيها فمثلاً يمكنك تصميم الألسنة عموديه بدلاً من أفقيه وبشكل جذاب, لذلك لن أتطرق إلى التصميم أكثر الآن بل سأتطرق إلى الطرق البرمجية الخاصة بالمكتبة مثل عمل تحريك معين عند اختيار لسان وظهور المحتوى الخاص به وذلك من خلال الكود البسيط الذي أضفناه في الوسم