个人第一个jquery插件(tips)

js代码

/**
 * Created by joesbell on 2016/10/8.
 */
;(function($) {
    var defaults = {
        background:"#000",//tips的背景颜色
        color:"white",
        position:"r",//出现的位置 l--左边, r--右边  t--顶部  b--底部
        parWidth:"",//父级元素的宽度
        parHeight:"",//父级元素的高度
        tipsJ:"10px",//tips的距离父级距离偏移量
        tipsP:"20px",//tips的居中位置偏移量
        padding:"10px",//文字提示内边距
        txt:"helloWorld",//文字
        IconPos:"10px",//小箭头居中位置偏移量
        speed:"200",//tips出现的速度延迟
    };
    function se(){
        setTimeout(function () {
            $(".tip_JS").remove();
        },200)
    };

    $.fn.JSTips= function(options) {
        var options = $.extend({}, defaults, options);

        return this.each(function() {
            var parentWidth=$(this).width();
            var parentHeight=$(this).height();
            options.parWidth=parentWidth;
            options.parHeight=parentHeight;
//                $(this).append(joesO(options));
            $(this).on("mouseenter",function () {
                $(this).append(joesTips(options));
            });
            $(this).on("mouseleave",function () {
                se();
            })
        });
    };
    function joesTips(opts) {
        var layEle=$("<div class=‘tip_JS‘></div>");
        var layE=$("<div class=‘txt_JS‘></div>");
        var cs=$("<i></i>");
        var pe=$("<p class=‘tipTxt_JS‘></p>")
        var tipsP=parseInt(opts.tipsP);
        var tipsJ=parseInt(opts.tipsJ);
        var PW=opts.parWidth;
        var PH=opts.parHeight;
        var position=opts.position;
        var bg=opts.background;
        var pd=parseInt(opts.padding);
        var txt=opts.txt;
        var IconPos=opts.IconPos;
        var speed=parseInt(opts.speed);
        var color=opts.color;
        pe.appendTo(layE).css({
            padding:pd,
        });
        pe.html(txt);
        layE.appendTo(layEle);
        $(".test:after").css({
            "border-color":bg
        });
//            tips出现在右边
        if(position=="r"){
            layEle.css({
                background:bg,
                left:PW+tipsJ,
                top:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-left").css({
                top:IconPos,
                "border-right-color":bg
            }).appendTo(layE);
        }else if(position=="l"){
            //            tips出现在左边
            layEle.css({
                background:bg,
                right:PW+tipsJ,
                top:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-right").css({
                top:IconPos,
                "border-left-color":bg
            }).appendTo(layE);

        }else if(position=="b"){
            layEle.css({
                background:bg,
                top:PH+tipsJ,
                left:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-up").css({
                left:IconPos,
                "border-bottom-color":bg
            }).appendTo(layE);
            //            tips出现在底部

        }else if(position=="t"){
            //            tips出现在顶部
            layEle.css({
                background:bg,
                bottom:PH+tipsJ,
                left:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-down").css({
                left:IconPos,
                "border-top-color":bg
            }).appendTo(layE);

        }
        return layEle
    }
})(jQuery);

css代码

/*上箭头*/
.triangle-up {
    position: absolute;
    width:0;
    height:0;
    bottom: 100%;
    border:10px solid transparent;
    border-bottom-color:yellow;
}
/*下箭头*/
.triangle-down {
    position: absolute;
    width:0;
    height:0;
    top:100%;
    /*transform: translate(-50%,-50%);*/
    border:10px solid transparent;
    border-top-color:yellow;
}
/*左箭头*/
.triangle-left {
    position: absolute;
    width:0;
    height:0;
    right: 100%;
    border:10px solid transparent;
    border-right-color:yellow;
}
/*右箭头*/
.triangle-right {
    position: absolute;
    width:0;
    height:0;
    left: 100%;
    margin: auto;
    /*transform: translate(-50%,0);*/
    border:10px solid transparent;
    border-left-color:yellow;
}
.tip_JS{
    position: absolute;
    display: none;
    width: auto;
}
.txt_JS{
    position: relative;
}
.tipTxt_JS{
    white-space: nowrap;
}

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .p{
            position: relative;
            width: 500px;
            height: 500px;
            background: #000;
            margin: 0 auto;
            margin-top: 200px;
        }
    </style>
    <link rel="stylesheet" href="./Tips/myTips.css">
</head>
<body>
<div class="p">
    <p style="color: wheat">我的第一个tips插件</p>
</div>
</body>
<script src="jquery-1.12.2.min.js"></script>
<script src="./Tips/myTips.js"></script>
<script>

    $(".p").JSTips({
//        background:"rgba(0,0,0,0.5)",
//        position:"l",
//        tipsP:"150px",
//        txt:"helloWorld",
//        IconPos:"10px",
//        speed:"200",
    });
</script>
</html>
时间: 2024-11-05 06:02:34

个人第一个jquery插件(tips)的相关文章

分享一个jquery插件,弥补一下hover事件的小小不足

hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好. 易迅的菜单就没有这个问题 delayHover来解决这个问题 啥也不说了先看调用---------- 调用方式: var duration = 500;// 延迟500毫秒 $('#div1').delayHover(function

你真的需要一个jQuery插件吗

jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错误的时间比实际从头 开始编写组件的时间还长. 幸运的是,人们通常具有各种不同的插件可供选择.但是,即使你只用一个,也要弄清楚它是否值得使用的.永远不要在你的代码库中引入错误的代码. 你需要一个插件吗? 首先是要弄清楚究竟你是否需要一个插件.如果不需要,既可以节省文件大小,又可以节省自己的时间. 1.

如何开发一个Jquery插件?

最近有离职的想法,可这不是重点,重点是很多面试官都会问的一个问题就是:怎么开发一个jquery插件. 其实,如果是在真实的工作中遇到这种情况,我会直接找一个简单的jquery插件,例如jquery.cookie.js或者jquery.textchange.js插件,jquery的插件那么多,你随便找来一个都是可以用的,我们需要做的就是把jquery的架子留下来,把具体的功能实现换成自己的,然后就可以到处去使用了. 但是,面试中我们是万万不能这么回答的,所以,一方面是为了让自己再熟悉一下jquer

做了一个jquery插件,使表格的标题列可左右拉伸

示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table的各列可以左右拉伸,从而使宽度变小或变大 用法: 单个table:$("#table_id").tableresize(); 页面所有table:$("table").tableresize(); */ (function ($) { $.fn.tableresize

如何去定义一个jquery插件

扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: 1 2 3 4 5 6 7 /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ f

开发一个jQuery插件——多级联动菜单

引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对

写的第一个jQuery插件----缓冲运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

自己在项目中写的一个Jquery插件和Jquery tab 功能

后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearchResult { public PDFSearchResult(string title, string fileUrl) { Title = title; FileUrl = fileUrl; } [DataMember(Name = "title")] public string Ti

自己写一个 jQuery 插件

我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一些信息. 这种需求和 alert 的弹窗.F12 的断点查看信息的场景是不一样的:在这种场景下,你就是端着杯咖啡靠在那里坐着,看着关于应用程序运行的信息不断的在网页上输出,不用去关闭弹窗.也不用去设置断点. 详细的功能需求如下: 输出的信息中自动包含时间 输出的信息按照类型显示不同的样式 输出的信息类型包括:普通信息.调试信息.警告.错误 可选按照时间升序输出信息(稍作修改可以时