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);