درس انشاء قائمة ب jquery

بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته،، هذا درس بسيط لانشاء قائمة رائعة بالجاكوري صورة للقائمة : ..


موضوع مغلق


08-01-2011 02:42 مساء
cherire
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 870
المشاركات : 467
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 19-1-1995
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 501
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته،،

هذا درس بسيط لانشاء قائمة رائعة بالجاكوري


صورة للقائمة :

sanstitre1lr

الدرس :


1- ملف HTML


اولا انشيء صفحة HTML فارغة باستعمال الكود التالي


<!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

محتوى الملف




/* الانماط الكاملة للقائمة */    .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





<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)



الملفات الكاملة للقائمة ايضا مرفقة (gs-menu.zip)



09-01-2011 10:36 مساء
مشاهدة مشاركة منفردة [1]
Soliman
PBB Management
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 10317
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 44
يتابعهم : 12
يتابعونه : 51
قوة السمعة : 62386
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif درس انشاء قائمة ب jquery
تحميل المرفقات يستلزم التسجيل بمنتداك no_1
يرجى ارفاق المرفقات في الموضوع

10-01-2011 01:49 مساء
مشاهدة مشاركة منفردة [2]
cherire
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 870
المشاركات : 467
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 19-1-1995
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 501
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif درس انشاء قائمة ب jquery
المشاركة الأصلية كتبت بواسطة: مشراق »
تحميل المرفقات يستلزم التسجيل بمنتداك no_1
يرجى ارفاق المرفقات في الموضوع


تفضل اخ مشراق و اسف لم انتبه 155
 
 
  jquery.zip   تحميل zip مرات التحميل :(26)
الحجم :(18.843) KB
  gs-menu.zip   تحميل zip مرات التحميل :(26)
الحجم :(20.272) KB



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
اريد انشاء قائمة بريدية رياض507
15 1745 رياض507

الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 03:12 صباحا