1. المٌقدمة الأولي :دورة إختبار ثغرات حقن قواعد البيانات SQLI الإحترافية لعام 2017 عام 2018
    تٌعد ثغرات حقن قواعد البينات الثغرة رقم واحد فى العالم والمصنفة تحت بند الإخطر
    والفريق التابع له بإختراق أكبر المواقع الصهيونية قرائة الموضوع
  2. المٌقدمة الثانية : دورة إختبار ثغرات حقن قواعد البيانات SQLI الإحترافية لعام 2017 عام 2018
    في هذه المٌثقدمة الثانية والأخيرة سوف نتعرف على قواعد علم حقن قواعد البيانات
    حتى يتثنى لنا علم يٌساعدنا على القيام بعمليات الحقن بالطرق الصحيحه قرائة الموضوع
  3. دورة كشف دمج والتلغيم حصريا على أرض عراق تيم(2017)
    بعد ماقمت بعمل دورة الكشف دمج والتلغيم وستكملت الدوره وتحتوي على 12 درس
    كانت دروس حصريا على عراق تيم وشرح واضح جدا ومفهوم الى المبتدأ والى المبدع قرائة الموضوع

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

الموضوع في 'قسم البرمجة العام' بواسطة Read Onymus, بتاريخ ‏16 أغسطس 2015.

كاتب الموضوع : Read Onymus المشاهدات : 397 الردود : 9 ‏16 أغسطس 2015
حالة الموضوع:
مغلق
  1. غير متصل

    Read Onymus
    rank
    Developer

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

    [​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
    عدد المشاركات:
    الإعجابات المتلقاة:
    915
    نقاط الجائزة:
    الجنس:
    ذكر
    الوظيفة:
    Etudiant

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

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

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

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

    تستاهل كل خير تم الوشم باخماسي من بعد اذمك
     


  3. غير متصل

    T H E P U N I S H E R .:: أداري أقسام التصميم والجرافيكس ::.
    مشرف

    عضو منذ:
    ‏29 مارس 2012
    عدد المشاركات:
    الإعجابات المتلقاة:
    1,279
    نقاط الجائزة:
    الإقامة:

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

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

    من الدروس المفيده بالتوفيق
     


  4. غير متصل

    Read Onymus
    rank
    Developer

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

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

    شكرآ لمروركم اخواني
     


  5. غير متصل

    AlKOrtanY
    rankrank
    Developer

    عضو منذ:
    ‏24 مايو 2012
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

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

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

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


  6. غير متصل

    Gaza-Dz
    مراقب عآم

    عضو منذ:
    ‏26 مايو 2013
    عدد المشاركات:
    الإعجابات المتلقاة:
    112
    نقاط الجائزة:
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:

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

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


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


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


  7. غير متصل

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

    عضو منذ:
    ‏28 سبتمبر 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

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

    وعليكم السلام يعطيك العافيه اخوي ,,,
     


  8. غير متصل

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

    عضو منذ:
    ‏3 أكتوبر 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

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

    جيد <3
     


  9. غير متصل

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

    عضو منذ:
    ‏9 أكتوبر 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:

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

    استمر بالابداع
     


  10. غير متصل

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

    عضو منذ:
    ‏24 أغسطس 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

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

    درس جميل وشرح وافي **عشت
     


حالة الموضوع:
مغلق

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

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