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

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

原始碼

1. //移除 id="button" 下所有 <a> 元素群的 click 事件 
2. $$('#button a').removeEvent('click'); 
3.  
4. //移除 id="button" 下所有 <a> 元素群中的所有事件 
5. $$('#button a').removeEvents(); 
6.  
7. //檢查 id="button" 下所有 <a> 元素群中是否有此"red"的class樣式 
8. //會回傳一個 Array 
9. $$('#button a').hasClass('red'); 
10.  
11. //為 id="button" 下所有 <a> 元素群加入"red"的class樣式 
12. $$('#button a').addClass('red'); 
13.  
14. //移除 id="button" 下所有 <a> 元素群中有"red"的class樣式 
15. $$('#button a').removeClass('red'); 
16.  
17. //切換 id="button" 下所有 <a> 元素群中"red"的class樣式 
18. $$('#button a').toggleClass('red'); 
19.  
20. //設定 id="button" 下所有 <a> 元素群的color樣式為#F00 
21. $$('#button a').setStyle('color','#F00'); 
22.  
23. //設定 id="button" 下所有 <a> 元素群的color及width樣式 
24. $$('#button a').setStyles({ 
25.   'color':'#F00', 
26.   'width': 300 
27. }); 

//移除 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

iGoogle 上的日曆小工具

將日曆加入 iGoogle 分頁，這個小工具還可以置換成其他網頁
介紹網站：Your Page Here (an iGoogle gadget)
工具連結

利用 HTML/Javascript 小工具將 Google 日曆的 iframe 加入 iGoogle
介紹網站：Add Full Web Pages to iGoogle
工具連結

[PHP] 圖檔上傳檢查

原始碼

1. <?php 
2. /*檢查上傳的圖片類型，並轉存成 JPG*/ 
3. if (isset ($_FILES['image'])) { 
4.  $imgFile = $_FILES['image']; 
5.  /*檔案存放路徑(目錄權限必須可寫入)*/ 
6.  $imagePathDir = '/home/www/pics/'; 
7.  /*上傳圖片文件類型列表 */ 
8.  $uptypes = array ( 
9.    'image/jpg', 
10.    'image/jpeg', 
11.    'image/pjpeg', 
12.    'image/gif', 
13.    'image/png' 
14.  ); 
15.  /*產生唯一的檔案名稱*/ 
16.  $imgName = md5(uniqid(rand())) . '.jpg'; 
17.  /*檢查檔案大小 2Mb*/ 
18.  if ($imgFile['size'] > 2097152) { 
19.    echo '檔案過大'; 
20.    /*檢查文件類型 */ 
21.    } elseif(in_array($imgFile['type'], $uptypes)) { 
22.    /*上傳圖片類型為jpg,pjpeg,jpeg */ 
23.    if (strstr($imgFile['type'], "jp")) { 
24.      if(!($source = @ imageCreatefromjpeg($imgFile['tmp_name']))){ 
25.        echo '檔案類型錯誤'; 
26.        return; 
27.      } 
28.      /*上傳圖片類型為png */ 
29.    }elseif(strstr($imgFile['type'], "png")) { 
30.      if(!($source = @ imagecreatefrompng($imgFile['tmp_name']))){ 
31.        echo '檔案類型錯誤'; 
32.        return; 
33.      } 
34.      /*上傳圖片類型為gif */ 
35.    }elseif(strstr($imgFile['type'], "gif")) { 
36.      if(!($source = @ imagecreatefromgif($imgFile['tmp_name']))){ 
37.        echo '檔案類型錯誤'; 
38.        return; 
39.      } 
40.      /*其他例外圖片排除 */ 
41.    } else { 
42.      echo '檔案類型錯誤'; 
43.      return; 
44.    } 
45.    $w = imagesx($source); /*取得圖片的寬 */ 
46.    $h = imagesy($source); /*取得圖片的高 */ 
47.    /*檢查檔案最小尺寸 160px*160px */ 
48.    if ($w < 160 || $h < 160) { 
49.      echo '檔案過小'; 
50.      return; 
51.    } 
52.    /* 儲存到檔案目錄(JPG) */ 
53.    imagejpeg($source, $imagePathDir . $imgName); 
54.    /* 列出檔案路徑 */ 
55.    echo $imagePathDir . $imgName; 
56.  } else { 
57.    echo '檔案類型錯誤'; 
58.  } 
59. } else { 
60.  echo '其他錯誤'; 
61. } 
62. ?> 

<?php
/*檢查上傳的圖片類型，並轉存成 JPG*/
if (isset ($_FILES['image'])) {
  $imgFile = $_FILES['image'];
  /*檔案存放路徑(目錄權限必須可寫入)*/
  $imagePathDir = '/home/www/pics/';
  /*上傳圖片文件類型列表 */
  $uptypes = array (
    'image/jpg',
    'image/jpeg',
    'image/pjpeg',
    'image/gif',
    'image/png'
  );
  /*產生唯一的檔案名稱*/
  $imgName = md5(uniqid(rand())) . '.jpg';
  /*檢查檔案大小 2Mb*/
  if ($imgFile['size'] > 2097152) {
    echo '檔案過大';
    /*檢查文件類型 */
    } elseif(in_array($imgFile['type'], $uptypes)) {
    /*上傳圖片類型為jpg,pjpeg,jpeg */
    if (strstr($imgFile['type'], "jp")) {
      if(!($source = @ imageCreatefromjpeg($imgFile['tmp_name']))){
        echo '檔案類型錯誤';
        return;
      }
      /*上傳圖片類型為png */
    }elseif(strstr($imgFile['type'], "png")) {
      if(!($source = @ imagecreatefrompng($imgFile['tmp_name']))){
        echo '檔案類型錯誤';
        return;
      }
      /*上傳圖片類型為gif */
    }elseif(strstr($imgFile['type'], "gif")) {
      if(!($source = @ imagecreatefromgif($imgFile['tmp_name']))){
        echo '檔案類型錯誤';
        return;
      }
      /*其他例外圖片排除 */
    } else {
      echo '檔案類型錯誤';
      return;
    }
    $w = imagesx($source); /*取得圖片的寬 */
    $h = imagesy($source); /*取得圖片的高 */
    /*檢查檔案最小尺寸 160px*160px */
    if ($w < 160 || $h < 160) {
      echo '檔案過小';
      return;
    }
    /* 儲存到檔案目錄(JPG) */
    imagejpeg($source, $imagePathDir . $imgName);
    /* 列出檔案路徑 */
    echo $imagePathDir . $imgName;
  } else {
    echo '檔案類型錯誤';
  }
} else {
  echo '其他錯誤';
}
?>

MooCrop 正方形選取( Square )

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

我還增加預覽裁切功能

範例(example)
展示(demo)