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);
转载于:https://blog.51cto.com/hehe1987/1880104