jQuery center

Posted on 2012年7月22日 15:07

本来jQuery有一个certer插件,不过少了一个功能,就是基于视口(ViewPort)的居中.

改写一下,代码如下:

Js代码  收藏代码
  1. jQuery.fn.center = function(f) {  
  2.     return this.each(function(){  
  3.         var p = f===false?document.body:this.parentNode;  
  4.         if ( p.nodeName.toLowerCase()!= "body" && jQuery.css(p,"position") == 'static' )  
  5.             p.style.position = 'relative';  
  6.         var s = this.style;  
  7.         s.position = 'absolute';  
  8.         if(p.nodeName.toLowerCase() == "body")  
  9.             var w=$(window);  
  10.         if(!f || f == "horizontal") {  
  11.             s.left = "0px";  
  12.             if(p.nodeName.toLowerCase() == "body") {  
  13.                 var clientLeft = w.scrollLeft() - 10 + (w.width() - parseInt(jQuery.css(this,"width")))/2;  
  14.                 s.left = Math.max(clientLeft,0) + "px";  
  15.             }else if(((parseInt(jQuery.css(p,"width")) - parseInt(jQuery.css(this,"width")))/2) > 0)  
  16.                 s.left = ((parseInt(jQuery.css(p,"width")) - parseInt(jQuery.css(this,"width")))/2) + "px";  
  17.         }  
  18.         if(!f || f == "vertical") {  
  19.             s.top = "0px";  
  20.             if(p.nodeName.toLowerCase() == "body") {  
  21.                 var clientHeight = w.scrollTop() - 10 + (w.height() - parseInt(jQuery.css(this,"height")))/2;  
  22.                 s.top = Math.max(clientHeight,0) + "px";  
  23.             }else if(((parseInt(jQuery.css(p,"height")) - parseInt(jQuery.css(this,"height")))/2) > 0)  
  24.                 s.top = ((parseInt(jQuery.css(p,"height")) - parseInt(jQuery.css(this,"height")))/2) + "px";  
  25.         }  
  26.     });  
  27. };  

使用,

Js代码  收藏代码
  1. $(expr).center();  
  2. $(expr).center(false);  

如果expr 的 parentNode 是body 或者参数是 false的话就会真的 ViewPort 居中.

另外加的偏移量 10 是个偷懒的方法,比如有了滚动条,会好一些,没有的话视觉上也差别不大,不过没有这个偏移量又有 滚动条的话 视觉上就不太舒服了

 

JavaScript 获取数组中最大值、最小值

Posted on 2012年2月29日 20:32

笨方法:

Array.prototype.max = function() {  
 var max = this[0];
 var len = this.length; 
 for (var i = 1; i < len; i++){   
  if (this[i] > max) {      
   max = this[i];   
  } 
 }   
 return max;
}
Array.prototype.min = function() {
 var min = this[0];
 var len = this.length;
 for (var i = 1; i < len; i++){ 
  if (this[i] < min){     
   min = this[i];   
  }  
 }   
 return min;
}

 如果你是引入类库进行工作,怕类库中有同名方法,那么我可以在创建之前做判断

if (typeof Array.prototype['max'] == 'undefined') { 
 Array.prototype.max = function() {    
  //************略*************
 }
}

John Resig 《Secrets of the JavaScript Ninja》

巧妙地利用apply方法来调用原生的Math.max与Math.min方法迅速求得结果。apply能让一个方法指定调用对象与传入参数,并且传入参数是以数组形式组织的。恰恰现在有一个方法叫Math.max,调用对象为Math,与多个参数。

Array.max = function( array ){   
 return Math.max.apply( Math, array );
};
 
Array.min = function( array ){    
 return Math.min.apply( Math, array );
};

不过,John Resig是把它们做成Math对象的静态方法,不能使用大神最爱用的链式调用了。但这方法还能更精简一些,不要忘记,Math对象也是一个对象,我们用对象的字面量来写,又可以省几个比特了。

 

Array.prototype.max = function(){  
   return Math.max.apply({},this);
}
Array.prototype.min = function(){  
   return Math.min.apply({},this);
}

 

jQuery Plugin 获取Textarea 光标位置

Posted on 2011年10月20日 20:16

jQuery.fn.extend({  
    getCurPos: function(){  
        var e=$(this).get(0);  
        e.focus();  
        if(e.selectionStart){    //FF  
            return e.selectionStart;  
        }  
        if(document.selection){    //IE  
            var r = document.selection.createRange();  
            if (r == null) {  
                return e.value.length;  
            }  
            var re = e.createTextRange();  
            var rc = re.duplicate();  
            re.moveToBookmark(r.getBookmark());  
            rc.setEndPoint('EndToStart', re);  
            return rc.text.length;  
        }  
        return e.value.length;  
    },  
    setCurPos: function(pos) {  
        var e=$(this).get(0);  
        e.focus();  
        if (e.setSelectionRange) {  
            e.setSelectionRange(pos, pos);  
        } else if (e.createTextRange) {  
            var range = e.createTextRange();  
            range.collapse(true);  
            range.moveEnd('character', pos);  
            range.moveStart('character', pos);  
            range.select();  
        }  
    }          
});