actual plugin

http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/

stack-overflow 的討論

http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery-1-4-2

jQuery 有 height , width , outerWidth , outerHeight 這些函式可以取得元件的面積資訊，

但是有時候有些元件是被隱藏(hidden)的，還是需要取得他的面積，所以上面兩篇文章都是在處理這方面的問題，

大都是修改元件隱藏的方式，來讓元件雖然是看不到的(假隱藏)但是還是可以取得寬高，

但是我自己的情況是…不是該元件被隱藏，而是他的老爸被隱藏，所以這些方法把他的隱藏方式修改…其實還是看不到…

所以想到另外一個概念，就是把他 clone 出來 body 好了，這樣應該不會看不到了，把資訊取完再砍掉吧…

如果該元素有其他 class 的 css 設定下可能會有不太準…只是至少我暫時解決了…

/**
 * @license jQuery Hawk 0.1
 *
 * Copyright 2011 mlwmlw
 * licensed under the MIT.
 */

(function($) {
	var supported = ['height', 'width', 'outerHeight', 'outerWidth', 'innerHeight', 'innerWidth'];
	var check = {};
	for(var i in supported) {
		check[supported[i]] = true;
	}

	var ref = {};

	var $target = $('body');
	$.fn.hawk = function(type) {
		if(typeof(check[supported[i]]) == 'undefined') {
			throw 'unsupported method';
		}
		var $clone = $(this).clone();
		$clone.css({'position':'absolute', 'visibility':'hidden', 'display':'block'}).appendTo($target);
		var result = null;

		if(typeof(ref[type]) != 'undefined') {
			result = ref[type].apply($clone,[]);
		}
		else {
			result = $clone[type]();
		}
		//alert($(this).attr('class') + ': '+ type + ': '+ result);
		$clone.remove();
		return result;
	}

	$.hawk = function(cmd, options) {

		if(cmd == 'install') {
			for(var i in supported) {
				ref[supported[i]] = $.fn[supported[i]];
				$.fn[supported[i]] = (function(type) {
					return (function() {
						return $(this).hawk(type);
					})
				})(supported[i]);
			}
		}
		else if(cmd == 'restore') {
			for(var i in supported) {
				$.fn[supported[i]] = ref[supported[i]];
			}
			ref = {};
		}
	}
})(jQuery);

api 是參考 actual 的設計…

$('xxx:hidden').hawk('width');
$('xxx:hidden').hawk('height');
$('xxx:hidden').hawk('innerWidth');
$('xxx:hidden').hawk('outerWidth');

只是因為我遇到得問題是其他的 plugin 在取的時候出錯，
也不太可能去把他的 source code 都改成這個 API 吧…太麻煩，之後更新也會有問題，
所以就額外寫了安裝這個 plugin 的函式：
$.hawk(‘install’)
這樣就會把上述那些取寬高資訊的函式預設成 jQuery 內建的，
例如 $(‘xx’).height 就會被換成 $(‘xx’).hawk(‘height’);
只是安裝了以後一直這樣取值效能會很差，這些函式會一直 clone dom，
所以安裝了以後，但是用完了就能用這函式移除這層關聯：
$.hawk(‘restore’); 這樣就沒事了…