1. Mr_Design

    Mr_Design Developer

    الأنتساب:
    ‏5 أكتوبر 2011
    المشاركات:
    34
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    EGYPT
    السلام عليكم ورحمة الله وبركاته

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

    الكثير منا لديه أفكار جديدة، وأفكار حصرية، يقف على تلك الأفكار لعدم وجود الإمكانيات التي تساعده في تطبيق تلك الأفكار ...

    صادفني العديد من أصدقائي، أنهم يحتاجون للسلايدر صور، أو سلايدر أخبار، او او او ... ولديهم فكرة ونظرة وتصميم معيّن ولكن امكانياتهم، أو الـ plugins الموجودة لا تفي بالغرض لما في خاطرهم تطبيقه.


    اليوم الدرس سهل وخفيف ولكن فائدته أكثر مما تتصوروا، فقط التركيز قليلا.

    ملاحظة: يوجد فيديو شرح للتطبيق.

    نتيجة العمل وأكواد العمل في هذا الدرس من خلال الرابط التالي:

    Slides lesson 1 - Traidnt - jsFiddle



    :: نبدأ على بركة الله عز وجل ::


    الملفات المطلوبة للعمل
    HTML Page : وهي الصفحة الرئيسية التي تحتوي على كود html.
    CSS : كود css خاص بالتنسيق سنقوم بكتابته.
    Jquery : ملف مكتبة الجي كويري.
    SlidesJS : ملف مكتبة سلايدر Slidesjs.

    الآن نقوم بإنشاء div ويجب أن يكون اسمه slide
    ملاحظة: يجب أن يكون اسمه slide.

    div.slide : هو عبارة عن العنصر الموجود في السلايدر، وهو العنصر المتحرك، أي كلما زدنا عنصر اسمه slide كلما زادت لدينا عناصر السلايدر.

    في هذا العنصر slide نقوم بإضافة أي محتوى نريده وبالتنسيق المراد، وبدون التقيد بأي شيء نهائيا​

    كما نلاحظ في الصورة السابقة، أنه في الـ slide قمت بإضافة ما أريد، كما يمكنكم إضافة كل ما يخطر ببالكم بما تحمل الكلمة من معنى.

    طبعا بعد تنسيق ما بداخل الـ slide بالكامل، هناك خصائص css يجب على العنصر slide أن يحصل عليها، وتكون هذه الخصائص هي width + height.

    أي بمعنى أنه على الأقل يجب أن يكون الكود كالتالي:​

    كود PHP:
    .slide{    width500px;    height250px;}

    كما يمكن أن يحصل على خصائص أضافية مهما نريد.

    الآن لتركيب مكتبة الـ slidesjs سنقوم بعمل بعض الأمور البسيطة ونضيف كم كود.

    الآن نضيف div ويجب أن يكون اسمه slides_container وهذا سيكون حاوي للـ slide كما بالصورة التالية:

    [​IMG]

    الآن العنصر slides_container يجب أن يأخذ خصائص ولا يمكن تغييرها نهائيا:

    كود PHP:
    .slides_container{    width/* عرض حسب التصميم، ويكون نفس عرض العنصر المتحرك */;    positionrelative;    overflowhidden;    displaynone;}

    الآن وصلنا لنتيجة جيدة، ولكن هناك بعض العناصر التي ستكون عشوائية وخارجية، مثل (زر السابق، وزر التالي، والأرقام...)

    لحل هذه المشكلة نقوم بإنشاء div نسميه كما نريد، دون التقيد باسم معيّن، قمت أنا بتسميته slides ليصبح بالشكل التالي:


    [​IMG]




    الآن من خصائص الـعنصر slides يجب أن يأخذ خاصية ولا يمكن نهائيا أن يعمل السلايدر إلا بها، كالشكل التالي:​

    كود PHP:
    .slides{    directionltr;}

    والـ slide يأخذ عكس الخاصية:​

    كود PHP:
    .slide{    directionrtl;}

    الآن نضع كود الـ js الخاص بالـ slidesjs، ويكون كالتالي:​

    كود PHP:
    $(function(){        $(".slides").slides();    });

    طبعا نضع اسم العنصر الذي يحوي جميع الأكواد والذي قمت أنا بتمسيته slides

    الآن سنرى الكود النهائي أصبح بالشكل التالي تماما:




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



    الفيديو :


    [YOUTUBE]7_tCYX8oREs[/YOUTUBE]


    الدرس منقول للآمانه


    )5:"​
     
  2. X444X TEAM

    X444X TEAM Developer

    الأنتساب:
    ‏30 يوليو 2012
    المشاركات:
    47
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    رد: حصري ولأول مرة على iq-team شرح عمل سلايدر على كيفك، وبكل الإمكانيات التي تريدها



    بارك الله فيك شرح وافي وكافي ​
     
  3. كونكورد

    كونكورد Developer

    الأنتساب:
    ‏25 يناير 2013
    المشاركات:
    16
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    رد: حصري ولأول مرة على iq-team شرح عمل سلايدر على كيفك، وبكل الإمكانيات التي تريدها

    يعطَيك ألَف عاَفيه آخَي ..​
     
  4. Тĥẻ GỌ∂FДТн€Ř

    Тĥẻ GỌ∂FДТн€Ř DeveloPer Plus

    الأنتساب:
    ‏15 يوليو 2012
    المشاركات:
    118
    الإعجابات المتلقاة:
    7
    نقاط الجائزة:
    18
    الإقامة:
    SaFŘỌTỌ
    رد: حصري ولأول مرة على iq-team شرح عمل سلايدر على كيفك، وبكل الإمكانيات التي تريدها

    مبدع بدون شك ... جزاك المولى خير الجزاء​
     
  5. آرْ بْيْ جْيْ ڪْرْڪْوْڪْ

    آرْ بْيْ جْيْ ڪْرْڪْوْڪْ DeveloPer Plus

    الأنتساب:
    ‏24 أغسطس 2015
    المشاركات:
    147
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    رد: حصري ولأول مرة على iq-team شرح عمل سلايدر على كيفك، وبكل الإمكانيات التي تريدها

    مبدع+استمر
     
  6. SerAno

    SerAno Developer

    الأنتساب:
    ‏19 ديسمبر 2014
    المشاركات:
    50
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    رد: حصري ولأول مرة على iq-team شرح عمل سلايدر على كيفك، وبكل الإمكانيات التي تريدها

    شكرا يعطيك العافيه
     

مشاركة هذه الصفحة