【新手向】自用的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
【新手向】自用的tooltip小插件,前端插件知识科普~的更多相关文章
- sublime text3 前端插件介绍
Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法:输入标签简写形式,然后按Tab键 关于Emmet的更多介绍 ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 前端插件@user
分享一个 @user 前端插件 开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...
- 微信小程序,前端大梦想(六)
微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...
- 微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...
- Django之前端插件定制之表头
什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写 ...
- 前端插件之Bootstrap Dual Listbox使用
工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...
- 前端插件之Select2使用
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...
- 前端插件之Datatables使用--上篇
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,前边两篇分别介绍了Duallistbox插件和Select2插件的使用,这一篇开始Databases的征服之旅 D ...
随机推荐
- Android NFC技术(三)——初次开发Android NFC你须知道NdefMessage和NdefRecord
Android NFC技术(三)--初次开发Android NFC你须知道NdefMessage和NdefRecord 这最近也是有好多天没写博客了,除了到处张罗着搬家之外,依旧还是许许多多的琐事阻碍 ...
- Linux - 有效群组(effective group)与初始群组(initial group),groups,newgrp
每个使用者在他的 /etc/passwd 里面的第四栏有所谓的 GID ,那个 GID 就是所谓的『初始群组 (initial group) 』!也就是说,当用户一登陆系统,立刻就拥有这个群组的相关权 ...
- navicat为mysql建立索引
索引的目的是大大提高查询效率,还有读写效率. kettle向sql里面插入,更新时,也要建立索引,可以大大提升处理时间. 但是建立索引报错:Specified key was too long; ma ...
- android studio比较长用的几款插件
不懂安装studio插件,看参考博文:android stuido插件安装:http://blog.csdn.net/liang5630/article/details/46372447 1.Butt ...
- Mina源码阅读笔记(四)—Mina的连接IoConnector2
接着Mina源码阅读笔记(四)-Mina的连接IoConnector1,,我们继续: AbstractIoAcceptor: 001 package org.apache.mina.core.rewr ...
- TCP浅谈为什么3次握手
<计算机网络>中的例子是这样的,"已失效的连接请求报文段"的产生在这样一种情况:客户发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连 ...
- jsJqGrid
/*展开收起*/ $(function() { initGridTable(); }); function change() { var flag = $("#searchTitle&quo ...
- 初步认识thymeleaf:简单表达式和标签(二)
1.th:each:循环,<tr th:each="user,userStat:${users}">,userStat是状态变量,有 index,count,size, ...
- 基于puppeteer模拟登录抓取页面
关于热图 在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不 ...
- css实现背景颜色渐变效果
自己学的一些渐变:background:linear-gradient(90deg,#4EB9E7 -50%,#3691BE 50%,#2E83B0 100%); IE没有效果 详细访问: http: ...