八月, 2009的档案

某些IE6版本的resize bug

西风瘦马 发布于 八月 7, 2009 * 评论(0)

IE6 sp3以下版本在碰到window.resize时会出错。

在windows下，有两种方法改变窗口的大小：

  1. 点窗口右上角的控制按钮
  2. 在窗口右下角按下鼠标，拖动鼠标到合适位置，松开鼠标

使用第一种方法resize窗口尺寸时，出问题的几率较小。使用第二种方式改变窗口大小，会导致死循环，从而产生脚本错误。这是因为IE6对window.resize事件解释有误，IE6认为，当用户按下鼠标时就开始执行resize事件，在用户鼠标未松开的这段时间，窗口的每一次尺寸改变都会触发一次resize事件。Firefox对resize的解释就是正确的：当用户按下鼠标时并不触发resize事件，当window的尺寸改变完成时（松开鼠标的瞬间）才触发resize事件，这就保证了resize事件只被执行一次。

存在这个bug的浏览器有：IE6 sp2及以下版本。IE6 SP3、IE7、IE8、Firefox、Safari、Chrome、Opera都没问题。

解决方法：

网上有人说在所有内容的最外面加一个div，通过检查这个div的尺寸来决定是否执行resize事件。我没试过这种方法，我不想在页面上增加多一个div，担心多增加的标签破坏页面原有的CSS，我想了下面的方法来hack resize

PLAIN TEXT
JAVASCRIPT:
  1. var t = 0;
  2. window.onresize = function() {
  3.     var now = new Date();
  4.     now = now.getTime();
  5.     if (now - t> 300) {
  6.         t = now;
  7.         //your resize event code here;
  8.         //document.getElementById('t').value += "resize";
  9.     }
  10. };

jQuery插件开发标准模板

西风瘦马 发布于 八月 3, 2009 * 评论(2)

jQuery在国内非常火爆，简洁的语法、大量现成的插件(plugins)是jQuery能在国内迅速串红的主要原因。

开发jQuery插件非常简单，大家可以下载几个插件，查看源代码学习插件的开发。经过一段时间的学习和开发，总结了一个插件开发模板，下次需要开发插件时，只需要往模板中添加插件的实现代码即可。

PLAIN TEXT
JAVASCRIPT:
  1. //myPlugin.jquery.js
  2. (function($) {
  3.  
  4.     $.myPlugin = {
  5.    
  6.         defaults: {
  7.        
  8.             //default options
  9.             //name: 'Joe'
  10.        
  11.         }
  12.    
  13.     };
  14.  
  15.     $.fn.extend({
  16.    
  17.         myPlugin: function(config) {
  18.        
  19.             var config = $.extend({}, $.myPlugin.defaults, config);
  20.  
  21.             return this.each(function() {
  22.            
  23.                 //var theImage = $(this);
  24.                 //var name = config.name;
  25.  
  26.             });
  27.  
  28.         }
  29.  
  30.     });
  31.  
  32.  
  33. })(jQuery)

巧用数学函数限制变量的取值范围

西风瘦马 发布于 八月 2, 2009 * 评论(1)

通常限制一个变量的取值范围时，我们会用到类型下面的代码：

PLAIN TEXT
JAVASCRIPT:
  1. //i必须大于等于0，小于等于100，超过临界值时取边界的值
  2. var i = 199;
  3. if (i <0) {
  4.     i = 0;
  5. }
  6. if (i> 100) {
  7.     i = 100
  8. }
  9. //alert(i); //100

上面的代码没有任何问题，今天发现一个更简洁的写法，能够让代码更加“优雅”。

PLAIN TEXT
JAVASCRIPT:
  1. var i = 199;
  2. i = Math.min(Math.max(0, i), 100);
  3. //alert(i); //100

使用数学函数中的max和min各一次，将值限定在指定的区域内。