admin
11-01-2013, بتوقيت غرينيتش 03:58 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط¯ط±ط³ ط§ظ†ط´ط§ط، ظ‚ط§ط¦ظ…ط© ط¨ط³ظٹط·ط© ط¨ jquery (http://www.dzbatna.com/t1767274/)
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
هذا درس مفصل بسيط لانشاء قائمة رائعة بالجاكوري
صورة للقائمة :
http://img191.imageshack.us/img191/9449/sanstitre1lr.jpg
الدرس مفصل :
1- ملف HTML
اولا انشيء صفحة HTML فارغة باستعمال الكود code التالي
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-**="Content-Type" content="text/html; charset=utf-8" /> <title>قائمة jquery</title> </head> <body> </body> </html>
2-ملف css
محتوى الملف
رمز Code:
/* الانماط الكاملة للقائمة */ .gs-menu { position: relative; height: 29px; width: 421px; background-color: white; padding: 15px; margin: 10px 0; overflow: hidden; border: 1px solid gray; } /* قوة التدفق افقيا */ .gs-menu li { float: right; list-style: none; } .gs-menu li.back { border: 1px solid #000; background-color: #e6e8ea; width: 9px; height: 30px; z-index: 8; position: absolute; } /* التمثيلات و خلفية القائمة */ .gs-menu li a { font: bold 14px arial; text-decoration: none; color: #000; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: right; height: 30px; position: relative; overflow: hidden; margin: auto 10px; } .gs-menu li a:hover, .gs-menu li a:active, .gs-menu li a:visited { border: none; }
3- اكواد Javascript
ادخل هذه الاكواد بين وسمي <head> في ملفHTML
رمز Code:
<link rel="stylesheet" href="gs-menu.css" type="text/css" media="screen"> <script type="text/javascript" src="jquery-1.2.3.min.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript" src="jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script>
4-ملفات jquery
حمل الملفات المرفقة و ارفقها مع مجلد القائمة (jquery.zip (http://index.php?page=download&attach=1&id=32))
الملفات الكاملة للقائمة ايضا مرفقة (gs-menu.zip (http://index.php?page=download&attach=1&id=33))
:. الموضوع الاصلى: هنا (http://g-scripts.com/forum/t187.html) | المصدر: المنتدى forum - مجمع السكريبت scriptات (http://g-scripts.com/forum/) | كاتب الموضوع: admin (http://g-scripts.com/forum/u1.html) .:
التعديل الأخير كان بواسطة cherire; 14 - 01 - 2014 الساعة 01:35
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif jquery.zip (http://www.traidnt.net/vb/attachments/546921d1294958136-jquery.zip) (19.5 كيلوبايت, عدد مرات المشاهدة 116 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif gs-menu.zip (http://www.traidnt.net/vb/attachments/546922d1294958136-gs-menu.zip) (20.9 كيلوبايت, عدد مرات المشاهدة 128 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
هذا درس مفصل بسيط لانشاء قائمة رائعة بالجاكوري
صورة للقائمة :
http://img191.imageshack.us/img191/9449/sanstitre1lr.jpg
الدرس مفصل :
1- ملف HTML
اولا انشيء صفحة HTML فارغة باستعمال الكود code التالي
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-**="Content-Type" content="text/html; charset=utf-8" /> <title>قائمة jquery</title> </head> <body> </body> </html>
2-ملف css
محتوى الملف
رمز Code:
/* الانماط الكاملة للقائمة */ .gs-menu { position: relative; height: 29px; width: 421px; background-color: white; padding: 15px; margin: 10px 0; overflow: hidden; border: 1px solid gray; } /* قوة التدفق افقيا */ .gs-menu li { float: right; list-style: none; } .gs-menu li.back { border: 1px solid #000; background-color: #e6e8ea; width: 9px; height: 30px; z-index: 8; position: absolute; } /* التمثيلات و خلفية القائمة */ .gs-menu li a { font: bold 14px arial; text-decoration: none; color: #000; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: right; height: 30px; position: relative; overflow: hidden; margin: auto 10px; } .gs-menu li a:hover, .gs-menu li a:active, .gs-menu li a:visited { border: none; }
3- اكواد Javascript
ادخل هذه الاكواد بين وسمي <head> في ملفHTML
رمز Code:
<link rel="stylesheet" href="gs-menu.css" type="text/css" media="screen"> <script type="text/javascript" src="jquery-1.2.3.min.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript" src="jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script>
4-ملفات jquery
حمل الملفات المرفقة و ارفقها مع مجلد القائمة (jquery.zip (http://index.php?page=download&attach=1&id=32))
الملفات الكاملة للقائمة ايضا مرفقة (gs-menu.zip (http://index.php?page=download&attach=1&id=33))
:. الموضوع الاصلى: هنا (http://g-scripts.com/forum/t187.html) | المصدر: المنتدى forum - مجمع السكريبت scriptات (http://g-scripts.com/forum/) | كاتب الموضوع: admin (http://g-scripts.com/forum/u1.html) .:
التعديل الأخير كان بواسطة cherire; 14 - 01 - 2014 الساعة 01:35
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif jquery.zip (http://www.traidnt.net/vb/attachments/546921d1294958136-jquery.zip) (19.5 كيلوبايت, عدد مرات المشاهدة 116 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif gs-menu.zip (http://www.traidnt.net/vb/attachments/546922d1294958136-gs-menu.zip) (20.9 كيلوبايت, عدد مرات المشاهدة 128 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
