السلام عليكم ورحمة الله وبركاتة
كل عام وانتم بخير مبارك عليكم الشهر
تكلمنا في الفصل الاول عن تنسيق و تحريك المعلومات المستقبلة عن طريق ملف xml
وتعلمنا طريقه كتابة ملف xml واستقبال ما بداخلة من معلومات عن طريق ال ajax
في هذا الفصل (الفصل الثاني ) سوف نتحدث عن ثلاث امور ان شاء الله
الاول هو تغير خصائص ال css للعناصر عن طريق ال jquery باستخدام css()
الثاني هو اظهار واخفاء العناصر عن طريق ال jquery باستخدام hide() و show()
الثالث هو اظهار واخفاء العناصر عن طريق ال jquery باستخدام fadeOut() و fadeIn()
الدرس الاول الفصل الثاني : اعداد ملف الcss و تغير خصائص css لعنصر باستخدام css()
بسم الله نبداء
كود ال css
كود PHP:
.container {
overflow: hidden;
position: relative;
width: 200px;
height: 64px;
}
.conts {
padding: 0;
margin: 0;
height: 64px;
list-style: none;
}
.conts li {
width: 64px;
height: 64px;
float: left;
}
.do {
background-position: top;
background-repeat: no-repeat;
width: 64px;
height: 64px;
cursor: pointer;
container
css كامل العمل
conts
css ل قائمة ul
.conts li
css ل العناصر داخل ul
do
css ل div داخل العناصر داخل ul
كود الجافا
كود PHP:
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "XML/xmlfile.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){ // داخل المتغير site
var id = $(this).attr('id');// استقبال متغير ال ID
var imge = $(this).find('imge').text();// استقبال متغير ال imge
var url = $(this).find('url').text();// استقبال متغير ال url
var title = $(this).find('title').text();// استقبال متغير ال title
$('<li id="doz'+id+'"></li>').html('<a href="'+url+'" title="'+title+'"><div class="do" id="do'+id+'" style="background-image:url('+imge+'); height: 10px;"></div></a>').appendTo('.conts');//
$('#doz'+id+'').mouseover(function() {
$('#do'+id+'').css('height','64px');
});
$('#doz'+id+'').mouseout(function() {
$('#do'+id+'').css('height','10px');
});
});
}
});
});
</script>
document يقصد بها الصفحة
ready بعد تحميل الصفحة
ajax
url رابط الملف
dataType نوع البيانات
success ما تم استقبالة من الملف
find ابحث عن ما قبلة
each تكرار الكل
attr اعرض ما بداخل ما قبلة
html العرض بتطبيق اي اكواد HTML
appendTo اضف ما قبلة الى ما بداخلة
mouseover وضع الماوس
mouseout ابعاد الماوس
جميع ما سبق تم ذكرة في الفصل الاول
الجديد هنا هو
كود PHP:
$('#do'+id+'').css('height','64px');
كود PHP:
$('#doz'+id+'').mouseover(function() {
$('#do'+id+'').css('height','64px');
});
هنا استخدمنا api وضع الماوس ( mouseover ) على ('#do'+id+'') بحيث يتم تنفيذ css('height','64px') this على العنصر ('#do'+id+'')
كود PHP:
$('#do'+id+'').css('height','10px');
كود PHP:
$('#doz'+id+'').mouseout(function() {
$('#do'+id+'').css('height','10px');
});
هنا استخدمنا api ابعاد الماوس ( mouseout ) عن ('#doz'+id+'') بحيث يتم تنفيذ css('height','10px') this على العنصر ('#do'+id+'')
ملف ال xml
كود PHP:
<sites>
<site id="1">
<title>facebook</title>
<imge>http://www.swalif.net/softs/images/facebook_64.png</imge>
<url>http://www.facebook.com</url>
</site>
<site id="2">
<title>twitter</title>
<imge>http://www.swalif.net/softs/images/twitter_64.png</imge>
<url>http://www.twitter.com</url>
</site>
<site id="3">
<title>skype</title>
<imge>http://www.swalif.net/softs/images/skype_64.png</imge>
<url>http://www.skype.com</url>
</site>
</sites>
ملف ال index.php
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>test</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link type="text/css" href="CSS/style.css" rel="stylesheet" />
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui-1.8.2.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "XML/xmlfile.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){ // داخل المتغير site
var id = $(this).attr('id');// استقبال متغير ال ID
var imge = $(this).find('imge').text();// استقبال متغير ال imge
var url = $(this).find('url').text();// استقبال متغير ال url
var title = $(this).find('title').text();// استقبال متغير ال title
$('<li id="doz'+id+'"></li>').html('<a href="'+url+'" title="'+title+'"><div class="do" id="do'+id+'" style="background-image:url('+imge+'); height: 10px;"></div></a>').appendTo('.conts');//
$('#doz'+id+'').mouseover(function() {
$('#do'+id+'').css('height','64px');
});
$('#doz'+id+'').mouseout(function() {
$('#do'+id+'').css('height','10px');
});
});
}
});
///////////////
});
</script>
<div class="container">
<ul class="conts">
</ul>
</div>
</body>
</html>
تم ولله الحمد
هنا الملفات
http://www.vip4ksa.com/file/vip4ksa_...s_2010_s_2.zip
فهرس الدروس :
رد مع اقتباس
