صفحة 1 من 4 1234 الأخيرةالأخيرة
النتائج 1 إلى 15 من 48

الموضوع: JQuery درس تطبيق قائمة بلوكات منسدله ( بسيط )

  1. #1

    JQuery درس تطبيق قائمة بلوكات منسدله ( بسيط )



    درس تطبيق عمل قائمة بلوكات منسدله



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

    في مقالة سابقة من مدونتي قمت بشرح مبادئ ونبذه عن مكتبة JQuery الرائعه وبدايه لعملها

    وأحببت أن أعمل تطبيق بعض الأمثله لنفهمها ونعرف كيفية استخدامها في مواقعنا

    والمثال الأول هو تطبيق قائمات بلوك منسدله

    ومن المواقع التي تعمل مثل هذا التأثير هو موقع شركة Apple الشهيرة

    http://www.apple.com/startpage


    هنا يمكنك مشاهدة مثال على ما سنقوم بتطبيقه





    1/ إنشاء المجلد والصفحه

    الان نبدأ في التطبيق ننشأ (مجلد جديد) باسم menu_scroll مثلاً

    ونضع فيه ملف المكتبة الخاصة بالـ Jquery

    jquery.js ( ويمكنك تحميلها من هنا ) ولا تنسى ان تقوم بإعادة تسميتها إلى jquery.js أفضل ليتناسب مع الدرس

    ثم ننشأ صفحة الويب التي نريد ان نعمل التأثير فيها

    باسم menu_scroll.htm مثلاً



    2/ التصميم

    نقوم أولاً بتصميم الشكل الذي نريد عمل التأثير عليه

    وذالك باستخدام CSS نقوم بكتابة الـ Tags الخاصة بالبلوكات

    كود:
    <dl>
    <dt><a href="">عنوان 1</a></dt>
    <dd>
    <ul>
    <li><a href="">رابط 1</a></li>
    <li><a href="">رابط 2</a></li>
    <li><a href="">رابط 3</a></li>
    </ul>
    </dd>
    <dt><a href="">عنوان 2</a></dt>
    <dd>
    <ul>
    <li><a href="">رابط 1</a></li>
    <li><a href="">رابط 2</a></li>
    <li><a href="">رابط 3</a></li>
    <li><a href="">رابط 4</a></li>
    </ul>
    </dd>
    <dt><a href="">عنوان 3</a></dt>
    <dd>
    <ul>
    <li><a href="">رابط 1</a></li>
    <li><a href="">رابط 2</a></li>
    <li><a href="">رابط 3</a></li>
    </ul>
    </dd>
    </dl>
    بعدها نعطي الـ Tags ما يناسبها من Style خاص بالـ CSS
    فنقوم بكتابة داخل tag الـ <head> الـ tag الخاص بـ Style الـ CSS

    كود:
    <head>
    <style type="text/css">
    </style>
    </head>
    بعدها بدءً من الـ Tag الذي يحتوي على جميع البلوكات <dl> نعطيه مساحة عرض 300 بكسل ونعطي باقي الـ Tags ما يناسبها من style كم في التالي

    كود:
    dl { width: 300px; }
    dl,dd { margin: 0; }
    dt { background: #00CCFF; font-size: 18px; padding: 5px; margin: 2px; }
    dt a { color: #FFF; }
    dd a { color: #000; }
    ul { list-style: none; padding: 5px; }
    الان وبعد ما انهينا مرحلة التصميم ننتقل إلى >>>




    3/ كتابة الأكواد باستخدام مكتبة JQuery

    هنا مرحلة كتابة أكواد الجافاسكربت, المتعلقه بمكتبة الـ JQuery



    في داخل tag الـ <head> نقوم بتضمين المكتبة داخل الصفحه بكتابة

    كود:
    <script type="text/javascript" src="jquery.js"></script>


    ونبدأ في كتابة الكود في تنفيذ العمليات في الصفحه

    كود:
    <script type="text/javascript">
     
    </script>
    وكما تم شرحه سابقاً نقوم بإضافة الكود الخاص بتحميل الأكواد أولاً

    كود:
    <script type="text/javascript">
    $(document).ready(function(){
     
    });
    </script>
    ثم نقوم بكتابة الكود المتعلق بفتح البلوك عند الضغط على احد العناوين

    كود:
    $("dt a").click(function(){
    $("dd").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    return false; 
    });
    كتبنا dt a وهذا يعني انه يتم التعامل مع a الذي في داخل dt فقط

    لذالك الـ class $ المتعلق بالبحث واختيار الـ Tags سهل واحترافي جداً في مكتبة JQuery

    وبالنسبة لـ $("dd").slideUp("slow");
    بهذا الكود نقوم بإخفاء جميع البلوكات ببساطه

    ثم بـ $(this).parent().next().slideDown("slow");
    نقوم بإضهار بالتدريج العنصر الذي يلي العنصر الذي تم الضغط عليه
    بحيث هذا الكود $(this).parent() يقوم باختيار العنصر الحالي الذي تم الضغط عليه وعند إضافة next() يتم تحديد العنصر الذي يليه



    الان انتهينا من كل شي ما عدا خطوه أخيره

    عند فتح الصفحه نود ان نقوم بإضهار اول بلوك وهي عن طريق كتابة الكود التالي

    كود:
    $("dd:not(:first)").hide();
    في أول السطر, والكود معناه أخفي جميع البلوكات ماعدا اول بلوك, وذالك بإضافة ( :not )
    و ( :first ) يقوم بتحديد أول tag أو element يحمل اسم dd في الصفحه


    # إنتهى #


    بإمكانك الإستفاده من الأوامر الخاصة بمكتبة JQuery عن طريق الـ Documentation بالموقع
    http://docs.jquery.com
    وفي حال ان first يتم اختيار اول Tag أو Element فإن بإمكانك إختيار آخر Tag بكتابة last … وإلى آخره

    وبكل بساطه يتم عمل تأثيرات رائعة جداً وبسهوله عن طريق استخدام مكتبة JQuery الرائعه



    وفي المقالة التالية سنقوم بعمل تطبيق مثال أكثر إحترافيه لنتعلم المزيد من استخدام JQuery

    حيث حالياً أقوم باستخدامها وتعلمها بشكل كبير في برامج تفاعليه بصفحات الويب وسيتم طرحها للاستفاده من اكوادها وطريقة عملها

    وخاصة كما هو مكتوب في مدونة الـ JQuery
    jQuery Blog

    Google Using jQuery

    وهذا ان دل فيدل على ان المكتبة رائعه وقويه في الاستخدام

    ولاي استفسارات ارحب بها واسأل الله تعالى ان يعيننا جميعاً على العلم النافع والعمل الصالح ...

    وإن أخطأت فمن نفسي ومن الشيطان وإن إصبت فمن الله وحده

    مع التحيه والتقدير …







  2. #2
    خبير JavaScript
    تاريخ التسجيل
    Jul 2002
    المشاركات
    2,920


    بارك الله فيك، وتقنية جي كويري جائت لتختصر الكثير من الحركيات، وتجعل لغة الجافا سكريبت، شبيهة في تعاملها بلغة التطبيقات، خصوصا ان بها مكتبات جاهزة من طرف المطورين، ويمكن لأي واحد له دراية بالجافا سكريبت ان يضيف اليها مكتبته او الخاصة
    شكرا لك مرة اخرى على الدرس المميز








  3. ما شاء الله درس جميل جدا

    يمكن الاعتماد عليها في مواقع الاستضافة لعرض مميزات الخطط .

    بالتوفيق ان شاء الله





    __________________
    ownersınnı
    ALdiraZi BLoOoG | Contact Me | lt.tl - shorten your URL

  4. #4


    اخي Zizwar أشكرك جزيلاً على إضافتك المتميزه كعادتك
    وكلامك الذي فيه من الدرر والمعلومات الرائعه بكل وضوح

    الاخ العزيز owner

    بالفعل يمكن الاعتماد بها بشكل جميل في مواقع الاستظافة خاصة لو تم استخدام mouseover() بدل click() مثل طريقة موقع Apple



    وألف تحيه وتقدير وألف شكر على التثبيت ...





    __________________
    سحابة الإسلام
    www.islamcloud.com

    موقعي الشخصي
    www.althari.ws

    سبحان الله وبحمده سبحان الله العظيم

  5. #5
    عضو فعال
    تاريخ التسجيل
    Apr 2006
    المشاركات
    1,362


    اشكراك بعنف
    بارك الله فيك وجزاك كل خير





    __________________
    Ramy

  6. #6
    عضو جديد
    تاريخ التسجيل
    May 2007
    المشاركات
    15


    شرح اكثر من رائع

    تقبل تحياتي ...






  7. #7


    Remano, delesibs

    اشكر لكم مروركم الرائع

    ونحن في الخدمه





    __________________
    سحابة الإسلام
    www.islamcloud.com

    موقعي الشخصي
    www.althari.ws

    سبحان الله وبحمده سبحان الله العظيم

  8. #8
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


    من أفضل مكتبات الـ Javascript على الإطلاق ،، شكراً لك .






  9. #9


    asaamas

    شكراً لك على مرورك وعلى تعليقك الجميل





    __________________
    سحابة الإسلام
    www.islamcloud.com

    موقعي الشخصي
    www.althari.ws

    سبحان الله وبحمده سبحان الله العظيم

  10. #10
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2007
    المشاركات
    2,105


    بارك الله فيك يالغالي






  11. #11


    الله يعافيك ويسلمك





    __________________
    سحابة الإسلام
    www.islamcloud.com

    موقعي الشخصي
    www.althari.ws

    سبحان الله وبحمده سبحان الله العظيم

  12. #12
    عضو نشيط
    تاريخ التسجيل
    Nov 2005
    المشاركات
    76


    مشكور ابو فارس

    عجبني اختيارك للـ dl






  13. #13


    مشكور ابو فارس

    عجبني اختيارك للـ dl
    شكراً لك أخوي -b7- على مرورك وعلى تعقيبك الجميل

    لمن لا يعرف dl هي Tag تستخدم في HTML أو XHTML عندما نريد استخدام قائمة تعريفية

    لمعرفة المزيد W3Schools - HTML <dl> tag





    __________________
    سحابة الإسلام
    www.islamcloud.com

    موقعي الشخصي
    www.althari.ws

    سبحان الله وبحمده سبحان الله العظيم

  14. #14
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


    لقد تعمقت قليلاً في تعلّم الـ jQuery ،، وبالفعل من أجمل ما رأيت .. حاولت تجريبها قبل فترة لكني أهملتها والآن عادت إلى الواجهة ،، أكرر شكري لك أخي العزيز أبو فارس





    التعديل الأخير تم بواسطة dev11 ; 10-01-2008 الساعة 03:13 AM

  15. #15
    عضو نشيط جدا
    تاريخ التسجيل
    May 2006
    المشاركات
    431


    يديك العافيه ابو فارس

    ابسالك سؤال

    اللحين عندنا هذا كود الحدث ينطلق مع الكليك

    كود:
    $("dt a").click(function(){
    $("dd").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    return false; 
    });
    كيف اعدله للماوس اوفر

    كود:
    $("dt a").mouseover(function(){
    $("dd").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    return false; 
    });
    هل هذا الكود صحيح ؟؟ ومافي اي تعديل ثاني ؟





    __________________
    --(B2ii (@) hotmail .com)--





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

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

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