我-在一些stackoverflow用户的帮助下-使用Jquery和通用Javascript开发了这个工具提示脚本，
<script type="text/javascript">
$(document).ready(function(){
/*OPCIONES DEL PLUGIN*/
var selector = '.disparador'; //elemento que activará el tooltip
var tooltip = '.miTooltip'; //elemento con el contenido HTML a mostrar por el tooltip
var tiempo_espera = 0; //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
var seguir_raton = true; //booleana que determina si el tooltip debe seguir el movimiento del raton o no
var ajuste_top = 0; //distancia vertical de ajuste
var ajuste_left = 0; //distancia vertical de ajuste
var fade_time = 300; //tiempo de la transición de mostrar/ocultar
/*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/
/* Detectar que el raton pasa por encima */
$(selector).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip= disp.next(tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
//alert(new_content);
tip.html(new_content);
if(typeof t != 'undefined'){
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
}).fadeIn(fade_time);
});
/* En caso de que se mueva el raton */
$(selector).bind('mousemove', function(e){
if(seguir_raton==true){
var disp = $(this);
var tip= $(this).next(tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
});
}
});
$(selector).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
});
});
</script>
开头有一些变量，它们都是可选的，因为它们都有初始值，但我希望能够成为init的变量，
根据这个教程，我需要这样做:
(function($){
$.fn.meliaTooltip = function(options){
// code will be added here.
}
})(jQuery);
但我不确定我是否必须在那里传递代码以及如何准确定义选项(假设选项是要用作变量的参数)
有人想推我一把吗?看起来应该是这样的:
(function ($) {
$.fn.meliaTooltip = function (options) {
var defaults = {
tooltip: '.miTooltip',
tiempo_espera: 0,
seguir_raton: true,
ajuste_top: 0,
ajuste_left: 0,
fade_time: 300
};
var opts = $.extend(defaults, options);
$(this).each(function() {
$(this).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip = disp.next(opts.tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = '<span class="left"></span ><span class="contenido">' + tip_text + '</span ><span class="right"></span ><span class="bottom"></span >';
//alert(new_content);
tip.html(new_content);
if (typeof t != 'undefined') {
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
}).fadeIn(opts.fade_time);
});
$(this).bind('mousemove', function(e) {
if (opts.seguir_raton) {
var disp = $(this);
var tip = $(this).next(opts.tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
});
}
});
$(this).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('" + opts.tooltip + "').fadeOut(" + opts.fade_time + ")", opts.tiempo_espera);
});
});
};
})(jQuery);
用法:
$("#selector").meliaTooltip({
tooltip: '.miTooltip',
fade_time: 300
});
试试这个
$.fn.meliaTooltip = function(options){
return this.each(function(){
/*OPCIONES DEL PLUGIN*/
//var selector = '.disparador'; //elemento que activará el tooltip
//You can take all the below settings from options param
var tooltip = '.miTooltip'; //elemento con el contenido HTML a mostrar por el tooltip
var tiempo_espera = 0; //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
var seguir_raton = true; //booleana que determina si el tooltip debe seguir el movimiento del raton o no
var ajuste_top = 0; //distancia vertical de ajuste
var ajuste_left = 0; //distancia vertical de ajuste
var fade_time = 300; //tiempo de la transición de mostrar/ocultar
/*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/
/* Detectar que el raton pasa por encima */
$(this).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip= disp.next(tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
//alert(new_content);
tip.html(new_content);
if(typeof t != 'undefined'){
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
}).fadeIn(fade_time);
});
/* En caso de que se mueva el raton */
$(this).bind('mousemove', function(e){
if(seguir_raton==true){
var disp = $(this);
var tip= $(this).next(tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
});
}
});
$(this).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
});
});
};
$("#testTooltip").meliaTooltip();