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


Posted in Javascript onFebruary 05, 2015

对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提示框(Tip)插件

使用方法其他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插件是否有了新的 认识了呢,希望大家能够喜欢本文。

Javascript 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
使用pjax实现无刷新更改页面url
Feb 05 #Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 #Javascript
jquery手风琴特效插件
Feb 04 #Javascript
Jquery中find与each方法用法实例
Feb 04 #Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 #Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 #Javascript
15款jQuery分布引导插件分享
Feb 04 #Javascript
You might like
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
javascript的事件描述
2006/09/08 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python的exec、eval使用分析
2017/12/11 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
实例讲解Python爬取网页数据
2018/07/08 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python如何输出警告信息
2020/07/30 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
C语言50道问题
2014/10/23 面试题
介绍信模板
2015/01/31 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
机器人瓦力观后感
2015/06/12 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫