在固定大小的排版中做圖片選取

之前所用的圖片裁切介面(MooCrop 正方形選取( Square ))
在大尺寸圖片的選取上不是很直覺
明明就只是要裁出一張固定大小的圖
卻暫了大量的版面配置
所以我採用網路地圖的機制做了一個裁切工具
這個想法目前還只是個雛形

展示頁面(Demo Page)

善用 Mootools 的 onComplete 事件

用了 Mootools 那麼久終於有點心得了，尤其是在 Effects 類別庫上，因為之前一直對變換效果的後續處理很困擾，而採用的延遲函數，可是這不是很好的作法，因為 JavaScript 的計時器非常的耗資源，會讓整個網頁的流暢度降低。

而其實在 Effects 都附有 onComplete 事件可以使用，這個事件會在變換效果結束後被呼叫，而且還附帶本身物件(this)，利用 firebug 的 console.log() 函數可以直接觀察 this 所帶有的成員參數，這比之前的延遲函數要好多了，而且程式碼也不會那麼多。

其他的類別庫中也有定義或繼承 onComplete 事件，如 Drag、Remote 及 Plugins 中的部分類別都帶有此事件，雖然官方的 docs 沒有寫得很清楚，只寫了繼承的來源及本身帶有的成員函數，有部分的成員變數可能要看原始碼會比較清楚，Mootools 的設計架構其實在撰寫上還蠻具彈性的。

Mootools 可以對物件陣列做 forEach 操作的函數

除了上次在Mootools Event 設定函數中提到 addEvent() 和 addEvents() 可以直接對物件陣列做操作外，Mootools 還有其他函數也支援這種用法：

//移除 id="button" 下所有 <a> 元素群的 click 事件
$$('#button a').removeEvent('click');

//移除 id="button" 下所有 <a> 元素群中的所有事件
$$('#button a').removeEvents();

//檢查 id="button" 下所有 <a> 元素群中是否有此"red"的class樣式
//會回傳一個 Array
$$('#button a').hasClass('red');

//為 id="button" 下所有 <a> 元素群加入"red"的class樣式
$$('#button a').addClass('red');

//移除 id="button" 下所有 <a> 元素群中有"red"的class樣式
$$('#button a').removeClass('red');

//切換 id="button" 下所有 <a> 元素群中"red"的class樣式
$$('#button a').toggleClass('red');

//設定 id="button" 下所有 <a> 元素群的color樣式為#F00
$$('#button a').setStyle('color','#F00');

//設定 id="button" 下所有 <a> 元素群的color及width樣式
$$('#button a').setStyles({
   'color':'#F00',
   'width': 300
});

類別庫：
Element.js

MooCrop 正方形選取( Square )

MooCrop 是建構 MooTools 上的圖片裁切類別
不過本身沒有方形鎖定的功能
我利用一個簡單的觀念改寫原本的函數
將兩個方向的寬高同時加減
在初始為正方形的狀況下
不管如何縮放都會達成正方形

我還增加預覽裁切功能

範例(example)
展示(demo)

Mootools Event 事件函數

Mootools 的事件設定可以支援群組元素

//設定 id="button" 元素的 click 事件
$('button').addEvent('click',function(){
   alert(this.getHTML());
});

//設定 id="button" 下所有 <a> 元素群的 click 事件
$$('#button a').addEvent('click',function(e){
   alert(this.getHTML());
});

//設定 id="button" 元素的 click 與 mouseover 事件
$('button').addEvents({
   'click': function(e){
       alert('click');
   },
   'mouseover': function(e){
       alert('mouseover');
   }
});

//移除 id="button" 元素上的 click 事件
$('button').removeEvents('click');
//執行 id="button" 元素上的 click 事件
$('button').fireEvent('click');

其他事件名稱：

圖片事件	abort	讀取中斷
	error	讀取錯誤
焦點事件	blur	離開焦點
	focus	取得焦點
選單事件	change	選單狀態改變
滑鼠按鍵事件	click	點擊點選鍵
	dblclick	點擊二次點選鍵
	mousedown	按下點選鍵時
	mouseup	放開點選鍵時
鍵盤事件	keydown	鍵盤按下時
	keyup	鍵盤放開時
頁面讀取	load	讀取結束時
	unload	切換頁面時
滑鼠事件	mouseover	游標重疊時
	mouseout	游標離開時
	mousemove	游標移動時
	mouseenter	游標進入時， 經過子元素時不觸發
	mouseleave	游標離開時， 經過子元素時不觸發
表單事件	submit	表單送出時
	reset	表單重置時
捲軸事件	scroll	捲動時
文字選取事件	select	選取文字時

類別庫：
Element.Event.js
Element-Event.js

Mootools Element 選擇函數

$('button')
這個用法在很多 framework 上都一樣，只是簡化了
document.getElementById('button') 這個函數


$$('#button')
這個選擇函數跟 CSS 的選擇方式是一樣的，可以選出一個元素群

$$('#button a')
取得 id="button" 下所有 <a> 的元素

$$('#button a','#button b')
取得 id="button" 下所有 <a> 及 <b> 的元素

$$('#button a.link')
取得 id="button" 下所有 <a class="link"> 的元素


$('button').getElements('a[title=link]')
取得 id="button" 下所有 <a title="link"> 的元素

$('button').getElements('a[title$=ink]')
取得 id="button" 下所有 <a> 屬性 title 以 ink 結尾的元素

其他選擇方式：
= ：等於
^=：開始等於
$=：結尾等於
!=：不等於


$('button').getElement('a[name=link]')
與 getElements() 相同：
但只會取得 id="button" 下第一個 <a name="link"> 的元素

$('button').getElementsBySelector('a','b')
與 getElements() 相同：
可以取得 id="button" 下所有 <a> 及 <b> 的元素


類別庫：
Element.js
Element.Selectors.js
Element-Selectors.js