编写自己的jQuery提示框(TIP)插件
为了方便以前没有接触过的学生,让我们回顾一下jQuery插件机制。
复制代码代码如下所示:
/ /添加检查和取消插件
JQuery.fn.extend({
检查:函数(){
返回this.each(函数(){ this.checked = true;});
},
取消:函数(){
返回this.each(函数(){ this.checked = false;});
}
});
使用插件
$(输入{复选框});
$(输入{类型=广播})。Uncheck();
事实上,jQuery插件非常简单。难怪jQuery插件到处都是。在我想变得复杂之前,我总是觉得写插件很深。我不知道我是否有同样的感觉。
出发前做需求分析(PS:是哥哥学软件工程生学费是作弊啊,不需求分析学费对不起啊,呵呵)。
其实,没有好的分析就是要做以下的效果:
弹出微信扫鼠标放上去时,微信太火了,老板做的网站上,所以哥哥写一个插件满足他,工资是上帝,给钱的工作,不要给我讲诚信,这宅男是参观注定的,不完整的。它很遥远。看看效果。
其他jQuery方法的使用也不一样:
复制代码代码如下所示:
$(函数(){())
var t = $(。威信)。提示({
标题:'wechat扫,
内容,
html:真的,
方向:底部的
});
T.bind({
鼠标悬停:函数(){
提示(显示);
},
Mouseout:函数(){
提示(隐藏);
}
});
});
查看可配置选项
复制代码代码如下所示:
违约期权:{
标题:
内容:,/内容
方向: / /流行的底部反转,相对于所选择的元素
HTML:false,是否允许HTML元素的内容
模板:弹出框模板
}
在高清晰度的结尾,没有代码感兴趣的外观,不感兴趣的Ctrl + C,Ctrl + V条
复制代码代码如下所示:
函数($){
函数(元素,选项){
This.init(元,选项);
}
tip.prototype = { {
构造函数:提示,
init:函数(元素,选项){
this.element = $(元);
this.options(this.defaultoptions,美元。延长= {},选项);
},
显示:函数(){
如果(!这个。提示){
this.tip = this.gettip();
var title= this.tip.find(H),
集装箱= this.tip.find(。提示容器);
设置标题
Title.text(这个选项。标题);
设置/内容
如果(此选项为html){
Container.html(这个选项中的内容);
{人}
Container.text(这个选项中的内容);
}
向身体添加提示
$();
尖位置计算
2 = this.element.offset VAR(leave的过去式和过去分词),
ETOP = this.element.offset(顶部),
ewidth = this.element.innerwidth(),
eheight = this.element.innerheight(),
tipw =这。提示{ 0 }。offsetwidth,
tiph =这。提示{ 0 }。offsetheight,
顶,
左;
开关(这个选项。方向){
case'top:
顶= ETOP - tiph;
左=(2 - tipw / 2)+ ewidth / 2;
This.tip.css({顶:顶,左:左});
打破;
case'left:
=(ETOP - tiph / 2)+ eheight / 2;
左= 2 - tipw;
This.tip.css({顶:顶,左:左});
打破;
case'bottom:
顶= ETOP + eheight;
左=(2 - tipw / 2)+ ewidth / 2;
This.tip.css({顶:顶,左:左});
打破;
case'right:
=(ETOP - tiph / 2)+ eheight / 2;
左= 2 + ewidth;
This.tip.css({顶:顶,左:左});
打破;
违约:
打破;
}
{人}
This.tip.css({显示:阻止});
}
},
隐藏:函数(){
This.getTip(),Css({显示:没有});
},
GetTip:函数(){
返回this.tip this.tip:$(这个选项。模板);
},
分离:函数(){
},
违约期权:{
标题,
内容,
方向:底部的,
HTML:false,
模板:
}
}
美元。fn.tip =功能(可选){
返回this.each(函数(){()
var = $(this),
数据e.data('tip),
选择类型的选项= = =对象选项;
如果(!数据)e.data(尖
如果(型){ }数据选项(选项= 'String');
});
}
}(窗口jQuery);
css样式
复制代码代码如下所示:
{。提示
位置:绝对;
填料:3px;
背景:# efefef;
边界半径:2px;
上图:0px;
左:0px;
}
tip.tip-inner {。
背景:# fafafb;
边境:1px solid # d8d8d8;
}
tip.tip-inner h3 {。
字体大小:14px;
填料:5px;
底部边框:1px solid # Eee;
}
tip.tip-inner.tip-container {。
填料:5px;
}
以上是本文的全部内容,对如何编写jQuery的朋友插件有了新的了解,希望大家能喜欢这个。