编排本人的jQuery提醒框,包容性好

2019-07-22 作者:网站首页   |   浏览(138)

对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求。但是这毕竟不是长久之道,古人云:“授之以鱼,不如授之以渔”。

yzc216亚洲城 1
主页:

为了方便之前没有接触的同学,先来回顾一下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();

qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器
例如:

其实jQuery的插件非常简单,怪不得jQuery插件满天飞,之前是我想复杂了,总觉得写插件是很高深的事情,不知道有没有同感的同学。

Internet Explorer 6.0
Firefox 2.0
Opera 9.0
Safari 3.0
Google Chrome 1.0
Konqueror 3.5

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

使用qTip可以很轻松的定义tip的位置以及样式,同时qTip还有一个强大的API......

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

使用qTip前,只需引入两个JS文件即可:

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

复制代码 代码如下:

yzc216亚洲城 2

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>

使用方法其他jQuery没什么不同:

下面举几个比较简单的例子。

复制代码 代码如下:

1、Basic text

$(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");
        }
    });
});

html如下所示:

看一下可配置的选项吧

复制代码 代码如下:

复制代码 代码如下:

<div id="content">
<a href=" ">Basic text</a>
</div>

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>'//弹出框模版
        }

JS代码:

最后上高清无码源码有兴趣的看看,没兴趣的ctrl c,ctrl v吧

复制代码 代码如下:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip'
});
});
</script>

!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);

2、Title attribute

css样式

html如下所示:

复制代码 代码如下:

复制代码 代码如下:

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

<div id="content">
<a href=" " title="That sounds familiar...">Title attribute</a>
</div>

以上就是本文的所有内容了,小伙伴们对如何编写jQuery插件是否有了新的 认识了呢,希望大家能够喜欢本文。

JS代码:

您可能感兴趣的文章:

  • qTip2 精致的基于jQuery提示信息插件
  • jQuery带箭头提示框tooltips插件集锦
  • jquery-tips悬浮提示插件分享
  • jquery.cvtooltip.js 基于jquery的气泡提示插件
  • jQuery插件Tooltipster实现漂亮的工具提示
  • 属于你的jQuery提示框(Tip)插件
  • 基于jQuery Tipso插件实现消息提示框特效
  • jQuery消息提示框插件Tipso
  • poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
  • jQuery tip提示插件(实例分享)

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href][title]').qtip({
content: {
text: false
},
style: 'cream'
});
});
</script>

3、Image

html如下所示:

复制代码 代码如下:

<div id="content">
<a href=" ">Image</a>
</div>

JS代码:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('#content a[href]').qtip({
content: '<img src="small.png" alt="Image" />'
});
});
</script>

4、Corner values

html如下所示:

复制代码 代码如下:

<div id="content" style="margin-top:200px;margin-left:200px;">
<a href=" ">Corner values</a>
</div>

JS代码:

yzc216亚洲城,复制代码 代码如下:

<script type="text/javascript">
var corners = 'bottomLeft';
var opposites = 'topRight';
$(document).ready(function()
{
$('#content a')
.hover(function()
{
$(this).html(opposites)
.qtip({
content: corners,
position: {
corner: {
tooltip: corners,
target: opposites
}
},
show: {
when: false,
ready: true
},
hide: false,
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true,
name: 'cream'
}
});
});
});
</script>

5、Fixed tooltips

html如下所示:

复制代码 代码如下:

<div id="content">
<img src="sample.jpg" alt="" height="200" />
</div>

JS代码:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('#content img').each(function()
{
$(this).qtip(
{
content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>',
position: 'topRight',
hide: {
fixed: true
},
style: {
padding: '5px 15px',
name: 'cream'
}
});
});
});
</script>

css代码:

复制代码 代码如下:

<style type="text/css">
#content img{
float: left;
margin-right: 35px;
border: 2px solid #454545;
padding: 1px;
}
</style>

6、Loading html

html如下所示:

Html代码

复制代码 代码如下:

<div id="content">
<a href="#" rel="sample.html">Click me</a>
</div>

JS代码:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('#content a[rel]').each(function()
{
$(this).qtip(
{
content: {
url: $(this).attr('rel'),
title: {
text: 'Wiki - ' $(this).text(),
button: 'Close'
}
},
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust: {
screen: true
}
},
show: {
when: 'click',
solo: true
},
hide: 'unfocus',
style: {
tip: true,
border: {
width: 0,
radius: 4
},
name: 'light',
width: 570
}
})
});
});
</script>

7、Modal tooltips

html如下所示:

Html代码

复制代码 代码如下:

<div id="content">
<a href="#" rel="modal">Click here</a>
</div>

JS代码:

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$('a[rel="modal"]:first').qtip(
{
content: {
title: {
text: 'Modal tooltips sample',
button: 'Close'
},
text: 'hello world'
},
position: {
target: $(document.body),
corner: 'center'
},
show: {
when: 'click',
solo: true
},
hide: false,
style: {
width: { max: 350 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#666666'
},
name: 'light'
},
api: {
beforeShow: function()
{
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
}
}
});
$('<div id="qtip-blanket">')
.css({
position: 'absolute',
top: $(document).scrollTop(),
left: 0,
height: $(document).height(),
width: '100%',
opacity: 0.7,
backgroundColor: 'black',
zIndex: 5000
})
.appendTo(document.body)
.hide();
});
</script>

您可能感兴趣的文章:

  • jquery tools之tooltip
  • jQuery Tools tooltip使用说明
  • jQuery带箭头提示框tooltips插件集锦
  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
  • 25个优雅的jQuery Tooltip插件推荐
  • 基于jquery的自定义鼠标提示效果 jquery.toolTip
  • Jquery实现自定义tooltip示例代码
  • jQuery插件Tooltipster实现漂亮的工具提示
  • jquery插件tooltipv顶部淡入淡出效果使用示例
  • jQuery自制提示框tooltip改进版
  • jQuery实现ToolTip元素定位显示功能示例

本文由yzc216亚洲城发布于网站首页,转载请注明出处:编排本人的jQuery提醒框,包容性好

关键词: yzc216亚洲城