Write your own jQuery prompt box (Tip) plug-in_jquery

I believe that many students, like me, use jQuery for their own purposes. There is no other way. The only reason to blame is that jQuery is too popular. Various plug-ins can basically meet daily requirements. But this is not a long-term solution after all. The ancients said: "It is better to teach someone to fish than to teach someone to fish."

For the convenience of students who have not been exposed to it before, let’s first review the plug-in mechanism of jQuery.

Copy code The code is as follows:

//Add check and uncheck plug-ins
jQuery.fn.extend({
check: function() {
Return this.each(function() { this.checked = true; });
},
uncheck: function() {
Return this.each(function() { this.checked = false; });
}
});
//Use of plug-in
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

In fact, jQuery plug-ins are very simple. No wonder jQuery plug-ins are flying all over the place. I used to think it was complicated. I always felt that writing plug-ins was a very advanced matter. I wonder if there are any students who feel the same way.

Let’s do a demand analysis before taking action (ps: I was born to study software engineering and the tuition fee is very cheating. If you don’t do the demand analysis, I’ll be sorry for the tuition fee, haha).

In fact, there is nothing easy to analyze, just make the following effect:

When you put the mouse on it, WeChat will pop up and scan it. WeChat is so popular that the boss asked me to put one on the website, so I wrote a plug-in to satisfy him. God is the one who pays wages. Give me the money to work and don’t negotiate with me. Integrity, IT otakus are all people with completely ruined outlook on life and no integrity at all. That's too far. Take a look at the renderings.

The usage method is no different from other jQuery:

Copy code The code is as follows:

$(function(){
var t = $(".weixin").Tip({
          title:'Scan on WeChat',
content:'',
         html:true,
direction:'bottom'
        });
t.bind({
mouseover:function(){
              t.Tip("show");                         },
           mouseout:function() {
            t.Tip("hide");
}
});
});

Take a look at the configurable options

Copy code The code is as follows:

defaultOptions :{
              title: '',//Title
              content: '',//Content
             direction: 'bottom',//Pop-up reverse, relative to the selected element
                                                                                                                                                                                                                     // whether to allow content to be html elements
template : '

'//Pop-up box template
}

Finally, check out the high-definition uncensored source code if you are interested. If you are not interested, just ctrl c or ctrl v

Copy code The code is as follows:

!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 : '

'
        }
    }
    $.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;
}

That’s all the content of this article. Do you guys have a new understanding of how to write jQuery plug-ins? I hope you like this article.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQueryMobile's Helloworld and page switching methods_jqueryNext article：jQueryMobile's Helloworld and page switching methods_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills