السلام عليكم ورحمة الله وبركاتة
تكلمنا في الدرس السابق عن اعداد ملف الcss و تغير خصائص css لعنصر باستخدام css()
الدرس االثاني الفصل الثاني : اظهار واخفاء العناصر عن طريق ال jquery باستخدام hide() و show()
تتميز hide() و show() بامكانيه وضع وقت لها بحيث يكون بداية من ظهورها حتى الظهور الكامل
وتكتب بهذه الطريقه
hide(1000)
show(1000)
اي تستغرق مدة ثانيه واحده حتى يكتمل الظهور
كود ال css
كود PHP:
.container {
overflow: hidden;
position: relative;
width: 200px;
height: 90px;
}
.conts {
padding: 0;
margin: 0;
height: 90px;
list-style: none;
}
.conts li {
width: 64px;
height: 90px;
float: left;
}
.do {
background-position: top;
background-repeat: no-repeat;
width: 64px;
height: 90px;
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="display:none;background-image:url('+imge+'); height: 64px;"></div></a>').appendTo('.conts');//
$('#doz'+id+'').mouseover(function() {
$('#do'+id+'').show();
});
$('#doz'+id+'').mouseout(function() {
$('#do'+id+'').hide();
});
});
}
});
///////////////
});
</script>
document يقصد بها الصفحة
ready بعد تحميل الصفحة
ajax
url رابط الملف
dataType نوع البيانات
success ما تم استقبالة من الملف
find ابحث عن ما قبلة
each تكرار الكل
attr اعرض ما بداخل ما قبلة
html العرض بتطبيق اي اكواد HTML
appendTo اضف ما قبلة الى ما بداخلة
mouseover وضع الماوس
mouseout ابعاد الماوس
جميع ما سبق تم ذكرة في الفصل الاول
الجديد هنا هو
كود PHP:
$('#do'+id+'').show();
تستطيع ايضا كتابتها
$('#do'+id+'').show('slow');
$('#do'+id+'').show(1000);
كود PHP:
$('#doz'+id+'').mouseover(function() {
$('#do'+id+'').show();
});
هنا استخدمنا api وضع الماوس ( mouseover ) على ('#do'+id+'') بحيث يتم تنفيذ $('#do'+id+'').show(); على العنصر ('#do'+id+'') اي اظهار
كود PHP:
$('#do'+id+'').hide();
تستطيع ايضا كتابتها
$('#do'+id+'').hide('slow');
$('#do'+id+'').hide(1000);
كود PHP:
$('#doz'+id+'').mouseout(function() {
$('#do'+id+'').hide();
});
هنا استخدمنا api ابعاد الماوس ( mouseout ) عن ('#doz'+id+'') بحيث يتم تنفيذ $('#do'+id+'').hide(); على العنصر ('#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="display:none;background-image:url('+imge+'); height: 64px;"></div></a>').appendTo('.conts');//
$('#doz'+id+'').mouseover(function() {
$('#do'+id+'').show();
});
$('#doz'+id+'').mouseout(function() {
$('#do'+id+'').hide();
});
});
}
});
///////////////
});
</script>
<div class="container">
<ul class="conts">
</ul>
</div>
</body>
</html>
تم ولله الحمد
الملفات
نفس ملفات الدرس الاول
فهرس الدروس :
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة dar4arab 
