logo

أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

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

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





08-01-2011 02:42 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 870
المشاركات : 480
الدولة : الجزائر
الجنس :
تاريخ الميلاد : 19-1-1995
قوة السمعة : 501
موقعي : زيارة موقعي
بسم الله الرحمن الرحيم

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

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


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

sanstitre1lr

الدرس :

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

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)



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


look/images/icons/i1.gif درس انشاء قائمة ب jquery
  09-01-2011 10:36 مساءً   [1]
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 12454
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 73176
موقعي : زيارة موقعي
تحميل المرفقات يستلزم التسجيل بمنتداك no_1
يرجى ارفاق المرفقات في الموضوع

look/images/icons/i1.gif درس انشاء قائمة ب jquery
  10-01-2011 01:49 مساءً   [2]
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 870
المشاركات : 480
الدولة : الجزائر
الجنس :
تاريخ الميلاد : 19-1-1995
قوة السمعة : 501
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: مشراق تحميل المرفقات يستلزم التسجيل بمنتداك no_1
يرجى ارفاق المرفقات في الموضوع
تفضل اخ مشراق و اسف لم انتبه 155
 
 
  jquery.zip   تحميل zip مرات التحميل :(26)
الحجم :(18.843) KB
  gs-menu.zip   تحميل zip مرات التحميل :(26)
الحجم :(20.272) KB


اضافة رد جديد اضافة موضوع جديد



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

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









الساعة الآن 04:39 AM