jQurey 套件

masonry

用 jQuery 來實作一種 css float 無法達成的 float 方式,會自動往上補。在 resize 時還有特效,很酷…

應該會有特殊情境需要用到~

http://elrte.org/ elRTE

用 jQuery UI 開發所見即所得(WYSIWYG)編輯器,完整度剖高,乍看之下有 tinymce 的感覺。

基於 jQuery 速度跟大小與發展上應有他的優勢在。

他還另外開發了一套 elFinder 有綁在編輯器裡面的檔案管理功能,也很強大完整。

支援各式檔案操作甚至可以拖曳~我自己找過元件來兜過,當時沒有發現他,不然應該會基於他來改~

http://thrivingkings.com/apprise/ pop dialog 工具


現在系統開發上都用 jquery prompt 來實作,主要是有參考樣式作為基底,功能上與這個大圖小異,

看喜歡哪種樣式與 api 選用囉~

leanModel http://leanmodal.finelysliced.com.au/

彈跳視窗,類似 jQuery dailog 不過樣式蠻漂亮的,且似乎對製作輸入的介面很親和…

dropkick http://jamielottering.github.com/DropKick/

自製的下拉式選單,可以用來替代 select ,因可具有 html 的特性與樣式。

只是不會因應捲軸位置而往上擺。

 

資料來源:

jquery checkbox tree

有幾套不錯的,這種類的 plugin 有幾個點可以比較,樣式、選擇後影響子節點的方式、維護。

描述一下關於這個套件需要實作的點。

  • 點上層下層應該被全選,下層全取消上層也會被取消。有相依關係。
  • 如果下層被沒有被全選,上層應要有中間的狀態,一般在安裝軟體套件會用框框表示。

但這種模式並不能滿足所有的需求,我的需求是我選了一個點以後,不一定要連動下面的層級,或者是選了一個點以後也不要連動上面的層級。依照這種都不需要連動的概念,實作上就完全沒辦法輔助到使用者。所以我想要用第三種狀態來表示一個概念,來修改一套既能不連動又可以輔助的 plugin。

使用概念如下圖:

單點包含下層全選,雙點只有下層取消,三點包含下層全取消。

一套是 http://code.google.com/p/checkboxtree/ 關於事件與設定的功能頗完整,但是沒樣式,沒特別要求就用他吧,簡單且完整性高,參數丟法不太喜歡。

另外一套是 checktree  http://project.yctin.com/checktree/

這個版本是經由第三方修改一些 bug 的因為原版沒維護了,裡面有寫歷史專案的追溯,不喜歡可以自己找原版。這版本有支援半選取的狀態,且有樣式,但輔助函式過少。

有個小 bug ,只有一個元素然後很多層的時候會發生半選取算法錯誤,因為要下而上觸發而不是由上而下~

125 行
$(this).parents(“ul”).siblings(“:checkbox”).change();

改成
$($(this).parents(“ul”).siblings(“:checkbox”).get().reverse()).change();

這套樣式與功能超多,因此略閒肥大,不是我的菜…但是介面可以參考。

http://wwwendt.de/tech/dynatree/doc/samples.html

jQuery 隱藏元件取得寬高

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 的設計…

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