أداة التلميحات Tipsy

كتب يوم : 1 أغسطس 2014 - تصنيف : تصميم مواقع انترنت - مشاهدات 1

Tipsy هي اضافة jquery لإظهار التلميحات بشكل احترافي ، موضحة في الصورة التالية :

tipsy

tipsy-2

التلميحات هي المربع الذي يظهر عند مرور الماوس على أحد العناصر مثل الروابط أو الصور ويظهر فيها نص توضيحي مثل العنوان أو الوصف

بعد تحميل الإضافة ستجد مجلد اسمه src به ملفين jquery.tipsy.js و tispy.css

قم بإداراجهم في صفحة موقعك من خلال الأكواد التالية بين وسمي head :

<!-- Javascript - Jquery -- >
<script type='text/javascript' src='js/jquery.tipsy.js'></script>
<!-- CSS -->
<link rel='stylesheet' id='tipsy-css'  href='css/tipsy.css' type='text/css' media='all' />

 

ومن مميزات أداة Tipsy ما يلي :

1-  يمكنك اختيار مكان ظهور التلميح ( يمين – يسار – أعلى – أسفل )

كود الإستخدام الأساسي لتلميحات tipsy  :

/* يمكنك تعميم التلمحيات لكل الروابط مثلاً */
$('a').tipsy();

/* ويمكنك تخصيص الأداة لكل العناصر التي تحتوى على كلاس معين */
$('.example-1').tipsy();

/* أو يمكنك تخصيص الأداة لعنصر بإستخدام الآي دي  */
$('#example-1').tipsy();

( يمين – يسار – أعلى – أسفل ) كما يمكن دمج مكانين مثل ( أعلى اليمين – أعلى اليسار – أسفل اليمين – أسفل اليسار ) إضافة إلى الإفتراضي ( أسفل الوسط )

استخدم الكود التالي لتحدد مكان ظهور التلميح :

/* استبدال .item بأي عنصر تريد */
$('.item').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se
//  n = الجنوب  - الأسفل ( وسط )
// nw = جنوب غرب - أسفل اليسار
// ne = جنوب شرق - أسفل اليمين
// w = غرب - يسار
// e =  شرق - يمين
// sw = شمال غرب - أعلى اليسار
// s = الشمال - الأعلى ( وسط )
// se = شمال شرق - أعلى اليمن

 

tipsy-gravity

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

ولتطبيق الظهور الحر للتلميحات استخدم الكود التالي :

/* استبدل .item بأي عنصر تريد */
$('.item').tipsy({gravity: $.fn.tipsy.autoNS});

 

2- الظهور والإختفاء التدريجي :

ومن الميزات أيضا أنه بإمكانك إضافة خاصية الظهور والإختفاء التدريجي للتلميح :

/* استبدل .item بأي عنصر تريد */
$('.item').tipsy({fade: true});

كما يمكنك تخصيص مدة الظهور ومدة الإختفاء للتلميح ( سواء كان تدريجيا أو عاديا )  ، إستخدم الكود التالي واقرأ التعليقات بعناية :

$('.item').tipsy({delayIn: 500, delayOut: 1000});
// delayIn : المدة التي سيظهر التلميح بعدها
// delayOut : المدة التي سيقضيها التلميح قبل الإختفاء

 

3- ميزة التحديث الفوري :

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

4- الفورم :

يمكن تطبيق تلميحات Tipsy على الفورم أيضاً عند الضغط على عنصر مثل حقل النص أو مربع النص .. .الخ ، الكود التالي :

كود الفورم أولاً

<form id="form-test" class="test">
    <select name="title" original-title="Select title">
      <option>Mr</option>
      <option>Mrs</option>
      <option>Miss</option>
    </select><br>
    <input type="text" name="forename" original-title="Enter forename"><br>
    <input type="text" name="surname" original-title="Enter surname"><br>
    <textarea name="message" style="margin:0" original-title="Enter your message"></textarea>
  </form>

لاحظ أننا استخدمنا  original-title لعناصر الفورم input / textarea / select

كود إظهار التلميحات لعناصر الفورم :

<!-- ضع هذا الكود أسفل الفورم مباشرة  -->
<script>
 $(function() {
    $('#form-test [title]').tipsy({trigger: 'focus', gravity: 'w'});
  });
</script>

 

5- ملخص خيارات إضافة Tipsy : 

هناك العديد من المزايا الأخرى لإضافة التلميحات Tipsy قمنا بتغطية أهما في الأربع نقاط السابقة ، إليك كود شامل لكل خيارات إضافة Tipsy :

$.fn.tipsy.defaults = {
    delayIn: 0,      //الوقت قبل عرض التلميح بالمللي ثانية
    delayOut: 0,     // الوقت قبل اخفاء التلميح بالمللي ثانية
    fade: false,     // تمكين الظهور والإخفاء التدريجي 
    fallback: '',    //  نص يستخدم في حال عدم وجود تلميح
    gravity: 'n',    // مكان ظهور التلميح
    html: false,     // تمكين وتعطيل استخدام html في التلميح
    live: false,     // دعم التحديث التلقائي للتلميحات 
    offset: 0,       // المسافة بين العنصر والتلميحات
    opacity: 0.8,    // درجة شفافية التلميحات
    title: 'title',  // الخاصية التي سيعتمد عليها العنصر لقراءة التلميح 
    trigger: 'hover' // حدث اظهار التلميح ( مرور الفأرة / التركيز على العنصر - مثل حقل النص - / يدوي )
};

 

ملحوظة : يمكنك تغيير ألوان التمليحات من خلال التعديل على ملف tipsy.css

أتمنى أن تكون الإضافة مفيدة لك .

فضلاً .. إذا أعجبتك التدوينة لا تنسى أن تضغط اعجاب ومشاركة 🙂