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

$('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’); 這樣就沒事了…

nowjs 伺服器(Server)建立函式,用戶端(Client)呼叫,即時系統

githubhttp://nowjs.com/

這個新的 module 做了一件有趣的事,由於 node.js 在伺服器寫 js 已經蠻酷的,進一步應該很多人都會聯想到,要怎麼在伺服器跟瀏覽器上共用已經寫過的 js 函式。

也有些人提出了一些方法來做,可以做一些簡單的判斷來做目前環境是瀏覽器或是伺服器來做不同的處理。

而這個 nowjs 主要主打的是在伺服器寫一個 function,你可以在瀏覽器端呼叫到,已經頗有趣的以外,呼叫到能幹麼呢?

主要就是傳訊息,你可以直接在 client 端呼叫伺服器的函式,並同時在伺服器呼叫一個函式,等同於呼叫 client 端的函式,達到廣播到所有使用者端的效果,其實基於web socket 就能達到這個效果,但能想出這個介面並設計出來也還頗有新意的。

跟之前有 lib 做到 php 在伺服器端建立 ajax 的概念有點類似,想要簡化 ajax 要寫 js 對某些人所帶來的[[困擾]],但這個實現我看起來覺得蠻失敗的..

但這概念搬到 nodejs 的世界來反而有不一樣的出發點,因為這邊沒有在想說這是件麻煩,而是達到用 js 做到跨前後端的假象…

但要小心要是做的太漂亮,反而容易讓新手搞不懂前後端的分別了…其實 nodejs 對 web 新手來講應該不是一個好玩具…

這部份未來倒是可以發展一下…讓開發變得更適合新手應該比較容易推廣

範例:

//server
var everyone = require("now").initialize(httpServer);
//建立一個函式 供 client 呼叫 , 並呼叫一個 client 的函式
everyone.now.distributeMessage = function(message){
  everyone.now.receiveMessage(this.now.name, message);
};
//client
<script type="text/javascript" src="http://localhost:8080/nowjs/now.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    now.name = 'mlwmlw';
    now.distributeMessage('hello');
  //設計一個函式讓 server 可以呼叫= =?
    now.receiveMessage = function(name, message) {
        alert(name + ':' + message);
    };
});

以下是官方教學影片…

參考資源:

Js Sites

JavaScript Garden http://bonsaiden.github.com/JavaScript-Garden/

dailyjs http://dailyjs.com/

howtonode http://howtonode.org/

 

http://blog.mixu.net/2011/02/02/essential-node-js-patterns-and-snippets/

介紹 nodejs 的一些 pattern ,js 基本的物件使用,非同步 flow 的控制。

另外寫一個我原本想像物件的用法。

var f1 = new Flow();
f1.add(a);
f1.add([b,c]);
f1.run(function() {
	console.log('done');
});

var f2 = new Flow([a,b,c]);
f2.run(function() {
	console.log('done');
});

Nodejs MySQL ORM Module sequelizejs

thechangelog 的介紹

sequelizejs 官網

github http://github.com/sdepold/sequelize

可以定義結構,同步資料庫,新增修改刪除,join資料表。

是目前我看過 nodejs orm 模組裡面最完整且介面設計蠻容易的。

且 github 上此類型較多人追蹤的專案。

//database connection
var sequelize = new Sequelize('database', 'username', 'password', {
host: "my.server.tld",
port: 12345
})
//define struct
var Project = sequelize.define('Project', {
title: Sequelize.STRING,
description: Sequelize.TEXT
})

//insert
var project = new Project({
title: 'my awesome project',
description: 'woot woot. this will make me a rich man'
});
project.save();
//where
Project.find({ title: 'aProject' }, function(project) {
  // project will be the first entry of the Projects table 
  //with the title 'aProject' || null
})
//join
Project.hasMany('member')