دروس تلميحات مفيدة وملحقات jQuery مفيدة

تلميح الأداة هو عنصر رسومي شائع لواجهة المستخدم. يتم استخدامه مع المؤشر ، وعادة ما يكون مؤشر الماوس. يقوم المستخدم بتمرير المؤشر فوق عنصر ، دون النقر فوقه ، وقد يظهر تلميح أداة - "مربع تمرير" صغير به معلومات حول العنصر الذي يتم تحريكه فوقه.

لقد قمت بتجميع بعض البرامج التعليمية والإضافات jQuery لتلميحات الأدوات.

1. TinyTips - البرنامج المساعد jQuery خفيف الوزن لتلميحات الأدوات

TinyTips عبارة عن مكون إضافي jQuery خفيف الوزن للغاية يمنح القدرة على إضافة تلميحات الأدوات إلى أي عنصر تقريبًا على الصفحة. موثقة بدقة ومصممة ودية.

2. وضع علامات على الصور على نمط Flickr باستخدام jQuery

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

عرض | تحميل

3. تلميح مخصص Tooltip jQuery Plugin مع صور صفر

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

4. كيفية بناء التعليقات التوضيحية المرئية الجديدة باستخدام CSS3

لقد علمتنا ZURB كيفية بناء التعليقات التوضيحية المرئية الجديدة. لم يكن الحل معقدًا جدًا من الناحية الفنية. مع ملحوظة ، تبنوا مفهوم التدهور الرشيق: فهم يستفيدون من تقنيات CSS الجديدة التي تتحلل بشكل واضح إلى المتصفحات القديمة.

تجريبي

5. إظهار الروابط الخاصة بك كقائمة منسدلة مع Pluralink

يعد Pluralink مكونًا إضافيًا جافا سكريبت رائعًا لترتيب روابط متعددة في النص الخاص بك.

6. تأثير تحوم التدرج الرمادي باستخدام CSS و jQuery

يعتمد تأثير Greyscale Hover Effect مع CSS & jQuery على CSS Sprites وبضعة أسطر من jQuery ، ولكنه يتطلب القليل من الإعداد قبل أن يتم تنفيذه. لا يوصى به للمشاريع الكبيرة وربما يكون الأفضل لعرض قطع المحفظة.

7. احصل على نظرة عن قرب مع AnythingZoomer jQuery Plugin

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

تجريبي

8. أنشئ Content Rich Tooltip باستخدام JSON و jQuery

سيوضح هذا البرنامج التعليمي كيفية إنشاء تلميحات الأدوات التي يتم تشغيلها بواسطة jQuery ، مع سحب المعلومات من مصفوفة JSON.

تجريبي

9. استبدل "تلميح الأدوات الافتراضي" بـ Pretty (mb) Tooltip

(mb) Tooltip هو تلميح جميل لصفحة الويب الخاصة بك في jQuery.

تحميل

10. Captify يعرض تسميات توضيحية للصور الجميلة تظهر عند التمرير

Captify هو مكون إضافي لـ jQuery كتبه Brian Reavis لعرض تسميات توضيحية بسيطة وجميلة للصور تظهر عند التمرير. تم اختباره على Firefox و Chrome و Safari و Internet Explorer البائس. تم استلهام Captify من ImageCaptions ، وهو مكون إضافي لـ jQuery لعرض تسميات توضيحية مثل هذه.

11. معاينة الصور مع imgPreview jQuery Plugin

قام Peter Higgins بإنشاء Dojo Zoomer. وهي مقسمة إلى 3 لوحات. من خلال التمرير فوق الصورة على اللوحة اليسرى ، تعرض اللوحة اليمنى بشكل ديناميكي الجزء المقتطع من الصورة ، بحيث يمكنك التركيز بشكل صريح على جزء الصورة الرئيسية الذي يثير اهتمامك.

12. jQuery Javascript Image Magnifier ضمن GPL

JQZoom هو مكبر صور جافا سكريبت تم إنشاؤه في الجزء العلوي من إطار عمل jQuery javascript الشهير. jQzoom هو برنامج نصي رائع وسهل الاستخدام حقًا لتكبير ما تريد.

13. تلميحات أدوات شفافة بسيطة مع jQuery و CSS

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

تجريبي

14. Magic Toolbox - أدوات Javascript و Flash Image Zoom

قام Magic Toolbox بإنشاء أداتين مذهلتين لتكبير صورة جافا سكريبت (Magic Zoom و Magic Magnify). Magic Zoom هي أداة تكبير JavaScript. إنها أفضل طريقة لعرض الصور بتفاصيل مذهلة.

15. Prototip 2 - إنشاء تلميحات أدوات جميلة بسهولة

يسمح لك Prototip بإنشاء تلميحات أدوات بسيطة ومعقدة بسهولة باستخدام إطار عمل Prototype javascript.

تجريبي

16. أسهل تلميح ومعاينة الصورة باستخدام jQuery

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

تجريبي

17. Coda Style Popup Bubble Tooltips مع jQuery

Coda هي إحدى أدوات تطوير الويب الجديدة لأجهزة Mac - وهي مشهورة بين المصممين والمطورين.

18. يعرض Taggify منطقة الصورة القابلة للنقر تلميح الأدوات المنبثق

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

19. Unobtrosive Bubble Tooltips مع Javascript و CSS

تعد Bubble Tooltips طريقة سهلة لإضافة (عبر القليل من CSS وجافا سكريبت) تلميحات أدوات رائعة مع شكل بالون إلى أي صفحة ويب.

تجريبي

20. تلميحات الأدوات للداخل والخارج للنموذج الأولي والخطي

CoolTips هي تقنية استبدال تلميحات أدوات متصفح الويب JavaScript غير مزعجة وخفيفة الوزن.
يتم استخدام CoolTips لاستبدال تلميحات أدوات متصفح الويب التقليدية. تحصل تلميحات الأدوات على محتويات سمة العنوان ، لذا فهي غير مزعجة تمامًا. CoolTips هي فئة OO تعتمد على Prototype JS وأطر عمل script.aculo.us.

21. العناوين الحلوة ، تلميحات أدوات شفافة وباهتة

Sweet Titles Fading Tooptips ليست نسخة متقطعة من عناوين NICE ولا تحاول تحسين محاولة Dunstan المنقحة. وبالتأكيد لم يتم نسخه من أحد البرامج النصية المليئة بمعالج الأحداث من Dynamic Drive.

تجريبي

22. Prototip معظم الميزات تلميحات الأدوات للنموذج الأولي

يسمح لك Prototip بإنشاء تلميحات أدوات بسيطة ومعقدة بسهولة باستخدام إطار عمل Prototype javascript. إذا كنت تستخدم Scriptaculous أيضًا ، يمكنك إضافة بعض التأثيرات الرائعة إليها.

تجريبي

23. BoxOver DHTML / Javascript Lightweight Tooltips

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