e107365
پنج شنبه 04 اسفند 1390, 17:02 عصر
سلام.
مطمئنن شما هم در برخی پروژه هاتون خواستین که تمامی ویژگی های یک اینترفیس باحال رو داشته باشید اما به دلیل بالا بودن حجم برخی پلاگین های جی کوئری کمی تأمل کرده اید.
تول تیپ (Tooltip) یکی از اون اجزاء است.
امروز با 12 خط کد ساده این جزء رو برنامه نویسی می کنیم:
ابتدا یک المان رو به بدنه می چسبانیم تا در هنگام نیاز در موقعیت مناسب نشان دهیم، این همان تولتیپ خواهد بود:
$('body').prepend('<div class="tooltip"><p></p><div class="tt_arrow"></div></div>');
سپس برخی متغییر ها را تعریف می کنیم، از جمله متغییر انتخاب المان تولتیپ:
var tt = $('div.tooltip'), btn, t, b, y, x;
حالا متود hover را برای نشان دادن تولتیپ به کار می گیریم، فرض می کنیم که کلاس ایجاد تولتیپ "tooltip" باشد در این صورت متود hover بر روی این کلاس فراخوانی می شود:
$('.tooltip').hover(function() {
btn = $(this);
tt.children('p').text(btn.attr('title'));
btn.attr('title', '');
t = Math.floor(tt.outerWidth(true)/2);
b = Math.floor(btn.outerWidth(true)/2);
y = (btn.offset().top-30);
x = (btn.offset().left-(t-b));
tt.css({'top': y+'px', 'left': x+'px', 'display': 'block'});
}, function() { tt.hide(); btn.attr('title', tt.children('p').text()); });
همه چیز مشخص است.
متغییرهای t,b,x,y به منظور محاسبه موقعیت تولتیپ می باشند و در خط پس از آن tt یعنی همان تولتیپ بر اساس موقعیت بدست آمده از چپ و بالا موقعیت دهی می شود.
با خروج از روی المان نیز tt مخفی می شود و خاصیت title به جای خود بر می گردد.
(خاصیت title را در خط 6 خالی کردیم تا تولتیپ پیش فرض سیستم نشان داده نشود.)
حالا با سی اس اس کمی استایل می دهیم و نشان گر را ایجاد می کنیم:
div.tooltip{display:none;position:absolute;text-align:center;font-size:10px;line-height:normal;color:#fff;z-index:100000;opacity:.85;filter:alpha(opacity = 85)}
div.tooltip p{padding:6px 8px;background-color:#000;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}
div.tooltip div.tt_arrow{width:0;height:0;margin:0 auto;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;_border-left-color:white;_border-right-color:white;_filter:chroma(color=white)}
تمام شد.
مطمئنن شما هم در برخی پروژه هاتون خواستین که تمامی ویژگی های یک اینترفیس باحال رو داشته باشید اما به دلیل بالا بودن حجم برخی پلاگین های جی کوئری کمی تأمل کرده اید.
تول تیپ (Tooltip) یکی از اون اجزاء است.
امروز با 12 خط کد ساده این جزء رو برنامه نویسی می کنیم:
ابتدا یک المان رو به بدنه می چسبانیم تا در هنگام نیاز در موقعیت مناسب نشان دهیم، این همان تولتیپ خواهد بود:
$('body').prepend('<div class="tooltip"><p></p><div class="tt_arrow"></div></div>');
سپس برخی متغییر ها را تعریف می کنیم، از جمله متغییر انتخاب المان تولتیپ:
var tt = $('div.tooltip'), btn, t, b, y, x;
حالا متود hover را برای نشان دادن تولتیپ به کار می گیریم، فرض می کنیم که کلاس ایجاد تولتیپ "tooltip" باشد در این صورت متود hover بر روی این کلاس فراخوانی می شود:
$('.tooltip').hover(function() {
btn = $(this);
tt.children('p').text(btn.attr('title'));
btn.attr('title', '');
t = Math.floor(tt.outerWidth(true)/2);
b = Math.floor(btn.outerWidth(true)/2);
y = (btn.offset().top-30);
x = (btn.offset().left-(t-b));
tt.css({'top': y+'px', 'left': x+'px', 'display': 'block'});
}, function() { tt.hide(); btn.attr('title', tt.children('p').text()); });
همه چیز مشخص است.
متغییرهای t,b,x,y به منظور محاسبه موقعیت تولتیپ می باشند و در خط پس از آن tt یعنی همان تولتیپ بر اساس موقعیت بدست آمده از چپ و بالا موقعیت دهی می شود.
با خروج از روی المان نیز tt مخفی می شود و خاصیت title به جای خود بر می گردد.
(خاصیت title را در خط 6 خالی کردیم تا تولتیپ پیش فرض سیستم نشان داده نشود.)
حالا با سی اس اس کمی استایل می دهیم و نشان گر را ایجاد می کنیم:
div.tooltip{display:none;position:absolute;text-align:center;font-size:10px;line-height:normal;color:#fff;z-index:100000;opacity:.85;filter:alpha(opacity = 85)}
div.tooltip p{padding:6px 8px;background-color:#000;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}
div.tooltip div.tt_arrow{width:0;height:0;margin:0 auto;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;_border-left-color:white;_border-right-color:white;_filter:chroma(color=white)}
تمام شد.