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

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

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

اضغط على الصورة لمشاهدة المثال كاملاً

بسم الله نبدأ، طبعاً نحن الآن عرفنا أساسيات التعامل مع مكتبة jQuery Tools فلن أعيدها مره ثالثة لكن سيتم شرح الخطوات ويمكنك الاستعانة بملف المثال في آخر الموضوع، الآن سنتعلم طريقة تفعيل إمكانية تغيير اللسان عند مرور الفأرة على اللسان فنحن نعلم أن الكود التالي يقوم بتفعيل عملية اللسان على مجموعة من الألسنة باستخدام المكتبة:

[javascript]$(function() {<br />
$("ul.tabs").tabs("div.panes > div");<br />
});[/javascript]

ولجعل التأثير كما تطرقنا من خلال مرور الفأرة نضيف الخاصية بالحدث التالي:

[javascript]$(function() {<br />
$("ul.tabs").tabs("div.panes div",{event:’mouseover’});<br />
});[/javascript]

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

[javascript]$(function() {<br />
$("ul.tabs").tabs("div.panes > div",{event:’mouseover’,effect:’fade’});<br />
});[/javascript]

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

[javascript]$.tools.tabs.addEffect("effect1", function(tabIndex, done) {</p>
<p> this.getPanes().fadeOut(); // عند إخفاء محتوى اللسان الموجود حالياً<br />
this.getPanes().eq(tabIndex).fadeIn(); // عند ظهور محتوى اللسان الجديد<br />
done.call(); // أمر إنهاء التأثير الحالي</p>
<p>});[/javascript]

قمت بإضافة التأثيرات الخاصة بعرض وإخفاء المحتوى بالتدريج وذلك للإيضاح وأعطيتها الاسم effect1 ويمكنك إعطائها أي اسم تريده، حيث الآن يمكننا التعديل عليها بتحريرها بعمل أي تأثير حركي داخل هذه الدالة، فمثلاً أنا أود أن أضيف تأثير التحريك الجانبي بحيث يظهر المحتوى من الجنب ويختفي من الجنب بالتحريك, العملية صعبة سهلة وهي تكمن كذلك في الـ CSS وتأثيرات الـ jQuery فبالنسبة للجافا سكريبت فأضفت الكود التالي الذي يمنحني تحرك جانبي حتى عرض الصندوق وهو 375 بكسل مع وبالنسبة لـ 500 و 900 هما أرقام الوقت المحدد للتحريك:

[javascript]$.tools.tabs.addEffect("effect1", function(tabIndex, done) {<br />
this.getPanes().animate({<br />
right: "375px"<br />
}, 500 );<br />
this.getPanes().eq(tabIndex).show();</p>
<p> this.getPanes().eq(tabIndex).animate({<br />
opacity: 1.0<br />
}, 900 );</p>
<p> this.getPanes().eq(tabIndex).animate({<br />
right: "0px"<br />
}, 900 );</p>
<p> done.call();</p>
<p>});[/javascript]

بعد ما انتهينا من التأثير الذي نريد عمله أو إنشاءه حسب ما نريد, الآن نستدعي التأثير المسمى بـ effect1 أو الاسم الذي قمت بتحديده:

[javascript]$(function() {<br />
$("ul.tabs").tabs("div.panes > div",{event:’mouseover’,effect:’effect1′});<br />
});[/javascript]

العناصر الخاصة بالـ HTML لم أغير فيها شيء كما في السابق، فقط أضفت div جديدة باسم bg لأجعل لها خلفية.

[html] <div class="bg">
<ul class="tabs">
<li><a href="#1">لسان 1</a></li>
<li><a href="#2">لسان 2</a></li>
<li><a href="#3">لسان 3</a></li>
</ul>
<div class="panes">
<div>محتوى اللسان 1</div>
<div>محتوى اللسان 2</div>
<div>محتوى اللسان 3</div>
</div>
</div>
<p>[/html]

والآن سننتقل إلى باقي العمل والأخير وهو عملية تصميم العناصر لتظهر بشكل جميل من خلال الـ CSS

نعطي الـ bg خلفية وحجم مناسب حسب ما نراه وما تم التصميم عليه:

[css].bg {<br />
background:url(jquerytools-tabs3/bg.jpg);<br />
width:606px;<br />
height:276px;<br />
}[/css]

الآن الألسنة نجعلها جانبية بالطريقة التالية:

[css]/* هذا صندوق الألسنة قمنا بجعله فلوت يمين بعرض محدد ليكون على اليمين */<br />
.tabs {<br />
margin:0px;<br />
padding:0px;<br />
list-style:none;<br />
float:right;<br />
width:195px;<br />
height:220px;<br />
margin-right:1px;<br />
margin-top:28px;<br />
}</p>
<p>/* جعل قائمة اللسان بخلفية افتراضية وبنفس ارتفاع وعرض الصورة */<br />
.tabs li {<br />
width:192px;<br />
height:72px;<br />
line-height:72px;<br />
margin-bottom:1px;<br />
background:url(jquerytools-tabs3/b1.gif) no-repeat left;<br />
font-family:Tahoma;<br />
font-size:9pt;<br />
}</p>
<p>/* جعل رابط اللسان بلوك لكي يمكننا تحديد عرض وارتفاع خاص له */<br />
.tabs li a {<br />
display:block;<br />
height:72px;<br />
padding-right:20px;<br />
text-decoration:none;<br />
color:#fff;<br />
}</p>
<p>/* عند مرور الفأرة على اللسان يتم تغيير خلفية اللسان إلى الصورة المطروح عنوانها */<br />
.current {<br />
background:url(jquerytools-tabs3/b2.gif) no-repeat left;<br />
}[/css]

ثم نقوم بتنسيق شكل (محتوى الألسنة) وجعلها في الجانب الأيسر من أزرار الألسنة:

[css]/* جعلنا المحتوى أبسلوت ليكون متحرك دون أن يأثر بأي عنصر آخر ولنقوم بتحريكه من خلال التوب والرايت والباقي واضح */<br />
.panes div {<br />
display:none;<br />
position:absolute;<br />
top:0px;<br />
right:0px;<br />
width:320px;<br />
height:201px;<br />
background:url(jquerytools-tabs3/bg1.gif);<br />
color:#fff;<br />
font-family:Tahoma;<br />
font-size:9pt;<br />
padding-top:15px;<br />
padding-right:15px;<br />
}</p>
<p>/* جعلنا صندوق المحتوى اوفرفلو هايدن لكي أي عنصر في داخله يخرج من حدود العرض والارتفاع يكون مخفي غير ظاهر وبذلك نقوم بتحريك المحتوى الداخلي ويختفي ولا يكون خارج الإطار ظاهر*/<br />
.panes {<br />
position:relative;<br />
overflow: hidden;<br />
width:375px;<br />
height:216px;<br />
float:left;<br />
margin-top:30px;<br />
}[/css]

فقط لا غير, أرجو أن يكون الدرس واضح وإذا كان هناك أي استفسارات أرحب بها.

مشاهدة | تحميل

وشكراً لكم

→ مكتبة jQuery Tools، المكتبة المفقودة للويب – 1 Tabs | قريباً ←