أروع قائمة متحركة بالصور تعمل بمكتبةmootools

alaa · #1 05-06-2010, 10:20 PM

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

شاهد مثال عملى للقائمة من هـــــــــــــــنا

حمل الملفات كاملة من هـــــــــــــــــنا

http://advphp.com/tuts/tabs/image.zip

طريقة الاستخدام:
1- قم بعمل صورة بمقاس 320x200 او كما يحلو لك اذا احببت ان تبٌقى على نفس المقاسات
2- اضف روابط الملفات فى كود الصفحة

view source
print ?

1.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.JavaScript"></script>
2.<script type="text/javascript" src="/JavaScript/fx.elements.JavaScript"></script>
3.<script type="text/javascript" src="/JavaScript/imageMenu.JavaScript"></script>

3- قم بعمل لست للقائمة التى تريد عملها:

view source
print ?

01.<div id="imageMenuBasic">
02.<ul>
03.<li><a href="#">Landscapes</a></li>
04.<li><a href="/h#">People</a></li>
05.<li><a href="#">Nature</a></li>
06.<li><a href="#">Urban</a></li>
07.<li><a href="#">Abstract</a></li>
08.</ul>
09.</div>

4- قم بتجميل القائمة فى ملف css او فى نفس الصفحة بين وسم style

view source
print ?

1..imageMenu { position: relative; width: 500px; height: 200px; overflow: hidden; }
2..imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px; width: 1000px; }
3..imageMenu ul li { float: left; }
4..imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor

ointer; display:block; overflow:hidden; width:98px; height: 200px; }
5..imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg) repeat scroll 0%; }

5- اضف امر تشغيل اوامر المكتبة فى اول الصفحة

view source
print ?

1.<script type="text/javascript">
2.window.addEvent('domready', function(){
3.new ImageMenu($$('#imageMenu a'), {
4.openWidth:310,
5.border:2
6.});
7.});
8.</script>

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

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