编写自己的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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
vue实现多级菜单效果
Oct 19 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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
基于mysql的论坛(7)
2006/10/09 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
js 调整select 位置的函数
2008/02/21 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
Python实现堆排序的方法详解
2016/05/03 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python 实用工具状态机transitions
2020/11/21 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
应届护士求职信范文
2014/01/26 职场文书
公司司机岗位职责
2014/02/07 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
监护人证明
2015/06/19 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书