حالة الموضوع:
مغلق
  1. Read Onymus

    Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    [​IMG]

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

    اخواني اصدقائي معاكم اخوكم عبد الرحمن العتيبي

    [​IMG]

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

    في عالم الجيكوري

    ماهو الجيكوري jQuery ؟

    قد تعجبك بعض اضافات الجيكوري (jQuery) سواء في تمبلر صيف او اي مدونة و موقع تطويري و تكون هذي الاضافة من اكواد جيكوري.

    انصحك قبل لا تركب اي اضافة جيكوري .. ان تكون فاهم بالضبط ماهو الجيكوري ؟!

    الجيكوري هي مكتبة مفتوحة المصدر و مجانية مكتبة جافا سكربت خفيفة و تفاعلية مع اكواد الهتمل و أُطلقت هذه المكتبه في عام 2006.

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

    [​IMG]

    تمام تعرفنا عن الجيكوري

    طيب درسنا اليوم عمل قوائم بالجيكوري - jQuery Tabs

    في البداية

    دعونا نعمل صفحة هتمل جديده

    مثال

    [HTML CODE]<!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>شبكة عراق تيم - jQuery Tabs</title>[/HTML CODE]

    تمام الان نضيف اكواد css في الصفحه التي تخص القوائم

    مثال

    [CSS]p, h3 {margin-bottom:15px;}
    div {padding:10px;width:600px;background:#fff;}
    .tabs li {list-style:none;display:inline;}
    .tabs a {padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
    .tabs a.active {background:#fff;color:#000;}[/CSS]

    طيب نحتاج الان الى الجيكوري لبناء القوائم

    [JS]// الانتضار قبل تحميل القائمه
    $(document).ready(function(){
    $('ul.tabs').each(function(){
    // علامة التبويب النشطة وانها مرتبطة المحتوى
    var $active, $content, $links = $(this).find('a');
    // إذا تم العثور على أي تطابق استخدام الرابط الأول باعتباره علامة التبويب النشطة الأولى
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active[0].hash);
    // إخفاء المحتوى
    $links.not($active).each(function () {
    $(this.hash).hide();
    });
    // ربط معالج الحدث عند النقر فوق
    $(this).on('click', 'a', function(e){
    // جعل القائمه السابقه نشطه
    $active.removeClass('active');
    $content.hide();
    // تحديث المتغيرات مع وصلة ومحتوى جديد
    $active = $(this);
    $content = $(this.hash);
    // جعل القائمة نشطة اكتف
    $active.addClass('active');
    $content.show();
    e.preventDefault();
    });
    });
    });[/JS]

    طيب الان نحتاج الى استدعاء القوائم

    [HTML CODE]<ul class='tabs'>
    <li><a href='#tab1'>شبكة عراق تيم - Tab1</a></li>
    <li><a href='#tab2'>شبكة عراق تيم - Tab2</a></li>
    <li><a href='#tab3'>شبكة عراق تيم - Tab3</a></li>
    </ul>
    <div id='tab1'>
    <p>أهلا وسهلاً بكم في شبكة عراق تيم - Tab1</p>
    </div>
    <div id='tab2'>
    <p>أهلا وسهلاً بكم في شبكة عراق تيم - Tab2</p>
    </div>
    <div id='tab3'>
    <p>أهلا وسهلاً بكم في شبكة عراق تيم - Tab3</p>
    </div>[/HTML CODE]

    طيب الان نقوم ببناء الصفحه بشكل كامل

    [HTML CODE]<!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>شبكة عراق تيم - jQuery Tabs</title>
    <style type="text/css">
    html {padding:15px 15px 0;font-family:sans-serif;font-size:14px;}
    p, h3 {margin-bottom:15px;}
    div {padding:10px;width:600px;background:#fff;}
    .tabs li {list-style:none;display:inline;}
    .tabs a {padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
    .tabs a.active {background:#fff;color:#000;}
    </style>
    <script>
    // الانتضار قبل تحميل القائمه
    $(document).ready(function(){
    $('ul.tabs').each(function(){
    // علامة التبويب النشطة وانها مرتبطة المحتوى
    var $active, $content, $links = $(this).find('a');
    // إذا تم العثور على أي تطابق استخدام الرابط الأول باعتباره علامة التبويب النشطة الأولى
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active[0].hash);
    // إخفاء المحتوى
    $links.not($active).each(function () {
    $(this.hash).hide();
    });
    // ربط معالج الحدث عند النقر فوق
    $(this).on('click', 'a', function(e){
    // جعل القائمه السابقه نشطه
    $active.removeClass('active');
    $content.hide();
    // تحديث المتغيرات مع وصلة ومحتوى جديد
    $active = $(this);
    $content = $(this.hash);
    // جعل القائمة نشطة اكتف
    $active.addClass('active');
    $content.show();
    e.preventDefault();
    });
    });
    });
    </script>
    </head>
    <body>
    <ul class='tabs'>
    <li><a href='#tab1'>شبكة عراق تيم - Tab1</a></li>
    <li><a href='#tab2'>شبكة عراق تيم - Tab2</a></li>
    <li><a href='#tab3'>شبكة عراق تيم - Tab3</a></li>
    </ul>
    <div id='tab1'>
    <p>أهلا وسهلاً بكم في شبكة عراق تيم - Tab1</p>
    </div>
    <div id='tab2'>
    <p>أهلا وسهلاً بكم في شبكة عراق تيم - Tab2</p>
    </div>
    <div id='tab3'>
    <p>أهلا وسهلاً بكم في شبكة عراق تيم - Tab3</p>
    </div>
    </body>
    </html>[/HTML CODE]
    [​IMG]
    [​IMG]
    مثال العمل

    [​IMG]
    [​IMG]
     
    1 person likes this.
  2. E L I M O

    E L I M O .: مشرف اقسام ألانضمة :. مشرف

    الأنتساب:
    ‏4 سبتمبر 2014
    المشاركات:
    614
    الإعجابات المتلقاة:
    917
    نقاط الجائزة:
    93
    الجنس:
    ذكر
    الوظيفة:
    Etudiant
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

    شكرا لك ياغالي شرح مميز + منسق + متعوب عليه

    ابداعت في الطرح جزاك الله خيرا

    تستاهل كل خير تم الوشم باخماسي من بعد اذمك
     
  3. T H E P U N I S H E R

    T H E P U N I S H E R .:: فريــق الدعم الفني ::. مساعد مشرف

    الأنتساب:
    ‏29 مارس 2012
    المشاركات:
    316
    الإعجابات المتلقاة:
    1,241
    نقاط الجائزة:
    93
    الإقامة:
    Egypt (●̪•)
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    درس جميل جدآ اخي واصل في طرح المزيد

    من الدروس المفيده بالتوفيق
     
  4. Read Onymus

    Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    شكرآ لمروركم اخواني
     
  5. AlKOrtanY

    AlKOrtanY Developer

    الأنتساب:
    ‏24 مايو 2012
    المشاركات:
    57
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    تسلم أخي طرح جميل

    ربي يعطيك الف عافيه
     
  6. Gaza-Dz

    Gaza-Dz Support - Iq-Team

    الأنتساب:
    ‏26 مايو 2013
    المشاركات:
    1,821
    الإعجابات المتلقاة:
    87
    نقاط الجائزة:
    48
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:
    DZ
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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


    مشاء الله عليك اخي الغالي درس في القمة
    نتمي مواصلة ابداعك وتميزك معنا
    موضوع يستحق 5 نجــــوم +لايك +
    ماذا تعتقد في مشاركة Read Onymus؟يعجبني ويستحق التقييم


    تقبل تحياتي أخي كلكم مبدعين في المنتدي
    سلامي وتقديري لك
    .......
     
  7. اوجاع

    اوجاع موقوف لمخالفة الشروط

    الأنتساب:
    ‏28 سبتمبر 2015
    المشاركات:
    185
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    18
    المخالفات
    3
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    وعليكم السلام يعطيك العافيه اخوي ,,,
     
  8. لوفي العراقي HACKER

    لوفي العراقي HACKER Developer

    الأنتساب:
    ‏3 أكتوبر 2015
    المشاركات:
    141
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    جيد <3
     
  9. برفسور العراق

    برفسور العراق Developer

    الأنتساب:
    ‏9 أكتوبر 2015
    المشاركات:
    101
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    18
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    استمر بالابداع
     
  10. آرْ بْيْ جْيْ ڪْرْڪْوْڪْ

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

    الأنتساب:
    ‏24 أغسطس 2015
    المشاركات:
    147
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

    درس جميل وشرح وافي **عشت
     
حالة الموضوع:
مغلق

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