如何编写通用jquery函数来显示工具提示

我正在使用coda风格的jquery插件来显示气球工具提示。这里是链接：http://www.uhleeka.com/blog/2009/11/bubbletip/如何编写通用jquery函数来显示工具提示

我写了这个jquery显示气球工具提示单击元素。

这是我在做这个ID的，但我怎么能做到这一点使用类名。我怎么能insted每个id的写作bubbletip函数我怎么能写单（常用）jquery函数来应用bubbletip。

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#fee').bubbletip($('#tip1_focusblur'), { 
       deltaDirection: 'right', 
       bindShow: 'click', 
       bindHide: 'blur' 
      }); 



      $('#price').bubbletip($('#tip2_focusblur'), { 
       deltaDirection: 'right', 
       bindShow: 'click', 
       bindHide: 'blur' 
      }); 

    }); 
</script> 

<p>Input box 1<input type="text" id="fee" value="focus me!" /></p> 

<div id="tip1_focusblur" style="display:none; max-width:330px;"> 
    <pre class="tip"> 
     This is the div where help can be display. 
    </pre> 
</div> 

<p>Input box 2<input type="text" id="price" value="focus me!" /></p> 

<div id="tip2_focusblur" style="display:none; max-width:330px;"> 
    <pre class="tip"> 
     This is the div where help can be display. 
    </pre> 
</div>

编辑： 我发现soloution：每作为JofryHS建议，我已经尝试这种解决方案。

这是一个很好的解决方案吗？

的Javascript：

$(document).ready(function() { 
    var count = 0; 
     $('[data-bubble]').each(function() {  
      count++; 
      var data = $(this).attr('data-bubble'); 
      $(this).parent().append($('<div class="bubble" id="bubble_'+ count+ '">' + data + '</div>')); 
      $(this).bubbletip('#bubble_'+count, { 
       deltaDirection: 'right', 
       bindShow: 'click', 
       bindHide: 'blur' 
      }); 
     }); 
});

HTML：

<input type="text" data-bubble="This is Test text 1" value="focus me!" /> 

<input type="text" data-bubble="This is Test text 2" value="focus me!" />

来源

2013-09-24 Kango

我已经找到了解决方案。看我的编辑 – Kango

一个方法是创建一个全局函数，并调用它每次你需要它

function bubbleTip(obj1,obj2){ 
    $('#'+obj1).bubbletip($('#'+obj2), { 
      deltaDirection: 'right', 
      bindShow: 'click', 
      bindHide: 'blur' 
     }); 
}

时间，并呼吁与功能您想显示工具提示的参数。

$(function(){ //shorthand for document.ready 
    bubbleTip('fee','tip1_focusblur'); 
    bubbleTip('price','tip2_focusblur'); 
});

来源

2013-09-24 04:51:35 bipen

您可以使用HTML data-属性自动调用bubbletip。

HTML +脚本（未经测试）：

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('[data-bubble!=""]').each(function() { 
       var target = $(this).data('bubble'); 
       $(this).bubbletip($('#' + target), { 
        deltaDirection: 'right', 
        bindShow: 'click', 
        bindHide: 'blur' 
       }) 
      }); 
    }); 
</script> 

<p>Input box 1<input type="text" id="fee" data-bubble="tip1_focusblur" value="focus me!" /></p> 

<div id="tip1_focusblur" style="display:none; max-width:330px;"> 
    <pre class="tip"> 
     This is the div where help can be display. 
    </pre> 
</div> 

<p>Input box 2<input type="text" id="price" data-bubble="tip2_focusblur" value="focus me!" /></p> 

<div id="tip2_focusblur" style="display:none; max-width:330px;"> 
    <pre class="tip"> 
     This is the div where help can be display. 
    </pre> 
</div>

只要你有上面的脚本片段，在你的HTML标记任何地方，你可以把data-bubble与目标，它会自动绑定到你的bubbletip。

类似的问题：Jquery select all elements that have $jquery.data()

jQuery data

来源

2013-09-24 04:58:26 JofryHS

我找到了解决方案。看我的编辑 – Kango

如何编写通用jquery函数来显示工具提示

回答

相关问题