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

تطوير المواقع web development

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

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

08-01-2011 02:42 مساءً

cherire

بسم الله الرحمن الرحيم

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

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

صورة للقائمة :
درس انشاء قائمة ب jquery

الدرس :

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)

المصدر مجمع السكريبتات

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

09-01-2011 10:36 مساءً [1]

Soliman

تحميل المرفقات يستلزم التسجيل بمنتداك درس انشاء قائمة ب jquery

يرجى ارفاق المرفقات في الموضوع

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

10-01-2011 01:49 مساءً [2]

cherire

المشاركة الأصلية كتبت بواسطة: سليمان تحميل المرفقات يستلزم التسجيل بمنتداك
يرجى ارفاق المرفقات في الموضوع

تفضل اخ سليمان و اسف لم انتبه درس انشاء قائمة ب jquery

: jquery.zip تحميل zip مرات التحميل :(26)
الحجم :(18.843) KB

gs-menu.zip تحميل zip مرات التحميل :(26)
الحجم :(20.272) KB

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

الكلمات الدلالية

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

« سأبدا دورتي في php وصولاً إلى الاحتراف | طلب تعديل على هيدر »

الساعة الآن 04:38 PM