当前位置:首页 > 日记 > 正文

编写自己的jQuery提示框(TIP)插件

编写自己的jQuery提示框(TIP)插件
对于jQuery,我相信很多学生都和我一样。他们通常提出教义。There's no way to blame. jQuery太热了,真是个奇迹。各种插件基本上能满足通常的要求,但这毕竟不是一个漫长的过程,古人:教它钓鱼,不教鱼。

为了方便以前没有接触过的学生,让我们回顾一下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的朋友插件有了新的了解,希望大家能喜欢这个。

相关文章

单词概述概述了单词技能的使用。

单词概述概述了单词技能的使用。

单词,技能,电脑软件,词汇概述 文字课程设置: 1、基本操作2。文本编辑3。表格制作4。图形混合 主要内容: 首先,开始单词和接口理解 两。基本操作(制作通知)(焦点)(焦点)1)输入和修改文本2)简单文档排版3)复制和移动操作4)查找和替换。 三。保存和退出字(键…

感伤非主流人格的非主流特征

感伤非主流人格的非主流特征

特征,非主流,感伤,人格,电脑软件,知道你在附近,自然会产生一种特殊的感觉,即使我看不到你。 我把我的空梦卖给你,因为你的眼睛变了。 如果你不抛弃我的渣渣,我愿意为你写你最喜欢的句子。 我也希望当我难过的时候,有一个人在我身后,即使TA一句话…

在JS方法中返回多个值的方法的摘要

在JS方法中返回多个值的方法的摘要

方法,多个,摘要,电脑软件,JS,在使用js编程时,有时需要在一种方法中返回两个或两个以上的数据,这可以通过多种方式实现: 1使用数组的方法如下所示: js函数返回多个值。 GetData()函数 { 变量名=新的数组(oec2003 返回的名称; } getnames()函数 { 变…

PHP获取数组中键值的最大数组项的

PHP获取数组中键值的最大数组项的

键值,索引,数组,组中,原始,本文演示了PHP获取数组中键值的最大数组项的索引值的方法,供大家参考,具体分析如下: 首先,问题: 最大值数组项的键值是从给定数组中获得的。 两。解决方案: * *创建2015-3-17 *由 * / $ ARR =阵列(' = > 9,杰克= > 3…

用ps实现图像自然融合的一种简单方

用ps实现图像自然融合的一种简单方

方法,图像,自然,简单,电脑软件,本教程是一个简单的方法介绍PS自然融合的图片给朋友。本教程是比较基础的,非常适合初学者学习,希望能对你有所帮助。 PS图象处理软件可以做很多的照片完美的融合在一起,过渡效果是非常好的。下面,和一个非常简单…

jQuery插件jsignature实现手工签名

jQuery插件jsignature实现手工签名

插件,手工,电脑软件,jQuery,jsignature,一个jQuery插件,帮助您创建一个签名,允许用户使用鼠标、手指或铅笔生成签名。 HTML jQuery 打电话jsignature很简单: $(函数(){()) $(#签名)的JSignature()。 }) 以上是本文的全部内容,希望大家能喜欢。…

CorelDRAW设计LOGO标志教程

CorelDRAW设计LOGO标志教程

教程,标志,电脑软件,CorelDRAW,LOGO,本教程介绍CorelDRAW设计标志的LO方法的朋友,使标志的教程,很好,推荐给喜欢的朋友来一起学习吧。 你知道,现在罗设计公司或网站罗,其中许多是第一个字母为企业设计他的LO,它有几个好处:第一,容易识别,所以很容易…

Word2007文档修订内容的打开和关闭

Word2007文档修订内容的打开和关闭

方法,教程,文档,内容,电脑软件,在Word2007中,您可以自定义状态栏添加一个指标告诉你如何修改或关闭状态,打开修改的情况下,你可以看到所有的变化,已经在文件中。当你关闭修订功能,您可以更改任何文件没有标记变化的内容。 打开修改 在审查上的…

课程介绍矢量图CorelDRAW中间点地

课程介绍矢量图CorelDRAW中间点地

矢量图,课程,地图,电脑软件,CorelDRAW,本教程介绍给朋友使用CorelDraw中点图转换的矢量图的方法。本教程是一门导论课程。很适合初学者学习。推荐学习加入。 本教程介绍了朋友在CorelDraw,点阵图矢量图的教程,比较基础,内容页是非常重要的,和朋…

HTML5API的电池状态简介

HTML5API的电池状态简介

状态,简介,电脑软件,HTML5API,本文主要介绍了在HTML5中显示电池状态的API的简介。它是由Mozilla设计的,特定设备和浏览器的支持可以通过测试来确定。 移动设备在网络流量中所占的份额越来越大,它所贡献的网络流量非常巨大。因此,对于移动设备,…

效果图PS的制作

效果图PS的制作

效果图,电脑软件,PS,本教程介绍画中画效果PS的朋友做一个图片,教程比较简单,很适合初学者学习,推荐,喜欢的朋友可以跟着教程学习 利用PS使画面画中画效果,如下图所示: 方法/步骤 1、启动PS图象处理软件软件,开好素材图片; 2,选择工具箱中的矩形;;选择…

大的用()在Javascipt处理字符串的方

大的用()在Javascipt处理字符串的方

方法,字符串,电脑软件,Javascipt,此方法创建一个用作超文本目标的HTML锚。 语法 string.anchor(anchorname) 下面是参数的详细信息: anchorname:定义锚的名称 返回值: 返回其锚标记的字符串。 实例uff1a Javascript字符串锚()方法 新字符串(Hello); …