النتائج 1 إلى 7 من 7

الموضوع: دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثاني] - الأحداث والتأثيرات-دليلك ا

  1. #1

    دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثاني] - الأحداث والتأثيرات-دليلك ا



    التعامل مع الأحداث Events والتأثيرات Effect

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

    التعريف بالحدث او الأحداث

    الحدث هو وقوع شيء ما اي عندما نمرر الفأرة على رابط او نضغط عليه فهذا يسمى حدث Event
    المثال ينطبق على كل العناصر داخل الصفحة

    المثال الذي وضعته في الدرس السابق هو حدث click اي عندما نضغط على شيء نطلب منه ان يفعل كذا وكذا بلغة javascript
    الأحداث موجود في لغة javascript
    وهي كالتالي
    onClick
    onMouseover
    onMouseout
    onKeypress
    ويتم التحكم في الحدث في مكان الحدث بهذه الطريقة
    كود HTML:
    <a href="#" onClick="your function">رابط</a>


    يمكنك معرفة باقي الأحداث من هنا
    وتأتي مكتبة jQuery لتختصر وتصبح الأحداث بدون on اي
    click
    mouseover
    mouseout
    keypress
    جميع الأحداث من موقع المكتبة
    وكذالك التحكم في الحدث بعيدا عن مكان الحدث اي <head> او ملف خارجي يتم استدعائه في <head> ايضا

    مثال
    كود jquery
    كود HTML:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("#link").click(function(){
    if(!confirm('هل حقا تريد زيارة هذا الرابط \n'+this)){
    return false; // الغاء تحويله الى الرابط
    }
    
    }); // #link
    
    }); // document
    </script>
    كود الرابط

    كود HTML:
    <a href="http://google.com" id="link">جوجل</a>
    لقد تحكمنا في رابط واحد وهو جوجل من خلال id=link ولكن ماذا لو اردنا ان ننبه الزائر في جميع الروابط
    نغير #link الى a
    مثال
    كود HTML:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("a").click(function(){
    if(!confirm('هل حقا تريد زيارة هذا الرابط \n'+this)){
    return false; // الغاء تحويله الى الرابط
    }
    
    }); // #link
    
    }); // document
    </script>
    كود الرابط
    كود HTML:
    <a href="http://google.com">جوجل</a>
    <a href="http://yahoo.com" >ياهو</a>
    <a href="http://bp.ma">مدونة مبرمج</a>
    بما انني وضعت مثال عن الرابط من خلال الأحداث احببت ان اوضح هذه النقطة "التحكم في الروابط" بشكل اوسع قليلا
    لكي تعرف جميع دوال المكتبة يمكنك تجربتها مباشرة من خلال هذا الموقع Visual jQuery

    الأن مع التأثيرات Effect
    هناك دوال خاصة بصنع التأثيرات منها الانزلاق والتلاشي والاخفاء ...

    في كل دالة هناك ثلاث مستويات من التحكم زائد التحكم بالميلي ثانية

    مثلا دالة hide

    كود HTML:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("#myp").click(function(){
    $('#mydiv').hide(); // سيتم اخفاء العنص بسرعة
    
    });
    
    }); // document
    </script>
    <p id="myp">اخفاء</p>
    <div id="mydiv">
    السلام عليكم
    </div>
    الحالات الأخرى هي
    كود HTML:
    $('div').hide('fast'); // بسرعة ايضا
    كود HTML:
    $('div').hide('slow'); // بطيء
    كود HTML:
    $('div').hide('normal'); // طبيعي
    كود HTML:
    $('div').hide(1000); // السرعة بثانية
    كود HTML:
    $('div').hide(500); // السرعة  بنصف ثانية
    كذلك يمكنك تغيير السرعة كما تشاء من 0 الى اي سرعة تريدها
    هذه الاعدادات تستطيع تطبيقها على جميع دوال التأثيرات التي سأذكرها
    كود HTML:
    hide(); // اخفاء
    show(); // اظهار
    toggle(); // اخفاء اظهار في نفس الوقت
    slideDown(); // اخفاء من الأعلى الى الأسفل
    slideUp(); // عكس السابق
    slideToggle(); // اخفاء واظهار بتأثير الدالتين السابقتين
    fadeIn(); // يتلاشى الى الخارج
    fadeOut(); //  عكس السابق
    fadeTo(); // يتلاشى في نس المكان
    هناك دوال اخرى اكتشفها بنفسك
    اما هذه الدالة فهي رائعة بمعنى الكلمة
    كود HTML:
    animate();
    اخفاء واظهار
    كود HTML:
    $('#mydiv').animate({
    "height": "toggle", "opacity": "toggle"
    },'slow');
    الأن العب مع jquery
    كود HTML:
    $(document).ready(function(){
    $("#start").click(function(){
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "+=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "+=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "+=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "-=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "-=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "-=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"top": "-=100px"}, "fast");
    $(".mydiv").animate({"left": "+=100px"}, "fast");
    $(".mydiv").animate({"left": "-=750px"}, "fast");
    $(".mydiv").animate({
    "left": "+=350px",
    "top":"+=350px",
    }, 500);
    $(".mydiv").animate({
    "left": "-=350px",
    "top":"-=350px",
    }, 500).fadeOut(800);
    });
    }); // document
    مثال حي


    الدرس القادم عن استخدام تقنية اجاكس من خلال jquery





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com




  2. ممتاز ما شاء الله الف شكر ^_^





    __________________
    سبحان الله وبحمده
    > "كتبي، لعلها تفيدك!" *جديد
    > "مدونتي، تصويري.." | LaZqA
    > Twitter



  3. شكرا لك يا عبد الواحد ، اقترح عليك ان تشرح ببطىء قليلا و تستفيض فى الشرح ، يعنى مثلا فى ناس كثير لاتفهم صيغه ال object literal هذه الذى قد مررتها للوظيفه animate
    كود PHP:
    $(".mydiv").animate({"left""-=750px"}, "fast"); 






    __________________
    Keepondev | مدونه شديد التخصص فى الجافاسكربت
    جافاسكربت الموجهه بالكائنات | أنماط تصميم جافاسكربت

  4. #4


    شكرا لك يا عبد الواحد ، اقترح عليك ان تشرح ببطىء قليلا و تستفيض فى الشرح ، يعنى مثلا فى ناس كثير لاتفهم صيغه ال object literal هذه الذى قد مررتها للوظيفه animate
    كود PHP:
    $(".mydiv").animate({"left""-=750px"}, "fast"); 
    اشكرك على المرور اخي
    الحقيقة ليس لدي ما اضيفه على الرابط الذي وضعته
    لو رأيت ان هناك غموض ممكن تشرحها بطريقتك
    العفو اخي





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  5. #5
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2007
    المشاركات
    597


    شكرا لك اخي عبدالواحد

    استمر في الدورة .. وجزاك الله خيرا






  6. #6
    عضو نشيط
    تاريخ التسجيل
    Jul 2008
    المشاركات
    128

  7. #7
    عضو نشيط
    تاريخ التسجيل
    Jul 2008
    المشاركات
    128





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

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا|شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض