tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-5946530704742130970.post-31349628408426494742008-11-15T18:04:00.007+08:002012-05-18T17:58:21.566+08:00在固定大小的排版中做圖片選取之前所用的圖片裁切介面(<a href="/2008/04/moocrop-square.html">MooCrop 正方形選取( Square )</a>)<br />
在大尺寸圖片的選取上不是很直覺<br />
明明就只是要裁出一張固定大小的圖<br />
卻暫了大量的版面配置<br />
所以我採用網路地圖的機制做了一個裁切工具<br />
這個想法目前還只是個雛形<br />
<br />
<a href="http://dl.dropbox.com/u/16784943/code-demo/image_select.htm" target="_blank">展示頁面(Demo Page)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-80798556506524118682008-05-03T16:01:00.003+08:002013-06-11T21:03:02.309+08:00善用 Mootools 的 onComplete 事件用了 <a target="_blank" href="http://mootools.net/">Mootools</a> 那麼久終於有點心得了,尤其是在 Effects 類別庫上,因為之前一直對變換效果的後續處理很困擾,而採用的延遲函數,可是這不是很好的作法,因為 JavaScript 的計時器非常的耗資源,會讓整個網頁的流暢度降低。<br />
<br />
而其實在 Effects 都附有 onComplete 事件可以使用,這個事件會在變換效果結束後被呼叫,而且還附帶本身物件(this),利用 <a target="_blank" href="http://www.getfirebug.com/">firebug</a> 的 console.log() 函數可以直接觀察 this 所帶有的成員參數,這比之前的延遲函數要好多了,而且程式碼也不會那麼多。<br />
<br />
其他的類別庫中也有定義或繼承 onComplete 事件,如 Drag、Remote 及 Plugins 中的部分類別都帶有此事件,雖然官方的 docs 沒有寫得很清楚,只寫了繼承的來源及本身帶有的成員函數,有部分的成員變數可能要看原始碼會比較清楚,<a target="_blank" href="http://mootools.net/">Mootools</a> 的設計架構其實在撰寫上還蠻具彈性的。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-72775290483079580442008-04-30T00:54:00.010+08:002010-05-27T00:32:42.576+08:00Mootools 可以對物件陣列做 forEach 操作的函數除了上次在<a href="/2008/02/mootools-event.html">Mootools Event 設定函數</a>中提到 <span style="color: rgb(255, 0, 0);">addEvent()</span> 和 <span style="color: rgb(255, 0, 0);">addEvents()</span> 可以直接對物件陣列做操作外,Mootools 還有其他函數也支援這種用法:<br /><pre class="js" name="code"><br />//移除 id="button" 下所有 <a> 元素群的 click 事件<br />$$('#button a').removeEvent('click');<br /><br />//移除 id="button" 下所有 <a> 元素群中的所有事件<br />$$('#button a').removeEvents();<br /><br />//檢查 id="button" 下所有 <a> 元素群中是否有此"red"的class樣式<br />//會回傳一個 Array<br />$$('#button a').hasClass('red');<br /><br />//為 id="button" 下所有 <a> 元素群加入"red"的class樣式<br />$$('#button a').addClass('red');<br /><br />//移除 id="button" 下所有 <a> 元素群中有"red"的class樣式<br />$$('#button a').removeClass('red');<br /><br />//切換 id="button" 下所有 <a> 元素群中"red"的class樣式<br />$$('#button a').toggleClass('red');<br /><br />//設定 id="button" 下所有 <a> 元素群的color樣式為#F00<br />$$('#button a').setStyle('color','#F00');<br /><br />//設定 id="button" 下所有 <a> 元素群的color及width樣式<br />$$('#button a').setStyles({<br /> 'color':'#F00',<br /> 'width': 300<br />});<br /></pre><br /><br />類別庫:<br />Element.jsJax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-35320303088808439602008-04-06T22:50:00.011+08:002013-06-11T20:57:03.550+08:00MooCrop 正方形選取( Square )<a target="_blank" href="http://www.nwhite.net/MooCrop/">MooCrop</a> 是建構 <a target="_blank" href="http://mootools.net/">MooTools</a> 上的圖片裁切類別<br />
不過本身沒有方形鎖定的功能<br />
我利用一個簡單的觀念改寫原本的函數<br />
<span style="color: rgb(255, 0, 0); font-weight: bold;">將兩個方向的寬高同時加減</span><br />
在初始為正方形的狀況下<br />
不管如何縮放都會達成正方形<br />
<br />
我還增加預覽裁切功能<br />
<br />
<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/MooCropSquare.zip">範例(example)</a><br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/moocrop.htm" target="_blank">展示(demo)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-30816612637558058382008-02-12T23:10:00.009+08:002009-04-14T00:56:04.211+08:00Mootools Event 事件函數Mootools 的事件設定可以支援群組元素<br /><pre class="js" name="code"><br /><br />//設定 id="button" 元素的 click 事件<br />$('button').addEvent('click',function(){<br /> alert(this.getHTML());<br />});<br /><br />//設定 id="button" 下所有 <a> 元素群的 click 事件<br />$$('#button a').addEvent('click',function(e){<br /> alert(this.getHTML());<br />});<br /><br />//設定 id="button" 元素的 click 與 mouseover 事件<br />$('button').addEvents({<br /> 'click': function(e){<br /> alert('click');<br /> },<br /> 'mouseover': function(e){<br /> alert('mouseover');<br /> }<br />});<br /><br />//移除 id="button" 元素上的 click 事件<br />$('button').removeEvents('click');<br />//執行 id="button" 元素上的 click 事件<br />$('button').fireEvent('click');<br /><br /></pre><br /><br /><span style="color: rgb(255, 0, 0);">其他事件名稱:</span><br /><table border="1" cellpadding="4"><tbody><tr><th rowspan="2">圖片事件</th><td>abort</td><td>讀取中斷</td></tr><tr><td>error</td><td>讀取錯誤</td></tr><tr><th rowspan="2">焦點事件</th><td>blur</td><td>離開焦點</td></tr><tr><td>focus</td><td>取得焦點</td></tr><tr><th>選單事件</th><td>change</td><td>選單狀態改變</td></tr><tr><th rowspan="4">滑鼠按鍵事件</th><td>click</td><td>點擊點選鍵</td></tr><tr><td>dblclick</td><td>點擊二次點選鍵</td></tr><tr><td>mousedown</td><td>按下點選鍵時</td></tr><tr><td>mouseup</td><td>放開點選鍵時</td></tr><tr><th rowspan="2">鍵盤事件</th><td>keydown</td><td>鍵盤按下時</td></tr><tr><td>keyup</td><td>鍵盤放開時</td></tr><tr><th rowspan="2">頁面讀取</th><td>load</td><td>讀取結束時</td></tr><tr><td>unload</td><td>切換頁面時</td></tr><tr><th rowspan="5">滑鼠事件</th><td>mouseover</td><td>游標重疊時</td></tr><tr><td>mouseout</td><td>游標離開時</td></tr><tr><td>mousemove</td><td>游標移動時</td></tr><tr><td>mouseenter</td><td>游標進入時, 經過子元素時不觸發</td></tr><tr><td>mouseleave</td><td>游標離開時, 經過子元素時不觸發</td></tr><tr><th rowspan="2">表單事件</th><td>submit</td><td>表單送出時</td></tr><tr><td>reset</td><td>表單重置時</td></tr><tr><th>捲軸事件</th><td>scroll</td><td>捲動時</td></tr><tr><th>文字選取事件</th><td>select</td><td>選取文字時</td></tr></table><br /><br />類別庫:<br /><del>Element.Event.js</del><br />Element-Event.jsJax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-18017103603326863032008-02-11T16:28:00.006+08:002013-06-11T20:52:53.312+08:00Mootools Element 選擇函數<span style="color: rgb(255, 0, 0);">$('button')</span><br />
這個用法在很多 framework 上都一樣,只是簡化了<br />
document.getElementById('button') 這個函數<br />
<br />
<br />
<span style="color: rgb(255, 0, 0);">$$('#button')</span><br />
這個選擇函數跟 CSS 的選擇方式是一樣的,可以選出一個元素群<br />
<br />
<span style="color: rgb(255, 0, 0);">$$('#button a')</span><br />
取得 id="button" 下所有 <a> 的元素<br />
<br />
<span style="color: rgb(255, 0, 0);">$$('#button a','#button b')</span><br />
取得 id="button" 下所有 <a> 及 <b> 的元素<br />
<br />
<span style="color: rgb(255, 0, 0);">$$('#button a.link')</span><br />
取得 id="button" 下所有 <a class="link"> 的元素<br />
<br />
<br />
<span style="color: rgb(255, 0, 0);">$('button').getElements('a[title=link]')</span><br />
取得 id="button" 下所有 <a title="link"> 的元素<br />
<br />
<span style="color: rgb(255, 0, 0);">$('button').getElements('a[title$=ink]') </span><br />
取得 id="button" 下所有 <a> 屬性 title 以 ink 結尾的元素<br />
<br />
其他選擇方式:<br />
<span style="color: rgb(0, 0, 153);"> = :等於</span><br />
<span style="color: rgb(0, 0, 153);"> ^=:開始等於</span><br />
<span style="color: rgb(0, 0, 153);"> $=:結尾等於</span><br />
<span style="color: rgb(0, 0, 153);"> !=:不等於</span><br />
<br />
<br />
<span style="color: rgb(255, 0, 0);">$('button').getElement('a[name=link]')</span><br />
與 getElements() 相同:<br />
但只會取得 id="button" 下<span style="color: rgb(102, 0, 204);">第一個</span> <a name="link"> 的元素<br />
<br />
<span style="color: rgb(255, 0, 0);">$('button').getElementsBySelector('a','b')</span><br />
與 getElements() 相同:<br />
可以取得 id="button" 下所有 <a> 及 <b> 的元素<br />
<br />
<br />
類別庫:<br />
Element.js<br />
<del>Element.Selectors.js</del><br />
Element-Selectors.jsJax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0