第一次写jquery插件(tooltip)

最新推荐文章于 2022-03-22 23:30:07 发布

xiangyunfeng123

最新推荐文章于 2022-03-22 23:30:07 发布

阅读量416

点赞数

本文链接：https://blog.csdn.net/xiangyunfeng123/article/details/8685643

版权

由于刚学js，所以很潦草，写的不是很明白的地方，希望大家吐槽。。

一、首先当时是引入jquery库

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

二、写好HTML代码，并给他写样子

html

<div id="box1" class="b1" title="this is a div1"></div>
<div id="box2" class="b1" title="this is a div2"></div>
<div id="box3" class="b1" title="this is a div3"></div>

css部分

.b1{ width:100px; height:100px; background:red; margin-top:10px;}
li{ margin:10px;}
#tooltip{ position:absolute; background:yellow; border:1px solid #333; padding:1px; margin-top:10px; margin-left:10px; display:none; }

三、现在算正式开始先插件了

1，插件首先有(function(){

})(jQuery)包裹形成闭包

2，插件代码

// JavaScript Document
(function($) {
  $.fn.extend({
	 "tooltip": function(options){
		var options = $.extend($.fn.tooltip.defaults, options);
	    return this.each(function(){
		    var jthis = $(this);
			jthis.mouseover(function(e){
				//var divref = jthis.data('divref');
				var Mytitle = jthis.attr('title');
				//alert(Mytitle);
				var divRef = jthis.data('divRef');
				if(!divRef){
					var FloatDiv = $("<div></div>");
					FloatDiv.append(Mytitle);
					$('body').append(FloatDiv);
					FloatDiv.css({
						'top': (e.pageY) + 'px',
						'left': (e.pageX) + 'px'
					 }).fadeIn();
					
					jthis.data('divRef', FloatDiv);
				}
				
			 })
			jthis.mousemove(function(e){
				var divRef = jthis.data('divRef');
				if(divRef)
				{
					divRef.css({
						'top': (e.pageY) + 'px',
						'left': (e.pageX) + 'px'
					  })
				}
			 })
			jthis.mouseout(function(e){
				var divRef = jthis.data('divRef');
				if(divRef)
				{
			      divRef.remove();
				  jthis.removeData('divRef');
				  
				}
			 })
		 })     
	  }
  }) 
  //$.fn.tooltip = 
  $.fn.tooltip.defaults = ({background: 'yellow', marginTop: '10px', marginLeft: '10px'});
})(jQuery)