对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插件满天飞,之前是我想复杂了,总觉得写插件是很高深的事情,不知道有没有同感的同学。

动手之前先来做一下需求分析吧(ps:哥是学软件工程出生的学费很坑爹啊,不搞搞需求分析对不起学费啊,呵呵)。

其实也没啥好分析的就是做出如下效果:

鼠标放上去的时候弹出微信扫一扫,微信太火了,老板让网站上放一个,所以哥写了个插件满足一下他,发工资就是上帝,给钱干活,不要给我谈节操,it宅男都是三观尽毁,节操全无的。扯远了。看效果图吧。

使用方法其他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 : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'//弹出框模版
}

最后上高清无码源码有兴趣的看看,没兴趣的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 : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'
}
} $.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;
}

自己动手写jQuery插件---Tip(提示框)的更多相关文章

  1. Jquery插件:提示框

    在实际项目中,很容易有这种需求:当某个操作成功或失败,需要给用户一个提示.当然最简单的做法是调用alert()方法弹窗.但alert()属于JavaScript中BOM部分,每个浏览器的样式不太一样, ...

  2. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  3. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  4. 自己动手开发jQuery插件全面解析 jquery插件开发方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  5. 写JQuery插件的基本知识

    普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...

  6. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

  7. 写jQuery插件时,一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  8. 写JQuery 插件

    什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...

  9. 自己动手写Android插件化框架

    自己动手写Android插件化框架 转 http://www.imooc.com/article/details/id/252238   最近在工作中接触到了Android插件内的开发,发现自己这种技 ...

随机推荐

  1. 理解React生命周期的好例子

    class App extends React.Component { static propTypes = { }; static defaultProps = { }; constructor(p ...

  2. 【21.67%】【codeforces 727B】Bill Total Value

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. 远程主机关闭了连接。错误代码是 0x80070057,与远程主机通信时发生错误。错误代码是 0x80070057

    远程主机关闭了连接.错误代码是 0x80070057,与远程主机通信时发生错误.错误代码是 0x80070057突然在异常错误日志中看到这个错误,虽然在测试中发现不影响流的传输,但是不代表没错误,解决 ...

  4. C++ Lambda表达式基本用法(言简意赅,非常清楚)

    创建一个匿名函数并执行.Objective-C采用的是上尖号^,而C++ 11采用的是配对的方括号[].实例如下: 1 2 3 4 5 6 7 8 9 #include <iostream> ...

  5. wpf控件设计时支持(1)

    原文:wpf控件设计时支持(1) 这部分内容几乎是大家忽略的内容,我想还是来介绍一下. 本篇源码下载 1.属性元数据 在vs IDE中,在asp.net,winfrom等开发环境下,右侧的Proper ...

  6. ubuntu12.04下编译安装x86平台qt库qt-everywhere-opensource-src-4.8.5

    本文记录PC(x86)下安装Linux/X11版Qt 开发环境.下载页面:http://qt-project.org/downloads ARM嵌入式版本qt库的编译安装详见<unbunt12. ...

  7. 自定义函数Function

    定义 对于SQL Server来讲,我们声明一个变量的方式是用@变量名,而且相对于编程来讲,SQL Server声明的方式跟我们开了个玩笑,是先变量后面才是类型.对于需要传参跟不需要传参的方式,其实跟 ...

  8. 【msdn wpf forum翻译】TextBlock等类型的默认样式(implicit style)为何有时不起作用?

    原文:[msdn wpf forum翻译]TextBlock等类型的默认样式(implicit style)为何有时不起作用? 原文链接:http://social.msdn.microsoft.co ...

  9. WPF滚动条嵌套,响应鼠标滑轮事件的处理

    在C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果是鼠标滚动整个S ...

  10. MinDoc v0.6 发布,轻量级文档在线管理系统

    更新日志 新增 标签功能,可以根据标签组织项目 新增 用户删除功能,删除后的用户项目以及其他数据会自动转移到超级管理员账户上 新增 项目描述支持Markdown语法 优化 项目标签添加效果 优化 登录 ...