1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
  2. الملاحظات
    عزيزي زائر تم اطلاق الموقع الرسمي لبرنامج الاختراق Spy-Note
    إستبعاد الملاحظة
  3. الملاحظات
    عزيزي زائر حصرياً : التقنيات النهائية لإصتياد المواقع المٌصابة بثغرات الحقن يدوياً وألياً متابعة الموضوع
    إستبعاد الملاحظة
حالة الموضوع:
مغلق
  1. Read Onymus
    rank
    Developer

    عضو منذ:
    ‏27 أغسطس 2012
    عدد المشاركات:
    40
    الإعجابات المتلقاة:
    7
    نقاط الجائزة:
    30
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Perl
    [​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
    V • I • P

    عضو منذ:
    ‏4 سبتمبر 2014
    عدد المشاركات:
    588
    الإعجابات المتلقاة:
    915
    نقاط الجائزة:
    215
    الجنس:
    ذكر
    الوظيفة:
    Etudiant
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    C++
    Facebook:
    YouTube:
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

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

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

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

    عضو منذ:
    ‏29 مارس 2012
    عدد المشاركات:
    300
    الإعجابات المتلقاة:
    1,252
    نقاط الجائزة:
    516
    الإقامة:
    Egypt (●̪•)
    نظام التشغيل:
    windows 8.1
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

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

    عضو منذ:
    ‏27 أغسطس 2012
    عدد المشاركات:
    40
    الإعجابات المتلقاة:
    7
    نقاط الجائزة:
    30
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Perl
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

    عضو منذ:
    ‏24 مايو 2012
    عدد المشاركات:
    52
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    نظام التشغيل:
    Linux
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

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

    عضو منذ:
    ‏26 مايو 2013
    عدد المشاركات:
    1,630
    الإعجابات المتلقاة:
    110
    نقاط الجائزة:
    505
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:
    DZ
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Visual Basic
    Facebook:
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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


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


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

    عضو منذ:
    ‏28 سبتمبر 2015
    عدد المشاركات:
    179
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    50
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Perl
    Facebook:
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

    عضو منذ:
    ‏3 أكتوبر 2015
    عدد المشاركات:
    120
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    40
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Visual Basic
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

    عضو منذ:
    ‏9 أكتوبر 2015
    عدد المشاركات:
    101
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    50
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Perl
    YouTube:
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

    عضو منذ:
    ‏24 أغسطس 2015
    عدد المشاركات:
    140
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    40
    نظام التشغيل:
    windows 8
    اللغة البرمجية:
    Visual Basic
    رد: درس عمل قوائم بالجيكوري - jQuery Tabs

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

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

جاري تحميل الصفحة...