مصمم - مدونة تصميم وتطوير المواقع العربية

اليوم سنستخدم مكتبة الجافا سكريبت الرائعة جي كويري لصنع قائمة إنزلاق بتأثير الأكورديون. سيكون تمرين جيد لمهاراتك في الهتمل والأنماط والجي كويري. من وجهة نظري، الطريقة الأمثل لتعلُّم تصميم الوِب الإحترافي هي عن طريق النظر إلى الأمثلة والتطبيق فوراً، بدلاً من الطريقة المنهجية التقليدية. فلنبدأ درس اليوم!

الفكرة

• قائمة إنزلاق كآلة الأكورديون مكونة من ثلاثة أقسام
• لكل قسم رابط
• عند الضغط على أحد الروابط، ينزلق القسمين الآخرين لعرض القسم المطلوب

الملفات

• المستند الرئيسي: index.html
• ملف الأنماط: style.css
• ملف الجي كويري: jquery.js
• ملف الجافا سكريبت الأساسي: accordion.js

التوصيف

داخل وسم الـhead سنشير إلى الملفات المستخدمة.

توصيف المستند داخل وسم الـbody كالآتي.

صفحة ١



محتوى




صفحة ٢



محتوى




صفحة ٣



محتوى

الأنماط

* {margin:0;padding:0}

.title {
	width:59px;
	height:340px;
	background:#CCCCCC;
	float:right;
	border-right:1px dashed #aaa;
}

.content {
	width:690px;
	height:370px;
	float:right;
	padding:15px;
	background:#eee;
}

#container {
	width:840px;
	height:340px;
	margin:auto;
	top:180px;
	position:relative;
	overflow:hidden;
	border:1px solid #aaa;
}

#section1 {
	width:780px;
	height:340px;
	position:relative;
	z-index:1;
}

#section2 {
	width:780px;
	height:340px;
	position:absolute;
	background:white;
	top:0;
	right:720px;
	display:inline;
	z-index:2;
}

#section3 {
	width:780px;
	height:340px;
	position:absolute;
	top:0;
	right:780px;
	z-index:3;
	background:white;
}

جي كويري

باستعمال خاصية animate سننتج الحركة المطلوبة

$(function() {
	$('a.link1').click(function() {
		$('#section2').stop().animate({
			right: "720px",
		}, 400);
		$('#section3').stop().animate({
			right: "780px",
		}, 400);
	return false
	});

	$('a.link2').click(function() {
		$('#section2').stop().animate({
			right: "60px",
		}, 400);
		$('#section3').stop().animate({
			right: "780px",
		}, 400);
	return false
	});

	$('a.link3').click(function() {
		$('#section2').stop().animate({
			right: "60px",
		}, 400);
		$('#section3').stop().animate({
			right: "120px",
		}, 400);
	return false
	});

});

كما ترون، الموضوع في غاية البساطة ولا يحتاج إلى معرفة تامة بالجافا سكريبت. كل الفضل للجي كويري، فقد سهلت علينا الكثير!

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