الدرس الرابع تحريك ما تم استقبالة من XML بشكل auto دورة jquery & CSS

**المتميز السعودي** · 07-08-2010

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

تكلمنا في الدرس السابق عن تنسيق و تحريك المعلومات المستقبلة عن طريق ملف xml بالضغط على السابق و التالي

قد يتسائل البعض ويقول لماذا لم يتم وضع التنسيق في درس و التحريق في درس مستقل ؟
اقول له القصد من ذلك هو العمل على ال الcss وال jquery في نفس الوقت

في هذا الدرس سوف نقوم بتحريك ما تم استقبالة بشكل auto بشكل افتراضي

وسوف نستخدم api jquery

mouseover وضع الماوس

mouseout ابعاد الماوس

و دوال ال java

setInterval وضع التوقيت

clearInterval حذف التوقيت

في ملف ال index.php

نقوم باضافه

كود PHP:


var all = function() {

if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"left": "-



="+width_insert+"px"}, "slow"); width_next++;} 

else {$(".cont").animate({"left": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}

};

var daly = 2000;// 1000 ثانية واحدة

var times = setInterval(all,daly);

$('.cont').mouseover(function() {

times = clearInterval(times);

});



$('.cont').mouseout(function() {

times = setInterval(all,daly);

});

بحيث تكون اسفل من

كود PHP:


$('.prev').click(prev);

-------------------------

كود PHP:


var all = function() {

if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"left": "-



="+width_insert+"px"}, "slow"); width_next++;} 

else {$(".cont").animate({"left": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}

};

هنا قمنا بتعريف متغير all بحيث ياخذ محتوى الداله
التي قلنا له فيها

اذا كان ( width_next ) اصغر من ( namebr_xml_item - 1 ) و ( width_next ) اكبر من او يساوي 0 قم بتحريك (.cont) الى اليسار بمقدار ( width_insert

) وقم بزيادة ( width_next ) بمقدار 1

واذا لم يكون ذلك قم بتحريك (.cont ) الى اليمين بمقدار ( width_next * width_insert ) و اجعل ( width_next ) تساوي 0

----------------------

كود PHP:


var daly = 2000;// 1000 ثانية واحدة

هنا قمنا بتعريف متغير ( daly ) بحيث ياخذ محتوى 2000 كل 1000 يساوي ثانية واحده

----------------------

كود PHP:


var times = setInterval(all,daly);

هنا قمنا بتعريف متغير times بحيث ياخذ محتوى الداله ( setInterval )وهذه الداله تاخذ بارميتر الاول : محتوى المتغير( all )والثاني محتوى المتغير( daly )
هذه الدالة تقم بتنفيذ المتغير الاول كل مره يساوي العدد الداخلي لها المتغير الثاني

----------------------

كود PHP:


$('.cont').mouseover(function() {

times = clearInterval(times);

});

هنا استخدمنا api وضع الماوس ( mouseover ) على (.cont ) يقوم وضع ال ( times ) ـ ( clearInterval ) عملها هو مسح ال( times )

----------------------

كود PHP:


$('.cont').mouseout(function() {

times = setInterval(all,daly);

});

هنا استخدمنا api ابعاد الماوس ( mouseout ) عن (.cont ) حيث ياخذ ( times )محتوى الداله ( setInterval )وهذه الداله تاخذ بارميتر الاول : محتوى المتغير( all )والثاني محتوى المتغير(

daly )
هذه الدالة تقم بتنفيذ المتغير الاول كل مره يساوي المتغير الثاني العدد الداخلي لها

----------------------
الكود كامل

كود PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-



19991224/loose.dtd">

<!-- saved from url=(0044)http://devnet.mohe.gov.saPages/test.aspx -->

<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>

xml اولا : الاستقبال من ال 



<br />



<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);



var all = function() {

if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"left": "-



="+width_insert+"px"}, "slow"); width_next++;} 

else {$(".cont").animate({"left": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}

};

var daly = 2000;// 1000 ثانية واحدة

var times = setInterval(all,daly);

$('.cont').mouseover(function() {

times = clearInterval(times);

});



$('.cont').mouseout(function() {

times = setInterval(all,daly);

});    

///////////////

});

</script>

<div class="container">

    <div class="clip">

        <div class="cont">

            <ul class="conts">

            </ul>

        </div>

    </div>

    <div class="prev">السابق</div>

    <div class="next">التالي</div>

</div>

</body>



</html>

تطبيق الدرس

ارجو عملها بحيث تكون الحركه من الاسفل الى الاعلى

تلميحات مساعده :

الطول الحركي
width_next

الحركه اتجاهها
left
اما تكون + او -
- تكون الى اليمين

نحن نريدها top

ال cont هو الذي يتحرك وعرضه يساوي عدد الصور * عرض الصوره

نفس الامر ينطبق على clip عرضه يساوي عدد الصور * عرض الصوره

نريدها بدل العرض الطول

امل ان تساعدكم هذه التلميحات

انتهاء الفصل الاول

الفصل الثاني :استخدام الصور والتبديل بينها بمرور الماوس

**عبدالله بن سعود** · 07-08-2010

بارك الله فيك دوماً متمَّيز و نحن طبعاً بإنتظار الفصل التالي..

مع التحيَّه

**المتميز السعودي** · 07-08-2010

المشاركة الأصلية كتبت بواسطة عبدالله بن سعود مشاهدة المشاركة

بارك الله فيك دوماً متمَّيز و نحن طبعاً بإنتظار الفصل التالي..

مع التحيَّه

ويبارك فيك شاكر لك هذا الاطراء الجميل

الفصل التالي قريبا ان شاء الله

**المتميز السعودي** · 08-08-2010

تطبيق الدرس الحركة من الاعلى الى الاسفل

ملف ال index

كود PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<!-- saved from url=(0044)http://devnet.mohe.gov.saPages/test.aspx -->

<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>

xml اولا : الاستقبال من ال 



<br />



<script type="text/javascript">

$(document).ready(function() {

var namebr_xml_item=0;

var width_insert=20;

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({"top": "-="+width_insert+"px"}, "slow"); width_next++;}};

var prev= function() {if(width_next > 0){$(".cont").animate({"top": "+="+width_insert+"px"}, "slow"); width_next--;}};





$('.next').click(next);

$('.prev').click(prev);



var all = function() {

if((width_next < namebr_xml_item - 1) && (width_next >= 0)){$(".cont").animate({"top": "-="+width_insert+"px"}, "slow"); width_next++;} 

else {$(".cont").animate({"top": "+="+ width_next * width_insert +"px"}, "slow"); width_next = 0;}

};

var daly = 2000;// 1000 ثانية واحدة

var times = setInterval(all,daly);

$('.cont').mouseover(function() {

times = clearInterval(times);

});



$('.cont').mouseout(function() {

times = setInterval(all,daly);

});    

///////////////

});

</script>

<div class="container">



    <div class="clip">

        <div class="cont">

            <ul class="conts">

            </ul>

        </div>

    </div>

    <div class="prev">فوق</div>

    <div class="next">تحت</div>

</div>

</body>



</html>

التغير
تم تغير
animate({"left":

الى

animate({"top":

وتغير

var width_insert=100;

الى

var width_insert=20;

ملف ال css

كود PHP:


@import url("base/jquery.ui.all.css");



.container {

    overflow: hidden;

    position: relative;

    width: 150px;

    height: 20px;

}

img{

border:0;    

}

.clip {

    left: 35px;

    width: 100px;

    height: 20px;

    background: #ffffff;

    padding: 0;

    margin: 0;

    overflow: hidden;

    position: relative;

}

.cont {

    width: 100px;

    height: 60px;

    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;

}

التغير

تم تغير في كل من

.clip
.cont

width: 300px;

الى
width: 100px;

وفي
.cont

height: 20px;

الى

height: 60px;

هل انتم متابعون معي ام لا ؟

الموضوع: الدرس الرابع تحريك ما تم استقبالة من XML بشكل auto دورة jquery & CSS

أدوات الموضوع

بحث في الموضوع

الدرس الرابع تحريك ما تم استقبالة من XML بشكل auto دورة jquery & CSS

المواضيع المتشابهه

الدرس الثالث تحريك ما تم استقبالة من XML دورة jquery & CSS

[ دورة ] الدرس الاول تجهيز منطقه العمل , الاستقبال من ال jquery & CSS ) XML )

الدرس الثاني تنسيق ما تم استقبال من XML دورة jquery & CSS

[ دورة ] [الدرس الرابع-دورة الحياة البرمجية]برمجة الصفحة الرئيسية [ 2]

ضوابط المشاركة