النهاردة هنتعلم ازاى نعمل مستعرض محتوى راسى او مايسمى باللغة الانجليزية
custom content slider
هام جدا : يرجى التصويت على الدرس و ذلك لتقييمه و لآبداء اى ملاحظات و لا تردد فى تقسسم اسلوب الشرح و اى اخطاء فهى منى و من الشيطان و ما توفيقى الا بالله
لا تتردد فى ابداء رايك لمراعاة متطلبات الاعضاء فى الدروس القادمة
كما ذكرنا سابق فان معظم تلك التطبيقات صغيرة و سهلة الى حد كبيرو بالتالى سوف نكتفى بوضع كل الاكواد داخل ملف واحد .
و ننصح دائما عند بناء المواقع بكتابة الاكواد فى ملفات منفصلة على سبيل المثال ملف css يحتوى كل تنسيق الموقع و ملفات javascript يحتوى على اكواد الجافا و هكذا .
لمشاهدة مثال على الدرس
( رابط ) اهداء من الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت
( رابط ) http://demo.dapwa.com/custom_content...ent_slider.htm تتلخص فكرة عمل اى مستعرض محتوى او مستعرض صور فى عمل قوائم غير مرتبة بلغة html و الوسم الخاص بها هو <ul> و من ثم التلاعب بها باستخدام لغة css العملاقة فمثلا تتحكم فى ظهور احد عناصر القائمة الغير مرتبة و اخفاء الاخر و هكذا . شرح الدرس :
سوف نستخدم المكتبة ( رابط ) scrollTo plugin website للتحكم الرأسى فى عناصر المستعرض . قم بزيارة موقعها للاطلاع على المزيد من التفاصيل .
اولا سوف نبدأ بكتابة ملف html كالعادة لانه دائما الخطوة الأولى فى اى مشروع
افتح ملف html جديد و اكتب بداخلة الكود التالى :
كود HTML:
<div id="hero-slider">
<ul>
<li><a href="#" rel="#panel-1">Item 1</a></li>
<li><a href="#" rel="#panel-2">Item 2</a></li>
<li><a href="#" rel="#panel-3">Item 3</a></li>
</ul>
<div>
<div>
<div id="panel-1">
<h2>المحتوى 1</h2>
<p>الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت .احد اكبر المواقع العربية المتخصصة فى تقديم دروس لتعليم لغات برمجة مواقع الانترنت مجانا و باللغة العربية </p>
</div>
<div id="panel-2">
<h2>المحتوى 2</h2>
<p>الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت .احد اكبر المواقع العربية المتخصصة فى تقديم دروس لتعليم لغات برمجة مواقع الانترنت مجانا و باللغة العربية </p>
</div>
<div id="panel-3">
<h2>المحتوى3</h2>
<p>الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت .احد اكبر المواقع العربية المتخصصة فى تقديم دروس لتعليم لغات برمجة مواقع الانترنت مجانا و باللغة العربية </p>
</div>
</div>
</div> <!-- .mask -->
<div></div>
</div> <!-- #hero-slider -->
نلاحظ من الكود السابق انه يتكون من :
ul list : قائمة غير مرتبة و هنا ستكون تلك القائمة هى الازرار التى من خلالها نتحكم فى مستعرض المحتوى كما سنشاهد بعد قليل .
بامكانك زيادة عناصر تلك القائمة كما تشاء و القيام بتنسيقها بالطريقة المناسبة لموقعك .
slider : و هذا هو الجزء الذى سنضع داخلة كل المحتوى الذى نريد استعراضة داخل مستعرض المحتوى .
و نلاحظ فى الكود السابق اننا وضعنا ثلاثة طبقات لكل منها id مخصص لها و هم كالتالى
panel-1 و panel-2 و panel-3 و قمنا باخفاءها باستخدام الخاصية overflow hidden فى كود التنسيق css بحيث لا تظهر اى طبقة منهم الا عند الضغط على الزر المخصص لها من القائمة الغير مرتبة . و الآن نكتب كود التنسيق css :
قم بكتابة الكود التالى داخل وسم <head> بالصفحة او قم بكتابتة فى ملف css منفصل و اربطة بالصفحة .
كود HTML:
#hero-slider {
background-color:#FFF;
border:1px solid #09F;
width:450px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0 auto;
font-family:Tahoma, Geneva, sans-serif;
color: #09F;
}
#hero-slider .mask {
float:left;
width:300px;
height:280px;
overflow:hidden;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
direction: rtl;
}
#hero-slider .panel {
width:300px;
height:280px;
text-align:right;
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
}
#hero-slider ul {
margin:0;
list-style:none;
float:right;
border-right:1px solid #dedede;
height:285px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
}
#hero-slider ul li {
margin:10px 0;
}
#hero-slider ul a {
outline:none;
text-decoration: underline;
display:block;
width:75px;
height:74px;
text-indent:-999em;
}
#hero-slider a {
background: url(button.png) no-repeat 0 0;
}
#hero-slider ul a.active {
background-position: -75px 0px;
}
.panel h2 {
padding:15px 0 0 0;
color:#39F;
}
.panel p {
color:#999;
}
.clear {clear:both}
و الآن مع كود الجافا سكريبت السهل و البسيط لاتمام المستعرض
اكتب الكود التالى داخل وسم <head> فى الصفحة او اكتبه فى ملف منفصل و اربطه بالصفحة .
كود HTML:
$(document).ready(function () {
$('#hero-slider ul a').click(function () {
//استعادة كافة العناصر
$('#hero-slider ul a').removeClass('active');
//تنشيط العنصر الحالى
$(this).addClass('active');
//تحريك العنصر لمكانه الصحيح
$('.mask').scrollTo($(this).attr('rel'), 300);
//تعطيل الضغطات
return false;
});
});
تم انتهاء الدرس و اليكم مراجعة سريعة عن الدرس
1- قم بتحميل مكتبة ( رابط ) jquery من موقعها الرسمى و اربطها بالصفحة .
2- قم بتحميل المكتبة ( رابط ) scrollTo plugin website و اربطها بالصفحة .
3- قمنا بعمل قوائم غير مرتبة لتكون بمثابة لوحة تحكم للمستعرض .
4 - قمنا بعمل ثلاثة طبقات و هى التى نقوم بوضع المحتوى بداخلها .
و يصبح الكود بالكامل كالتالى :
كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Create a Custom Content Slider with jQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#hero-slider ul a').click(function () {
//استعادة كافة العناصر
$('#hero-slider ul a').removeClass('active');
//تنشيط العنصر الحالى
$(this).addClass('active');
//تحريك العنصر لمكانه الصحيح
$('.mask').scrollTo($(this).attr('rel'), 300);
//تعطيل الضغطات
return false;
});
});
</script>
<style type="text/css">
#hero-slider {
background-color:#FFF;
border:1px solid #09F;
width:450px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0 auto;
font-family:Tahoma, Geneva, sans-serif;
color: #09F;
}
#hero-slider .mask {
float:left;
width:300px;
height:280px;
overflow:hidden;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
direction: rtl;
}
#hero-slider .panel {
width:300px;
height:280px;
text-align:right;
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
}
#hero-slider ul {
margin:0;
list-style:none;
float:right;
border-right:1px solid #dedede;
height:285px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
}
#hero-slider ul li {
margin:10px 0;
}
#hero-slider ul a {
outline:none;
text-decoration: underline;
display:block;
width:75px;
height:74px;
text-indent:-999em;
}
#hero-slider a {
background: url(button.png) no-repeat 0 0;
}
#hero-slider ul a.active {
background-position: -75px 0px;
}
.panel h2 {
padding:15px 0 0 0;
color:#39F;
}
.panel p {
color:#999;
}
.clear {clear:both}
</style>
</head>
<body>
<div id="hero-slider">
<ul>
<li><a href="#" rel="#panel-1">Item 1</a></li>
<li><a href="#" rel="#panel-2">Item 2</a></li>
<li><a href="#" rel="#panel-3">Item 3</a></li>
</ul>
<div>
<div>
<div id="panel-1">
<h2>المحتوى 1</h2>
<p>الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت .احد اكبر المواقع العربية المتخصصة فى تقديم دروس لتعليم لغات برمجة مواقع الانترنت مجانا و باللغة العربية </p>
</div>
<div id="panel-2">
<h2>المحتوى 2</h2>
<p>الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت .احد اكبر المواقع العربية المتخصصة فى تقديم دروس لتعليم لغات برمجة مواقع الانترنت مجانا و باللغة العربية </p>
</div>
<div id="panel-3">
<h2>المحتوى3</h2>
<p>الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت .احد اكبر المواقع العربية المتخصصة فى تقديم دروس لتعليم لغات برمجة مواقع الانترنت مجانا و باللغة العربية </p>
</div>
</div>
</div> <!-- .mask -->
<div></div>
</div> <!-- #hero-slider -->
</body>
</html>
تمنياتى بالتوفيق