index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery插件入门开发</title>
<style>
body{font-family: "Microsoft YaHei", 微软雅黑, 宋体;}
.common_text{text-align: center;font-size: 26px;margin-top: 300px;cursor: pointer;font-weight: bold;}
.btn-cont{text-align: center;margin-top: 10px;}
.btn-cont>button{margin: 0 0 0 10px;}
</style>
<link rel="stylesheet" type="text/css" href="./css/jquery.mytips.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div class="common_text" title="一个WEB前端技术分享网站，里面有我自己在工作中学习和应用的内容，也有从其他网站翻译过来的案例">鼠标移过来</div>
<div class="btn-cont">
<button class="btn-changecolor">改变背景颜色</button>
<button class="btn-showtips">显示</button>
<button class="btn-hidetips">隐藏</button>
</div>
</body>
<script type="text/javascript" src="./js/jquery.mytips.js"></script>
<script type="text/javascript">
// 初始化插件
$(".common_text").myToolTip({"background-color":"black"});
$(".btn-changecolor").click(function(){
$(".common_text").myToolTip({"background-color":"#F00"});
});
$(".btn-showtips").click(function(){
$(".common_text").myToolTip("show");
});
$(".btn-hidetips").click(function(){
$(".common_text").myToolTip("hide");
});
</script>
</html>jquery.mytips.js
/*
* 一个基于jQuery插件开发最佳实践方法写的简单插件
*/
(function($){
$.fn.myToolTip = function(options) {
// 插件默认配置项
var defaults = {
'direction': 'top',
'background-color': 'black'
};
var opts = $.extend({}, defaults, options);
var methods = {
// 插件初始化方法
init: function(options) {
var $el = $(this);
var $tip = $el.data("myTip");
if($tip){
// 当插件已存在则重置样式
$tip.css({
"backgroundColor":opts["background-color"]
}).find(".triangle").css({
"borderColor":opts["background-color"]+" transparent transparent transparent"
});
return $tip;
};
var pos = $.extend({}, $el.offset(), {
width: this.offsetWidth,
height: this.offsetHeight
});
// 插件初始化
$tip = $('<div class="my_tip_box"><div class="my_tip_inner">'+$el.attr("title")+'</div><span class="triangle"></span></div>').appendTo(document.body);
// 迁移原来的title至data-title
$el.attr("data-title",$el.attr("title")).removeAttr("title");
$tip.css({
"left":(pos.left + pos.width/2 - $tip.width()/2)+"px",
"top":(pos.top - pos.height/2 - $tip.height())+"px",
"backgroundColor":opts["background-color"]
}).find(".triangle").css({
"borderColor":opts["background-color"]+" transparent transparent transparent"
});
// 绑定元素的hover事件
$el.hover(function(){
$tip.show();
},function(){
$tip.hide();
});
$el.data("myTip",$tip);
return $el;
},
show: function() {
var $el = $(this);
var $tip = $el.data("myTip");
$tip.show();
},
hide: function() {
var $el = $(this);
var $tip = $el.data("myTip");
$tip.hide();
},
};
return this.each(function(index) {
// this keyword is DOM Element
var $this = $(this);
if (methods[options]) {
return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof options === 'object' || !options) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.myPlugin');
}
});
}
})(jQuery);