zoukankan      html  css  js  c++  java
  • 【新手向】自用的tooltip小插件,前端插件知识科普~

    上面的tooltip就是成品图,为了和自己站点的风格保持一致所以自己写的。

    第一部分:你绝对碰到过的匿名函数闭包问题

    第二部分:写个tooltip demo

    第三部分:源码地址


    第一部分 你绝对碰到过的匿名函数闭包问题

      之所以写这个是因为我之前不知道文章可以发在首页的时候,我都是把博客当作备忘录一样记录自己的问题和收获,看的人也很少(现在依旧很少),但是我稍微翻译了一篇+function ($) { "use strict";}(window.jQuery);的文章,浏览量大概有我自己学习备忘录的十倍,所以我觉得虽然这个问题很基础,但是肯定很多人都会踩这个坑。

      今天打算简单说一下各种库里的匿名函数调用写法

    (function(x,y){
        alert(x+y);
        return x+y;
    })(3,4);
     上面算是一个很典型的匿名函数调用方法(参考资料JS高级程序设计P184-P186)

         问:为什么需要这样写成这样?有啥用?

      答:JS中没有块级作用域的概念,这种写法就是在模仿块级作用域,这种写法定义并立刻调用匿名函数,将函数声明包含在一对圆括号内,表示它是一个函数表达式。随后的另一对圆括号会立刻调用这个函数!


         问:那函数声明为什么要装成函数表达式?

      答:因为函数声明后面不能跟圆括号哦!


         问:这样写好处有哪些?

      答:这种技术可以限制向全局作用域中添加过多的变量和函数。以免很多开发人员一同参与的项目发生全局变量和函数命名冲突!

      下面的链接是更多匿名函数调用的方式!以供大家参考!

      Javascript中匿名函数的多种调用方式


     

     第二部分:写个tooltip demo

    +function ($) {
    
        function easytooltip(target,content) {
            
            target.mouseover(function(e){
                var html = "<div class='card' style='display:block;'>"+content+"</div>";    
                $("body").append(html);
                $(".card").css("left",e.pageX+10);
                $(".card").css("top",e.pageY+10);
            })
    target.mousemove(
    function(e){ $(".card").css("left",e.pageX+10); $(".card").css("top",e.pageY+10); })
    target.mouseout(
    function(e){ $(".card").remove(); }) } window.easytooltip = easytooltip; }(jQuery);

     :上面就是插件的JS文件了,是不是很短?实际上大牛写的框架也大概都是这样的结构,比如下面Bootstrap里自带的插件

    /* ========================================================================
     * Bootstrap: transition.js v3.3.5
     * http://getbootstrap.com/javascript/#transitions
     * ========================================================================
     * Copyright 2011-2015 Twitter, Inc.
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     * ======================================================================== */
    
    
    +function ($) {
      'use strict';
    
      // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
      // ============================================================
    
      function transitionEnd() {
        var el = document.createElement('bootstrap')
    
        var transEndEventNames = {
          WebkitTransition : 'webkitTransitionEnd',
          MozTransition    : 'transitionend',
          OTransition      : 'oTransitionEnd otransitionend',
          transition       : 'transitionend'
        }
    
        for (var name in transEndEventNames) {
          if (el.style[name] !== undefined) {
            return { end: transEndEventNames[name] }
          }
        }
    
        return false // explicit for ie8 (  ._.)
      }
    
      // http://blog.alexmaccaw.com/css-transitions
      $.fn.emulateTransitionEnd = function (duration) {
        var called = false
        var $el = this
        $(this).one('bsTransitionEnd', function () { called = true })
        var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
        setTimeout(callback, duration)
        return this
      }
    
      $(function () {
        $.support.transition = transitionEnd()
    
        if (!$.support.transition) return
    
        $.event.special.bsTransitionEnd = {
          bindType: $.support.transition.end,
          delegateType: $.support.transition.end,
          handle: function (e) {
            if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
          }
        }
      })
    
    }(jQuery);

    我这个其实就是一个简单的函数,只是写成了闭包,注意最后要将函数暴露出去!否则无法正确触发哦!下面是API!

    .easytooltip( target, content );
      target
      类型: Jquery选择器如$("body");
      content
      类型: String等
    
    调用例子:
    easytooltip($("body"),"咕咕咕");

     第三部分:源码地址

    https://coding.net/u/Flynoddle/p/easytooltip/git

  • 相关阅读:
    086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结
    085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用
    jQuery UI组件库Kendo UI使用技巧小分享
    Kendo UI ListView模板功能,让Web开发更轻松
    UI组件套包DevExpress ASP.NET Core v20.2新版亮点:全新的查询生成器
    Devexpress WinForms最新版开发.NET环境配置Visual Studo和SQL Server对应版本
    全新的桌面应用数据可视化呈现方式,Sankey Diagram控件你了解多少?
    java中的递归方法
    连接数据库查询 将查询结果写入exce文件中
    java连接mysql数据查询数据
  • 原文地址:https://www.cnblogs.com/cndotabestdota/p/5787534.html
Copyright © 2011-2022 走看看