Javascript 动态表格 – 实现与使用

由于项目需要,开发了一个轻量化的动态表格工具。

主要包括:
1.常用的功能按钮
2.自定义右键菜单
3.支持多选
4.根据选择的状态调整功能菜单的状态
5.列宽度调整
6.基本的样式改变标识当前状态 继续阅读 »

转载请注明原文出处《Javascript 动态表格 – 实现与使用》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

通过自定义方法修正mouseover/mouseout事件

Javascript中mouseover/mouseout 事件冒泡停止失效解决办法中我们通过checkHover()方法解决在触发mouseover和mouseout事件的时候无法阻止事件分发的bug。

通过这个方法我们成功的解决了这个问题,但是这个方法是用起来还是比较麻烦。在每次调用相关的方法的时候你都要去检查一下,让我们代码多了很多重复无用的代码。点击查看Demo效果 继续阅读 »

转载请注明原文出处《通过自定义方法修正mouseover/mouseout事件》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

掰一掰几个常用的在线同步软件

如果你跟我一样是做IT这个行当的,那么最少你也得有两台以及两台以上的电脑吧?平常怎么在几台电脑之间保持文件同步估计也是对你来说非常重要的一件事情吧?(当然你要是有自己的服务器,你用SVN,下面的废话你就不用看啦:P 或者还可以选择U盘,移动硬盘……?)这里就介绍一下我了解到几个这种应用。

1.DropBox
容量:2G(通过邀请可达5G)
优点:简洁易用,使用方便。显示同步的进度。有历史文件记录。占用流量小。
缺点:只能同步指定的文件夹,不能同步任意文件夹。
备注:我一直用着,直到昨天晚上,发现不能用了,事实证明了这是个好网站……

2.syncplicity
容量:2G(通过邀请可达6G)
优点:详细显示同步的情况。本身集成了一些网络应用。单独同步指定文件夹。
缺点:使用起来略显麻烦(要是非要找缺点的话)。免费用户相对DropBox来说限制相对多一点。比如只允许2台机器?免费账户不用共享文件(这对我来说是个优点,这样就意味着它被和谐的可能性小很多。)windows版的需要安装.netFramework。
备注:失去DropBox后,我的备选方案。

3.sugarsync
容量:2G(学习入门教程获得250M的额外空间,邀请免费用户注册获取250M额外空间,不清楚上限应该也不会超过10G吧)
优点:本地化做的比较好。这个跟上一个很像,可以单独的同步某一个文件夹。占用资源少。
缺点:有自己的管理器,功能强大的同时也带来的复杂。我们就需要文件同步,我们希望生活变得简单,不是吗?邀请一个好友获250M的空间,比较麻烦,syncplicity每邀请一个好友给1G的空间,sugersync比较抠门一点,嘿嘿。
备注:本地化工作做得好,让人比较亲近。

4.Live Mesh
容量:5G
优点:跟Windows集成比较紧密?安全可靠?一般情况下不会被封?体验跟Windows系统很像。
缺点:太笨重,每次修改都要上传整个文件。没法看上传的进度,我都不知道怎么看是不是上传完了,汗。
备注:试用了一下马上放弃了。界面还是蛮漂亮的。

转载请注明原文出处《掰一掰几个常用的在线同步软件》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

在页面标签内部调用事件与事件侦听器绑定事件的不同

我们在给元素添加事件的时候可能会用到三种方法:

1.直接写到dom文档中:

<div id="myDiv" onclick="myFunc()"></div>

2.使用元素的事件属性赋值:

node.onclick = myFunc;

3.使用事件侦听器:
node.addEventListener('click',myFunc,false);//W3C的方法
node.attachEvent('onclick',myFunc);//IE

我们将myFunc定义为
  1. function myFunc(){
  2. alert(this);
  3. }

不知道你注意过没有,用第一种方法与第二以及第三种方法触发事件时this指代的值是不同的。

根据我们的理解当元素触发事件时,调用我们自定义方法的对象为我们触发事件的元素,this指代的应该为当前元素。当我们使用第二和第三种方法时候这么说是没问题的,提示框提示的也是当前的元素。但是通过第一种方法执行的时候提示框提示的却是window对象!这是为什么呢?是出现bug了吗?事实上不是的。

如果我们使用调试工具查看一下元素的onclick属性你会发现它们之间的不同。

第一种情况:

node.onclick = function(){
omyFunc();
}

第二种情况:
  1. node.onclick = function(){
  2. oalert(this);
  3. }

第三种情况:

在IE下面用attachEvent方法添加事件的时候内部的this指代的是window对象,不知道到IE在想什么,呵呵。但是addEventListener中this指代的是当前的事件对象,当然IE下面你可以用别的办法解决这个问题。

现在应该清楚了,第一种情况的时候相当于在onclick属性中执行的是我们定义的myFunc方法,而调用myFunc函数的对象为 window,所以this也就是window。而第二和第三种情况则相当于将myFunc函数对象赋给onclick属性,当触发事件时执行的是 myFunc函数内部的代码,调用对象为当前的对象,所以this也就是当前的node。

不知道你在写javascript的时候碰到过这个问题没有?

转载请注明原文出处《在页面标签内部调用事件与事件侦听器绑定事件的不同》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

在某个元素上阻止鼠标右键默认事件

最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单

IE和FF下面的元素都有oncontextmenu这个方法,在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果。IE并不支持这个方法,在IE下面一般是通过触发方法后return false来实现阻止默认事件的。

通常我们使用阻止右键事件是在全局阻止,即在document层面就将右键拦截,现在我想要实现的效果是只在特定的区域阻止默认的右键事件,而其他区域并不影响。

通过实验我发现要是在IE下绑定的方法中return false后在document层面上可以实现阻止右键的默认行为。但是具体到某一个元素比如div,则失效。

最后通过查找手册发现,IE下的event对象有一个returnValue属性,如果将这个属性设置为false则不会触发默认的右键事件。类似如下:

  1. event.returnValue = false;

只要加入这句就实现了我想要的效果。请点击查看Demo效果

这个效果兼容IE6+,FF,但是opera压根就没有oncontextmenu这个方法所以也就不能简单的通过这个方法实现,要想实现还需要通过其他的手段。

转载请注明原文出处《在某个元素上阻止鼠标右键默认事件》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

公司网站首页效果图

公司网站首页

公司网站首页

 

最近事情太多,blog基本上都没什么时间更新,有很多东西想写写的。

ps.都这个时候了还这么冷,家里的暖气早停了,弄得我晚上都不爱起来活动,只想窝在被窝看书。

转载请注明原文出处《公司网站首页效果图》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。