مثال مسج. أمثلة بسيطة على البرامج النصية jQuery. مجموعة من البرامج النصية jQuery من البرامج النصية الترويجية Dimox jQuery

23.01.2024

منذ 10 سنوات عندما مسجلقد كان النظام البيئي للمتصفح في بداياته، وكان متنوعًا للغاية، وكان كل منتج من المنتجات الموجودة في ذلك الوقت يعاني بطريقته الخاصة من تعقيد إدارة عناصر DOM. كان الهدف الطموح الذي حدده مطورو jQuery لأنفسهم هو تطوير نهج عالمي لحل هذه المشكلات وإنشاء واجهة برمجة تطبيقات تعمل بشكل جيد في أي موقف.

بقدر ما تمكنوا من الحكم، ولكن بعد 10 سنوات من وجودها، تظل jQuery واحدة من مكتبات JavaScript الأكثر شعبية.

أصبحت JavaScript نفسها الآن منتجًا ناضجًا تمامًا، وموثقة جيدًا ومدعومة من قبل جميع المتصفحات الحديثة. أصبح مجتمع المتصفحات الحديث أيضًا أكثر توحيدًا، وفي معظم الحالات، يمكنك التأكد من أنه إذا تم عرض الصفحة بشكل صحيح في Crome، فستبدو كما هي في Firefox. يتم دعم querySelectors أيضًا في جميع المتصفحات الحديثة تقريبًا.

يبدو أن تاريخ تطوير jQuery يقترب من نهايته - لماذا يتم التحميل الزائد للصفحات وإهدار دورات المعالج الإضافية إذا كان من الممكن حل معظم المشكلات باستخدام أدوات اللغة القياسية؟ من ناحية أخرى، خلال هذه الفترة الطويلة من صناعة الكمبيوتر، تم تطوير عدد كبير من الحلول التي يمكن ببساطة أخذها واستخدامها هنا والآن.

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

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

multiscroll.js

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

jquery.email-autocomplete.js

يجب إدخال عناوين البريد الإلكتروني في كثير من الأحيان، وعلى الرغم من أن هذا يتكون من اثنتي عشرة حرفًا ونصف فقط، فغالبًا ما تكون هناك رغبة في تسريع هذه العملية. يحتوي jquery.email-autocomplete.js على قائمة خاصة به من مجالات خدمات البريد الإلكتروني الشائعة، والتي بناءً عليها يقدم الإكمال التلقائي للعناوين. يمكن للمستخدم قبول هذه المطالبة بالضغط على مفتاح Tab أو مفتاح السهم الأيمن، أو الاستمرار في الكتابة يدويًا. يعمل البرنامج الإضافي أيضًا بشكل جيد في الإصدارات المحمولة من الموقع. ومع ذلك، سيتعين عليك تعديل المكون الإضافي قليلاً حتى يبدأ العمل مع خدمات البريد الإلكتروني المحلية.


tinyDatePicker

يحزم هذا البرنامج المساعد الكثير من الميزات في 5 كيلو بايت. التقويمات والمخططات وحجز السلع والخدمات - هذه ليست قائمة كاملة بالأماكن التي يمكنك استخدام tinyDatePicker فيها. سريع وخفيف الوزن وقابل للتطوير - ويمكن دمجه بسهولة في Bootstrap أو أي إطار عمل آخر.


ReadRemaining.js

الكثير منا يعاني دائمًا من ضيق الوقت. لقد كنت أحسد دائمًا الأشخاص الذين يعرفون كيفية إدارتها بشكل صحيح. من المحتمل أن يكون مؤلف المكون الإضافي ReadRemaining.js هو أحد هؤلاء. من آخر يمكن أن يفكر في إخراج توجد بجوار النص معلومات حول المدة التي ستستغرقها لقراءتها. وأثناء قيامك بالتمرير خلال النص، قم بإعادة حساب هذه المرة بناءً على سرعة القراءة لمستخدم معين.

مكون إضافي أصلي للغاية وأعتقد أن الزائرين سيحبونه إذا كان لديك الكثير من المواد النصية الطويلة.

أداة التلميح

الكلاسيكية تلميح الأدوات(تلميح) مع مجموعة واسعة من الوظائف والخيارات. يمكن أن يقع العنصر نفسه في أي مكان بالنسبة للعنصر الأصلي ويحتوي على أي عناصر. الشيء الرئيسي هو عدم المبالغة في استخدامه، واستخدامه فقط عندما يكون ذلك ضروريا حقا.

أديل

على الرغم من الاسم المشابه، فإن هذا البرنامج المساعد لا علاقة له بالمغنية أديل. يأتي اسمها من الكلمات الإنجليزية ADd-DELete (إضافة وحذف) ويعكس الغرض منها - إضافة أو إخفاء عناصر HTML بشكل ديناميكي، في المقام الأول عناصر النماذج. الضوابط مرنة وبديهية.

Chart.js

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


مسج الوجه اقتباس

مكون إضافي مثير للاهتمام يقوم بأمرين. أولاً، يدور كتل الاقتباس، موجود على الصفحة في اللحظة التي تصبح فيها الكتلة مرئية (تجذب الانتباه بشكل ممتاز). ثانيا، عندما تضغط على هذه الكتلة، تسليط الضوء على علامات الاقتباس في النص، والذي يسمح لك بالعثور عليه بسرعة في التدفق العام للمواد. اتضح أنه يمكن جعل الاقتباسات مسلية أيضًا!

أماكن ألغوليا

سريع البحث مع الإكمال التلقائي للعناوين البريدية والمدن والطرقوكل ما يتعلق بالمواقع حول العالم بفضل التكامل مع قاعدة بيانات OpenStreetMap. مكون إضافي مفيد جدًا للمتاجر عبر الإنترنت.

إخفاءالبحث

بسيطة ولكنها وظيفية البرنامج المساعد للبحث المباشر. يمكن البحث بناءً على معايير مختلفة، وتنفيذ إجراءات معينة بعد العثور على البيانات المطلوبة، وغير ذلك الكثير.

قطارة التوقيت

هناك عدد كبير من الحلول الملائمة للدخول إلى نقطة زمنية محددة. ومع ذلك، يبرز Timedropper من بينها بسبب بساطته وسهولة تشغيله. تغيير الساعات والدقائقهذا اللسان المضحك يجعله مريحًا حقًا. لديها العديد من خيارات التخصيص مثل: تنسيق الوقت (12 أو 24 ساعة)ولون القرص والاختبار والخلفية بالإضافة إلى القدرة على تغيير الساعات والدقائق باستخدام عجلة الماوس. بالمناسبة، هناك مكون إضافي مماثل لتحديد التاريخ.

لوري

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

العملةFormatter.js

نص بسيط للغاية وصغير يؤدي عرض القيم الرقمية بالتنسيق النقدي. إضافة نقاط ومسافات للأرقام المنفصلة ورمز العملة. يدعم 155 عملة عالمية.

Shave.js

جافا سكريبت، أيّ سوف تقليم النص بدقة، والتي لا تتناسب مع حاوية ذات ارتفاع معين. يستغرق الأمر 1.5 كيلو بايت فقط ولا يتطلب مكتبات خارجية.

مسج خط الرسم البياني

مكتبة الرسوم البيانيةأنواع مختلفة وكمية كبيرة جدًا من البيانات الأولية. مكتوب بلغة HTML/CSS/JSومع ذلك، هناك إصدار يعتمد على Angular.js

جدار حر

جميلة بشكل لا يصدق البرنامج المساعد jQuery لإنشاء واجهة مبلطةفي مجموعة متنوعة من الأنماط: Windows Metro، وPinterest، والأنماط المسطحة العادية أو الهرمية، مع عناصر قابلة للسحب ومضافة ديناميكيًا. يعمل بشكل رائع على متصفحات الأجهزة المحمولة وسطح المكتب، بما في ذلك IE8. أداة متعددة الاستخدامات حقًا!

RowGrid.js

البرنامج المساعد الصغير الذي يرتب الصور أو العناصر الأخرى في صفوف متساوية الارتفاع، واختيار الحجم والفجوات بينهما بحيث يتناسب كل صف تمامًا مع عرض النافذة. صحيح أن جميع الكائنات يجب أن تكون بنفس الارتفاع.

أشرطة الشرائح

أشرطة الشرائح يضيف قائمة أو شريطًا جانبيًا إلى صفحة موقع الويبوالتي تظهر أو تختفي بحركة انزلاقية عندما ينقر المؤشر على زر التحكم. تمت إعادة كتابة الإصدار 2 من هذا البرنامج المساعد بالكامل ويمكن أن يحتوي الآن على عدد غير محدود من العناصر المختلفة. يحتوي على واجهة برمجة تطبيقات كاملة، والقدرة على توصيل وظائف رد الاتصال الخاصة بك والاشتراك في الأحداث.


pagePiling.js

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

الرسوم المتحركة

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

ZooMove

لا أحب التكبير/التصغير الديناميكي للصور عند التمرير - أجد التأثير مزعجًا للغاية. ولكن إذا كنت تريد حقا استخدامه، فمن الأفضل أن تأخذ ZooMove لهذا الغرض. سلس جدا وسلس التحجيم والتمريرلن يوفر أي مكون إضافي آخر هذا.

ريبلريا

خفيف الوزن البرنامج المساعد تأثير تموج(على غرار التموجات على سطح الماء) على أي عنصر DOM: زر، عنصر DIV، صورة. من السهل جدًا إعدادها وإدارتها.

فليكيت

سريع، شريط تمرير متكيف ويتم التحكم فيه بالإيماءات. خارجيًا - عادي تمامًا، ولكن مع وثائق مكتوبة ومنظمة بعناية بشكل لا يصدق. واجهة برمجة التطبيقات (API) كاملة ومدروسة جيدًا.


غير المنزلق

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

Lightcase.js

متميز العرض المبسط مع الرسوم المتحركة CSS3. يعمل مع DIVs والصور والنص وكائنات الفلاش والفيديو وiframe. إنه لا يدعم jQuery 3 بعد، لكن المطورين يعدون بإصلاح ذلك في الإصدارات القادمة.


مسح الصور

رائع معرض الصورمع التحكم في كل من لوحة المفاتيح على متصفحات سطح المكتب والإيماءات على متصفحات الهاتف المحمول. من الممكن تعيين تأخير في تحميل الصور حتى يتم تحميل الصفحة نفسها بالكامل. وكل هذه المتعة يبلغ حجمها 14 كيلو بايت فقط.


يجرد

الشريط عبارة عن مربع مبسط يشغل مساحة معينة من الصفحة، مما لا يترك الصفحة نفسها مرئية جزئيًا فحسب، بل يمكن الوصول إليها أيضًا للتفاعل. بالإضافة إلى ذلك، يمكن أن يعمل في نفس الوقت كمنزلق. بالإضافة إلى ذلك، إلى جانب الصور، فهو يدعم أيضًا محتوى الفيديو من Youtube وVimeo.

القرص الدوار.js

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

فيديو.js

ربما أسهل طريقة إضافة فيديو الخلفية إلى الصفحةالموقع - وذلك لاستخدام البرنامج المساعد Vide.js. إنه يعمل على جميع المتصفحات الحديثة بدءًا من IE9+. في نظامي التشغيل iOS وAndroid، اللذين لا يقومان دائمًا بتشغيل فيديو في الخلفية، سيتم عرض إطار ثابت.


تثليث

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

LazeeMenu

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

شريط الويب

خط زاحف، على غرار تلك التي يمكن رؤيتها غالبًا على شاشة التلفزيون في النشرات الإخبارية - آخر الأحداث، وأسعار الأسهم، والطقس... أنت لا تعرف أبدًا ما يمكن نشره هناك! لذا، إذا كنت تحب هذه الطريقة في تقديم المعلومات، فضع مؤشر الويب في الاعتبار.

قناع الإدخال

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

سيؤدي هذا إلى تثبيت jQuery في دليلNode_modules. ستجد ضمنNode_modules/jquery/dist/ إصدارًا غير مضغوط، وإصدارًا مضغوطًا، وملف خريطة.

رابط تنزيل jQuery باستخدام Bower

يساعدك الإصدار الثاني على تحديث التعليمات البرمجية للتشغيل على jQuery 3.0 أو أعلى، بمجرد استخدام Migrate 1.x والترقية إلى jQuery 1.9 أو أعلى:

ربط الاختبار عبر المتصفحات مع jQuery

تأكد من اختبار صفحات الويب التي تستخدم jQuery في جميع المتصفحات التي تريد دعمها. يوفر الموقع أجهزة افتراضية لاختبار العديد من الإصدارات المختلفة من Internet Explorer. يمكن العثور على الإصدارات الأقدم من المتصفحات الأخرى على موقع oldversion.com.

ربط إصدارات ما قبل الإصدار من jQuery

يعمل فريق jQuery باستمرار على تحسين الكود. يؤدي كل التزام بـ Github repo إلى إنشاء نسخة قيد التنفيذ من الكود الذي نقوم بتحديثه على jQuery CDN. تكون هذه الإصدارات في بعض الأحيان غير مستقرة وغير مناسبة أبدًا لمواقع الإنتاج.نوصي باستخدامها لتحديد ما إذا كان الخلل قد تم إصلاحه بالفعل عند الإبلاغ عن الأخطاء في الإصدارات التي تم إصدارها، أو لمعرفة ما إذا كانت هناك أخطاء جديدة قد تم تقديمها.

الارتباط باستخدام jQuery مع CDN

ربط شبكات CDN الأخرى

تستضيف شبكات CDN التالية أيضًا إصدارات مضغوطة وغير مضغوطة من إصدارات jQuery. بدءًا من jQuery 1.9، يمكنهم أيضًا استضافة؛ تحقق من وثائق الموقع.

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

Humane.js

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

Impress.js

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

PDF.js

نص مثير للاهتمام للغاية. يتيح لك إنشاء مستند PDF من محتوى الصفحة باستخدام HTML5. الآن، لتنزيل مقال بصيغة PDF، لم تعد بحاجة إلى استخدام خدمات الطرف الثالث، حيث يمكن القيام بكل شيء، كما يقولون، "دون مغادرة صفحة الدفع"

مسج العبور

برنامج نصي JQuery متطور للغاية يمكنه فعل كل شيء تقريبًا بالكائنات. الضغط، التحرك، التمدد، الالتواء بأي شكل من الأشكال - الكثير من الخيارات للاستخدام. يستخدم آلية تحويل CSS3 ويزن القليل جدًا - فقط 2 كيلو بايت في شكل مضغوط.

ResponsiveSlides.js

أخبار جيدة لأولئك الذين يقومون بتحسين مواقعهم للجوال باستخدام @media. يعمل هذا المنزلق صغير الحجم مع جميع المتصفحات، بدءًا من IE6، والأجهزة المحمولة على جميع أنظمة التشغيل الحديثة، ويتيح لك تغيير حجم الصور لتناسب دقة شاشة الجهاز. يجب أن يكون لدى جميع مطوري الأجهزة المحمولة

Response.js

أداة البرنامج النصي لإنشاء مواقع ويب صديقة للجوال. يدعم HTML5، ويحتوي على مجموعة من الإعدادات لعمل مطور مريح.

نص لوحي

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

Scrollrama.js

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

Textualizer.js

يسمح لك بتطبيق رسوم متحركة متنوعة على كل حرف على الصفحة حرفيًا. قابل للتخصيص بدرجة كبيرة، وتوافق جيد عبر المتصفحات، وخفيف الوزن، ومكون إضافي لطيف بما يكفي لإضافة القليل من الفوضى "الإبداعية" إلى صفحتك

لزجة

برنامج نصي جيد يسمح لك بجعل أي عنصر في الصفحة مرئيًا دائمًا، على سبيل المثال، عند التمرير لأسفل، ستظل القائمة العلوية دائمًا في مكانها. يمكنك أن تفعل الشيء نفسه مع الشريط الجانبي أو أي عنصر آخر.

بالنسبة لأولئك الذين يشككون في استخدامه أم لا البرامج النصية JQueryسواء أبطأوا التحميل كثيرًا - فلا تقلق. الشيء الرئيسي هو عدم المبالغة في الجمال والوظيفة، وبعد ذلك سيكون كل شيء رائعًا بالتأكيد!

مع بزوغ فجر WEB 2.0، تم تطوير أطر عمل جافا سكريبت أيضًا، مما يسمح لمشرفي المواقع بإنشاء عناصر موقع ويب ديناميكية بشكل أسرع وأسهل بكثير. أحد هذه الأطر هو jQuery، الذي اكتسب شعبية هائلة بسبب بساطته وخفة وزنه بشكل لا يصدق. لذلك، أقدم انتباهكم إلى 10 نصوص jQuery الأكثر فائدة لتحسين واجهة موقع الويب الخاص بك.

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

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

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

جاليريا
وصف: Galleria عبارة عن معرض جافا سكريبت مكتوب بلغة jQuery. يقوم بتحميل الصور واحدة تلو الأخرى ويعرض صورًا مصغرة لها.
متى وأين تستخدم:لعرض صور فوتوغرافية لحدث أو منتج، على سبيل المثال.
البرنامج النصي، المثال، الوثائق

jTip
وصف:تم تنفيذ تلميحات الأدوات في jQuery.
متى وأين تستخدم:عندما تحتاج إلى تقديم مزيد من المعلومات حول كائن ما في سياق مقال أو تنفيذ تلميحات للمستخدم في نماذج الويب المختلفة.
البرنامج النصي، المثال، الوثائق
البرنامج المساعد ووردبريس

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

قائمة مسج الأكورديون
وصف:يسمح لك بإنشاء قوائم ديناميكية.
البرنامج النصي، المثال، الوثائق
البرنامج المساعد ووردبريس

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

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

jGrowl
وصف:يعرض الرسائل في المتصفح تمامًا مثل Growl على MacOSX
متى وأين تستخدم:إذا أبلغت المستخدم بإجراء ما، لكنك لا تريده أن يغادر الصفحة الحالية/يقوم بتحديثها. وهذه طريقة رائعة لتأكيد الإجراءات التي يقوم بها المستخدم، مثل التسجيل. يمكنك أيضًا استخدام jGrowl في المتاجر المختلفة، وما إلى ذلك. لتأكيد إضافة عنصر إلى سلة التسوق الخاصة بك أو تأكيد المعاملة.
البرنامج النصي، المثال، الوثائق

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

المزايا :

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

قد يستغرق عدة أيام. ويمكنك تثبيت وتكوين مكون إضافي جاهز في بضع دقائق. جافا سكريبتوعلى هذا الأساس فإن كل من يقوم بتطوير البرامج النصية عليه

. والهدف من هذه الفئة هو تعليمك كيفية الاستخدام، وكذلك إظهار أمثلة للاستخدام، على سبيل المثال، من ممارستي الخاصة.

بعد قراءة المقالات على jQuery، سوف تتعلم:

1) كيفية التثبيت . $() 2) ما هي الوظيفة

خامسا .

3) كيفية اختيار العناصر في .

4) كيفية العمل مع أخذ العينات على .

5) كيفية إضافة وإزالة العناصر في .

6) كيفية معالجة الأحداث على .

7) كيف يتم عمل الرسوم المتحركة على ملفات .

8) كيفية تكبير الصور .

9) كيفية إنشاء زر "العودة إلى الأعلى" بسلاسة على .

10) كيفية تحميل الملفات ديناميكيًا إلى الخادم.

11) كيف يتم التخطيط التكيفي على .

12) كيفية إرسال طلبات غير متزامنة إلى 13) كيفية الإرسالاياكس الاستعلامات باستخدام الأساليب$.post() و

$.get() 14) كيف نفعلأزرار الاختيار على شكل شريط تمرير

على . 15) كيفية تركيب المنزلق.

أملس 16) كيف نفعلأرشيف

باستخدام البرنامج المساعد ل.

17) كيفية القيام بجولة في الموقع . 18) كيف نفعل.

19) علامات تبويب جميلة على JQueryأرشيف

كيفية إنشاء التسميات التوضيحية على موقع على شبكة الانترنت 20) كيفية الإنشاءأرشيف

شريط التقدم الجميل 21) كيف نفعلأزرار الاختيار على شكل شريط تمرير

قفل النمط 22) كيفية إضافة مكبرات الصوت إلى موقع مع مكتبة.

دينامو.js 23) كيف نفعلالفيديو في الخلفية

باستخدام . 24) كيف نفعلأزرار الاختيار على شكل شريط تمرير

25) كيفية جعلها جميلة وفعالة شريط التمرير في JQuery.

26) كيف نفعل قائمة منسدلة لطيفةأزرار الاختيار على شكل شريط تمرير

27) كيف نفعل نافذة منبثقة جميلة باستخدام JQueryاستخدام WebUI-Popover.

28) كيف نفعل إشعارات جميلة باستخدام JQueryباستخدام البرنامج المساعد نوتي.

29) كيف نفعل قائمة منسدلة جميلة ذات تأثير مثير للاهتمامعلى CSSو .

30) كيف نفعل خلفية الجسيماتأزرار الاختيار على شكل شريط تمرير

31) كيف نفعل المقارنة التفاعلية بين صورتين باستخدام JQuery.

32) كيف نفعل شريط التمرير الدائري في مسج.

33) كيف نفعل السحب في JQuery.

34) كيفية عرض الوقت المنقضي منذ نشر المنشور، على .

35) كيفية الانسحاب أحرف خاصة في مسج.

36) كيف نفعل عداد العد التنازلي في JQuery.

37) كيف نفعل قائمة مخصصة باستخدام JQuery.

38) كيفية صنع الرسوم المتحركة عند تحميل الصفحةأزرار الاختيار على شكل شريط تمرير

40) كيف نفعل القائمة المنزلقة في JQuery.

41) مسج لايت جاليري- البرنامج المساعد لإنشاء المعارض.

42) كيفية التفاف عنصر في المتصفح أو تخطيط الجهازأزرار الاختيار على شكل شريط تمرير

43) كيف نفعل معرض جميل مع الفرز في JQuery.

44) كيف نفعل كائن ثلاثي الأبعاد تفاعلي باستخدام JQuery.

45) كيف نفعل نافذة منبثقة باستخدام JQuery.

46) كيفية عمل التمرير تأثير المنظر.

47) كيف نفعل قائمة همبرغرعلى CSS وJS. الجزء 1.

48) كيف نفعل قائمة همبرغرعلى CSS وJS. الجزء 2.

49) كيف نفعل المنبثقة انقر فوق البحث.

50) كيف نفعل التحقق من صحة نموذج jQuery.

51) كيف نفعل قناع إدخال الهاتف jQuery.

52) كيفية العمل مع مكتبة مسج.

53) كيفية العمل مع مكتبة واجهة المستخدم jQuery.

54) كيفية الاستخدام jQuery واجهة المستخدم المنزلق.

55) كيفية تطبيق القطعة منتقي بيانات واجهة المستخدم jQuery.

56) حول البرنامج المساعد لعلامة التبويب EasyTabs.

57) كيفية تخصيص شريط التمرير com.BxSlider.

58) كيفية وضع توقيت العد التنازلي لموقع الويب.

59) كيف نفعل نموذج AJAX بدون إعادة تحميل الصفحة.

60) كيفية الخلق تأثير النص المطبوع على موقع على شبكة الإنترنت.

61) باستخدام مثال حقيقي حول الرسوم المتحركة المتجهات SVG.

62) المرشحات في مسج.

63) كيفية الحصول على محدد في مسج.

64) كيفية التلاعب السمات في jQuery.

65) كيف يعملون أحداث ماوس jQuery.

66) كيف يعملون تأثيرات مسج.

67) كيفية القيام (جزء 1).

68) كيف نفعل نافذة منبثقة باستخدام jQuery(الجزء 2).

69) كيف نفعل التصفية حسب الحروف الأولى باستخدام jQuery.

70) كيف نفعل الرسوم المتحركة زر القائمة همبرغر.

71) كيف نفعل قائمة همبرغر سريعة الاستجابة.

72) كيف نفعل التصميم الأول للجوال.

73) كيف نفعل مرساة سلسة في مسج.

74) كيف نفعل انتقل الصفحة لأعلى.

75) كيفية عمل القطعة الأكورديون للمكتبة.