自己写的jquery tooltip插件 — vtooltip

Update:version 1.3
这几天做了一个比较大的更新 现在使用插件不需要引入任何图片了 小三角由css完成渲染 添加了两种风格 dark.css light.css 根据您的需要引入对应的css就可以了


这个小玩意儿是完全是在我好好使用github的第一个产物 Demo页也是在github pages里面生成的 前几天公司正好有这个需求 所以我就在github里面好好写了一下

效果请看   DEMO

现在jquery的tipsy插件也很多了 我这个插件支持这些基础的功能

  1. 支持四个方向显示tipsy(top,bottom,left,right)
  2. 支持三种方式显示数据(normal,ajax,jsonp)
  3. 异步获取数据会缓存数据 不会再请求一次
  4. 计划添加几种css3样式 可以供大家切换(已经完成)
  5. 计划添加自适应功能 当页面距下边距离太短的时候 自动切换到上方

使用方法
下载以后将下面的两个文件添加进页面(jquery.vtip.js, style.css)(可以修改css文件来自定义)

参数说明

var settings = {
	//four postions,top left,right bottom
	position:'bottom',
	//three ways:normal or ajax or jsonp
	method:'normal',
	//when method is ajax or jsonp, you need a url
	url:'',
	//when you need a custom message
	desc:'',
	//custom width&height
	width:'auto',
	height:'auto'
}

使用方法

//直接显示链接的title
$('a').vtip();
//在右边显示自定义的信息
$('a').vtip({"desc":"Hey i am a custom tip","position":"right"});
//ajax方法 包含一个回调函数
$('#ajax').vtip({method:"ajax",url:"posts.php"},function(data,ele){
	//data代表服务器返回的数据 ele表示当前元素
	//code goes here

})

配置简单 中意的可以在这里fork

DOWNLOAD&FORK

大作翻译—Interviewing the front-end engineer By Nicholas C. Zakas

Nicholas Zakas是高效率javascript这本书的作者,这篇文章写的是怎样面试前端工程师 其实他里面提到了很多基础知识 也是我自己需要强化和巩固的 过一阵我会对里面每个提到的知识点做一个总结和提炼 每一个知识点写一篇博客

所以我在这里之翻译基础只是这一部分(好久不翻译了 肯定很差 以后可以让刘老板帮忙改进一下)

原文链接

基础知识

我们生活在一个通过互联网可以快速汲取知识的时代,但是 之了解一些知识的皮毛并不代表已经已经掌握了它们并可以熟练应用,我这里有一些基础的知识点,我希望所有的前端工程师都了然于胸。你不能在有时间限制的时候还需要每次都停下来上网去查。如果有些人面对这些问题说:我不知道 但是我可以上网去查。 听到这话 我立刻给他灭灯,下面就是这些基础,我希望所有前端er都可以不依靠外部的帮助掌握它们。

1.DOM结构 节点之间的相互关系 和 怎样从一个节点到下一个节点
2.DOM修改 怎样 增加 删除 克隆 移动 查找 节点
3.事件 怎样使用事件 在IE和标准dom下的事件对象的主要区别
4.XMLHttpRequest 是什么 怎样发起一个完整的XML请求 怎样检测其中的错误
5.Strict Mode 和 Quirks Mode 怎样触发这两种格式 有什么区别
6.The Box Model(盒模型) margin padding border怎样工作 还有在ie浏览器下会有什么问题
7.Block vs Inline Elements(块级元素 内联元素) 有什么区别,怎样用css转换,对旁边的元素有什么影响
8.浮动元素 怎样使用 会出现什么问题 怎样解决出现的问题
9.JSON 是什么,为什么会使用他,怎样使用

重申一遍,这些知识点必须是你熟知的,我之前的问题都是要测试对在所有这些领域的知识水平。这个清单并不是非常的彻底,但是我相信这些都是你要成功于我们合作必备的技能和素质。

待续

写的两个豆瓣的油猴脚本 – douban quickview 和douban live

平时无聊的时候逛豆瓣发现有很多不方便的地方 有个叫豆瓣助手的东西又超级大 很不爽

所以写了两个常用的功能

第一个就是在豆瓣广播里面的图片 每次看都会跳到相册那一页 不方便 所以写了一个像微博可以放大 然后点击可以缩小的脚本 douban quickview

没有点击的时候

点击后 

第二个是 小组看淫荡直播的时候直接看楼主的帖子 将其他灌水的帖子都隐藏 这个很方便实用

没有点击的时候

点击过后

下面的帖子只显示楼主的帖子

两个插件的下载地址:

quickview : http://userscripts.org/scripts/show/97647

live :http://userscripts.org/scripts/show/118037

自己写的焦点图插件 vslide

其实早就写好了 一直放在那里 前几天往github里面又传了一个东西 发现还有这么个东西 改了改 就先放出来 一开始本来设想要加好几中动画效果的 后来想想先这样 越简单越好只要实现功能即可  使用也比较简单 现在动画效果只有一种向右滑动 本来设想添加了一个动画组件 里面有多种效果 根据用户需要来添加

效果请看   DEMO

用法 很简单 看下面说明

//两个参数 一个是数据 一个是配置参数 css可以自己按照喜好填写
//第一个是图片的数组 包括图片地址 链接 和下面的说明
var data =[{img:'1.jpg',link:'#',desc:'there you go bitch'},
{img:'2.jpg',link:'#',desc:'this is not cool'},
{img:'3.jpg',link:'#',desc:'under attack'},
{img:'4.jpg',link:'#',desc:'fuck this shit, fuck you all'},
{img:'http://www.wallcoo.com/flower/Amazing_Color_Flowers_2560x1600_II/wallpapers/1280x1024/Amazing_Flowers_Wallpapers_53.jpg',link:'#',desc:'u\'er going down bro'}
];

//默认的配置参数
var settings = {
		pagnation:true,//是否显示下面的页码
		autoPlay:true,//是否自动播放
		speed:3000,//播放速度
		event:'click',//切换事件
		height:327,//高度
		width:960//宽度
	}

//可以用你想要的配置覆盖他
var opts = {speed:2000,event:'mouseover'};

//最后~
$('.test2').vslide(opts,data);

配置很简单 焦点图还算好用 中意的可以在这里fork

DOWNLOAD&FORK

做几道知乎看来的笔试题

知乎上一个哥们问的 我做一下顺便巩固一下知识 觉得题目还不错 问答式的写在前面  代码的统一写在后面

原题目地址http://www.zhihu.com/question/19863532

1.事件对象在IE与FF中有哪几个共同的属性呢?

坑爹的一道题 查文档查半天
altKey, ctrlKey, shiftKey button,clientX, clientY,type
没什么价值的一道题,但是事件对象模型一定要搞清楚 过几天会总结一下

2.IE的innerHTML需要注意哪些问题?

ie下一些元素的innerhtml的属性是只读的,不能赋值

3.请指出slice,substr,substring的不同

这个没查资料 完全自己回答的。。
都是字符串截取的方法 slice和substring差不多
用法a.slice(start,end) a.substring(start,end) 区别就是substring第二个参数不能为负数
a.substr(start,length) 第二个参数是截取长度

下面是代码的了

//如果动态加载JS文件(请写出完整的函数)
//很经典的东西
function dload(src,callback){
  var script = document.createElement('script');
  script.src = src;
  if(script.readyState){
    script.onreadystatechange = function(){
      if(script.readyStart == 'loaded' || script.readyState == 'complete'){
        callback();
      }
    }
  }
  else{
    script.onload = function(){
      callback();
    }
  }
  document.getElementsByTagName('head')[0].appendChild(script);
}
//计算出两个Date对象的相差的日数
function dayDiff(start,end){
   var a = new Date(start).getTime();
   var b = new Date(end).getTime();
   var gap = Math.floor((b-a)/(24*60*60*1000));
   return gap;
}
//判定一个字符串是否符合(2012-01-12)这样的日期格式(请写出完整的函数)
//写了个简单的 不能验证日期的正确性
function checkDate(str){
  var pa = /\d{4}\/\d{2}\/\d{2}/g;
  return pa.test(str);
}
//如何判定一个对象是数组(请写出完整的函数)
//很好的问题 还有一种解答 自己查吧~
function isArray(arr){
  return ((typeof arr == 'object') && (arr.constructor == Array));
}

//用正则取得某个标签里面的innerText
//其实就是过滤掉所有的html标签
function scriptHTML(str){
  return str.replace(/<.*?>/g,'');
}