编写自己的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 相关文章推荐
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
微信小程序收藏功能的实现代码
Jun 19 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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js数组的操作指南
2014/12/28 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
写好求职信第一句话的技巧
2013/10/26 职场文书
药店促销活动策划方案
2014/08/24 职场文书
三八妇女节标语
2014/10/09 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python