السلام عليكم ورحمة الله وبركاته
تكلمنا في الدرس السابق عن تنسيق المعلومات المستقبلة عن طريق ملف xml
في هذا الدرس سوف نكمل التنسق ونقوم بتحريك ما تم استقبالة
في ملف ال index.php
نستبدل
كود PHP:
<ul class="conts">
</ul>
ب
كود PHP:
<div class="container">
<div class="clip">
<div class="cont">
<ul class="conts">
</ul>
</div>
</div>
<div class="prev">السابق</div>
<div class="next">التالي</div>
</div>
CSS
كود ال CSS كامل وسوف نعد اليه ونقوم بشرحه
كود PHP:
.container {
overflow: hidden;
position: relative;
width: 150px;
height: 20px;
}
img{
border:0;
}
.clip {
left: 35px;
width: 300px;
height: 20px;
background: #ffffff;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.cont {
width: 300px;
height: 20px;
padding: 0;
margin: 0;
position: relative;
float: left;
}
.conts {
padding: 0;
margin: 0;
height: 20px;
list-style: none;
}
.conts li {
width: 100px;
height: 20px;
float:left;
}
.next {
position: absolute;
right: 0;
top: 0;
width: 25px;
height: 20px;
cursor: pointer;
background: #ffffff;
}
.prev {
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 20px;
cursor: pointer;
background: #ffffff;
}
كود container :
كود PHP:
overflow: hidden;
هنا قلنا له كل ما بداخلة يتم عرضه اما ما يكون خارج حدوده يكون مخفي
كود PHP:
position: relative;
هنا قلنا له موقعة يكون الافتراضي وذلك يقوم بعمل left:20
الطول
العرض
--------------------------------
كود clip:
ازاحه من جهه اليسار بمقدار 35px
العرض
الطول
كود PHP:
background: #ffffff;
لون الخلفية
الازاحه الداخلية
الازاحة الخارجيه
كود PHP:
overflow: hidden;
هنا قلنا له كل ما بداخلة يتم عرضه اما ما يكون خارج حدوده يكون مخفي
كود PHP:
position: relative;
هنا قلنا له موقعة يكون الافتراضي وذلك يقوم بعمل left:20
--------------------------------
كود cont :
العرض
الطول
الازاحه الداخلية
الازاحة الخارجيه
كود PHP:
position: relative;
هنا قلنا له موقعة يكون الافتراضي وذلك يقوم بعمل left:20
يلزم الجهه اليسار
--------------------------------
كود conts :
الازاحه الداخلية
الازاحة الخارجيه
الطول
كود PHP:
list-style: none;
بدون شكل لعنصر القائمة
--------------------------------
كود conts li :
العرض
الطول
--------------------------------
كود next :
كود PHP:
position: absolute;
هنا قلنا له موقعة حسب الحصائص من حيث اليمين او اليسار وا الاعلى او الاسفل داخل الاطار الاساسي
ازاحه من جهه اليمين بمقدار 0 اي يكون ملاصق لليمين
ازاحه من جهه الاعلى بمقدار 0 اي يكون ملاصق للاعلى
العرض
الطول
كود PHP:
cursor: pointer;
شكل الماوس
كود PHP:
background: #ffffff;
لون الخلفية
--------------------------------
كود prev :
كود PHP:
position: absolute;
هنا قلنا له موقعة حسب الحصائص من حيث اليمين او اليسار وا الاعلى او الاسفل داخل الاطار الاساسي
ازاحه من جهه اليسار بمقدار 0 اي يكون ملاصق لليسار
ازاحه من جهه الاعلى بمقدار 0 اي يكون ملاصق للاعلى
العرض
الطول
كود PHP:
cursor: pointer;
شكل الماوس
كود PHP:
background: #ffffff;
لون الخلفية
jquery
كود الجافا كامل :
كود PHP:
<script type="text/javascript">
$(document).ready(function() {
var namebr_xml_item=0;
var width_insert=100;
var width_next=0;
$.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></li>').html('<a href="'+url+'" ><img src="'+imge+'" alt="'+title+'" />'+title+'</a>').appendTo('.conts');//
namebr_xml_item++;
});
}
});
var next = function() {if(width_next < namebr_xml_item - 1){$(".cont").animate({"left": "-="+width_insert+"px"}, "slow"); width_next++;}};
var prev= function() {if(width_next > 0){$(".cont").animate({"left": "+="+width_insert+"px"}, "slow"); width_next--;}};
$('.next').click(next);
$('.prev').click(prev);
///////////////
});
</script>
سوف اتكلم عن الاكواد التي تم اضافتها فقط باقي الاكواد تم التحدث عنها في
في بدايه الكود وتحت
كود PHP:
$(document).ready(function() {
تم اضافه هذه الاكواد وهي
كود PHP:
var namebr_xml_item=0;
هنا قلنا له عرف المتغير namebr_xml_item ليكون قيمته 0
كود PHP:
var width_insert=100;
هنا قلنا له عرف المتغير width_insert ليكون قيمته 100 ونقصد به عرض الصوره
كود PHP:
var width_next=0;
هنا قلنا له عرف المتغير width_next ليكون قيمته 0
كود PHP:
namebr_xml_item++;
هنا قلنا له قم بزيادة 1 الى قيمة namebr_xml_item
كود PHP:
var next = function() {if(width_next < namebr_xml_item - 1){$(".cont").animate({"left": "-="+width_insert+"px"}, "slow"); width_next++;}};
في الكود قلنا له عرف المتغير next لتكون قيمته داله محتوى الداله هو: اذا كان قيمة المتغير width_next اصغر من قيمة المتغير namebr_xml_item ناقص 1 قم بتحريك (animate) العنصر cont بمقدار قيمة المتغير width_insert الى جهه اليسار اي يتحرك من اليمين الى اليسار ثم قم بزياده على قيمة width_next بمقدار 1
ماذا قلنا له هنا اذا كانت قيمة
في الكود قلنا له
كود PHP:
-="+width_insert+"px"
كود PHP:
var prev= function() {if(width_next > 0){$(".cont").animate({"left": "+="+width_insert+"px"}, "slow"); width_next--;}};
في الكود قلنا له عرف المتغير prev لتكون قيمته داله محتوى الداله هو: اذا كان قيمة المتغير width_next اكبر من صفر قم بتحريك (animate) العنصر cont بمقدار قيمة المتغير width_insert الى جهه اليمين اي يتحرك من اليسار الى اليمين ثم قم بانقاص قيمة المتغير width_next بمقدار 1
في الكود قلنا له
كود PHP:
+="+width_insert+"px"
كود PHP:
$('.next').click(next);
click هي احد api jquery
وهي من الاحداث مثل الضغط او تحريك الماوس الى الاعلى او الاسفل .. الخ
كود PHP:
$('.next').click(next);
هنا قلنا له في حال الضغط على next وهو العنصر وليس المتغير قم بتطبيق محتوى المتغير next
كود PHP:
$('.prev').click(prev);
هنا قلنا له في حال الضغط على prev وهو العنصر وليس المتغير قم بتطبيق محتوى المتغير prev
هذا والله الموفق
المصدر : vip4ksa.com
الكاتب : ثامر الصعيدي
في الدرس القادم سوف نقوم بتحريك هذا العناصر بشكل اتماتيكي وبتوقيت معين
رد مع اقتباس
