脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-编写自己的jQuery提示框（Tip）插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
对jQuery相信很多同学和我一样平时都是拿来主义，没办法，要怪只能怪jquery太火了，各种插件基本能满足平时的要求。但是这毕竟不是长久之道，古人云：“授之以鱼，不如授之以渔”。
为了方便之前没有接触的同学，先来回顾一下jQuery的插件机制吧。
代码如下:
//添加check和uncheck插件
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
//插件的使用
$("input[tyPE=checkbox]").check();
$("input[type=radio]").uncheck();
其实jQuery的插件非常简单，怪不得jQuery插件满天飞，之前是我想复杂了，总觉得写插件是很高深的事情，不知道有没有同感的同学。
使用方法其他jQuery没什么不同：
代码如下:
$(function(){
VAR t = $(".weixin").Tip({
tITle:'微信扫一扫',
content:'<img src="img/weixin.jpg" width="160px" height="160px;">',
htML:true,
direction:'bottom'
});
t.bind({
mouseover:function(){
t.Tip("show");
},
mouseout:function() {
t.Tip("hide");
}
});
});
看一下可配置的选项吧
代码如下:
defaultOptions :{
title : '',//标题
content : '',//内容
direction : 'bottom',//弹出反向，相对于选中元素
html : false,//是否允许内容为html元素
template : '<p class="tip"><p class="tip-inner"><h3></h3><p class="tip-container"></p></p></p>'//弹出框模版
}
最后上高清无码源码有兴趣的看看，没兴趣的ctrl+c，ctrl+v吧
代码如下:
!function($){
var Tip = function(element, options){
this.init(element, options);
}
Tip.PRototype = {
constructor : Tip,
init : function(element, options){
this.element = $(element);
this.options = $.extend({},this.defaultOptions,options);
},
show : function() {
if (!this.tip) {
this.tip = this.getTip();
var title = this.tip.find("h3"),
container = this.tip.find(".tip-container");
//设置标题
title.text(this.options.title);
//设置内容
if (this.options.html) {
container.html(this.options.content);
} else {
container.text(this.options.content);
}
//添加tip到body
$("body").append(this.tip);
//计算tip的位置
var eLeft = this.element.offset().left,
eTop = this.element.offset().top,
eWidth = this.element.innerWidth(),
eHeight = this.element.innerHeight(),
tipw = this.tip[0].offsetWidth,
tiph = this.tip[0].offsetHeight,
top,
left;
switch(this.options.direction) {
case 'top' :
top = eTop - tiph;
left = (eLeft - tipw/2) + eWidth/2;
this.tip.css({top: top, left: left});
break;
case 'left' :
top = (eTop - tiph/2) + eHeight/2;
left = eLeft - tipw;
this.tip.css({top: top, left: left});
break;
case 'bottom' :
top = eTop + eHeight;
left = (eLeft - tipw/2) + eWidth/2;
this.tip.css({top: top, left: left});
break;
case 'right' :
top = (eTop - tiph/2) + eHeight/2;
left = eLeft + eWidth;
this.tip.css({top: top, left: left});
break;
default:
break;
}
} else {
this.tip.css({display:'block'});
}
},
hide : function() {
this.getTip().css({display:"none"});
},
getTip : function() {
return this.tip ? this.tip : $(this.options.template);
},
detach : function() {
},
defaultOptions :{
title : '',
content : '',
direction : 'bottom',
html : false,
template : '<p class="tip"><p class="tip-inner"><h3></h3><p class="tip-container"></p></p></p>'
}
}
$.fn.Tip = function(option) {
return this.each(function(){
var e = $(this),
data = e.data('tip'),
options = typeof option == "object" && option;
if (!data) e.data("tip", new Tip(this,options));
if (typeof option == 'string') data[option]();
});
}
}(window.jQuery);
css样式
代码如下:
.tip {
position: absolute;
padding: 3px;
background: #efefef;
border-radius: 2px;
top: 0px;
left: 0px;
}
.tip .tip-inner {
background: #fafafb;
border: 1px solid #d8d8d8;
}
.tip .tip-inner h3 {
font-Size: 14px;
padding: 5px;
border-bottom: 1px solid #eee;
}
.tip .tip-inner .tip-container {
padding: 5px;
}
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-编写自己的jQuery提示框（Tip）插件全部内容，希望文章能够帮你解决javascript代码实例教程-编写自己的jQuery提示框（Tip）插件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。