النهاردة هنتعلم ازاى نعمل مستعرض محتوى راسى او مايسمى باللغة الانجليزية
custom content slider
هام جدا : يرجى التصويت على الدرس و ذلك لتقييمه و لآبداء اى ملاحظات و لا تردد فى تقسسم اسلوب الشرح و اى اخطاء فهى منى و من الشيطان و ما توفيقى الا بالله
لا تتردد فى ابداء رايك لمراعاة متطلبات الاعضاء فى الدروس القادمة
كما ذكرنا سابق فان معظم تلك التطبيقات صغيرة و سهلة الى حد كبيرو بالتالى سوف نكتفى بوضع كل الاكواد داخل ملف واحد .
و ننصح دائما عند بناء المواقع بكتابة الاكواد فى ملفات منفصلة على سبيل المثال ملف css يحتوى كل تنسيق الموقع و ملفات javascript يحتوى على اكواد الجافا و هكذا .
لمشاهدة مثال على الدرس
( رابط ) اهداء من الأكاديمية العربية للتصميم و برمجة تطبيقات الانترنت
( رابط ) http://demo.dapwa.com/custom_content...ent_slider.htm تتلخص فكرة عمل اى مستعرض محتوى او مستعرض صور فى عمل قوائم غير مرتبة بلغة html و الوسم الخاص بها هو <ul> و من ثم التلاعب بها باستخدام لغة css العملاقة فمثلا تتحكم فى ظهور احد عناصر القائمة الغير مرتبة و اخفاء الاخر و هكذا .شرح الدرس :اولا سوف نبدأ بكتابة ملف html كالعادة لانه دائما الخطوة الأولى فى اى مشروع
سوف نستخدم المكتبة ( رابط ) scrollTo plugin website للتحكم الرأسى فى عناصر المستعرض . قم بزيارة موقعها للاطلاع على المزيد من التفاصيل .
افتح ملف 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>
تمنياتى بالتوفيق
رد مع اقتباس
