jQuery Checkbox 全選與取消全選

會有這篇筆記，一切都是起因於 jQuery 1.6 做了一些衝動的事：改寫了 attr(...) 的用法，詳情太囉唆，請看以下網址：

jQuery 1.6.1上場救援，不用改寫attr()囉
jQuery 1.6 .attr() 和 .prop()

也就是我習慣用的 attr(...) 變得很奇怪，尤其在控制 checkbox 的勾與不勾時，行為非常詭異，詭異到我不想去了解發生了什麼事。

解法很簡單，改用 prop(...) 就好了。

// 勾選或取消「全選」時，checkbox 的 checked 屬性（prop）跟著 checkboxAll 走就可以
$('.checkboxAll').click(function(){
  $('.checkbox').prop('checked', $('.checkboxAll').prop('checked'));
});
// 單獨勾選或取消 checkbox 時，須同步狀態到 checkboxAll 
$('.checkbox').click(function(){
  var checkedLength = $('.checkbox:checked').length;
  var checkboxLength = $('.checkbox').length;
  $('.checkboxAll').prop('checked', checkedLength == checkboxLength);
});

prop(...) 只會回傳 true 或 false，不會回傳空字串、undefined 或 checked，事情變得簡單多了。
---
---
---

Responsive Web Design

Responsive Web Design？

智慧型手機的興起讓瀏覽網頁的螢幕變小，但既有網頁多半是固定寬度，一開始手機瀏覽器都是將網頁縮小到可以放進那小小的螢幕裡，但是這種作法一點幫助也沒有，圖那麼小、文字那麼小，什麼都看不清楚，只能在那不斷的放大放大縮小縮小，頭都暈了，怎麼上網呢？

那為了手機另外做一個網站可以嗎？是不是只要有錢有時間就可以，其實不然，不只是建置的時間，還有維護的時間都要加倍，最大的問題是，給手機用的網頁寬度要設多少呢？桌機從七百多像素到將近一千像素都有（15吋到近30吋的螢幕），桌機小螢幕遇到大網頁挺多滑鼠拉一拉就好了，那手機呢？三吋、四吋、五吋到六吋的螢幕都有，甚至還有十幾吋的平板，這光是網頁寬度就訂不出來了，寬度訂小了，大螢幕很痛苦，訂的大了，小螢幕又沒滑鼠可以拉，這條路還走得下去嗎？

那有沒有可能一套網頁通吃呢？其實是有可能的，這就是 Responsive Web Design 的目的。

Responsive Web Design 組成

Responsive Web Design 由三種 CSS 技術組成：

• Media Query
• Fluid Layout
• Flexible Images

從技術的名稱可以想像 Responsive Web Design 的內容，以 Media Query 決定使用不同的 Fluid Layout，並輔以不同的 Flexible Images。

Clickable Div in IE

Clickable Div

想要做一個隱形連結，例如在一張圖片上有兩個位置可以點，直覺想到可以用兩個absolute的 div 放上去想要的位置，然後為 div 加上 click listener。

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="background-image: url('clickable.jpg'); width: 400px; height: 275px;">
  <div class="div divA" onclick="alert('Click A');"></div>
  <div class="div divB" onclick="alert('Click B');"></div>
</div>

嗯，在 chrome 與 IE 各版本（ie7 - ie11）都沒問題。

HTML5 與 CSS3 的偵測器 - Modernizr 2.7.1

自從 Firefox 與 Chrome 打破 IE 獨大後，接著智慧型手機在瀏覽器市場帶來更大的衝擊，不只是各家爭鳴，還各版橫行，加上 HTML 5 與 CSS3 帶來許多嶄新的功能，讓網頁開發變得更有挑戰，也更頭大。

「這個新功能很炫，但是可以用了嗎？瀏覽器支援了嗎？」

這是網頁開發一定會遭遇的問題，幸好 Firefox 與 Chrome 更新速度很快，而且常常（偷偷的）自動更新，比較沒有這些問題，但是 IE 就不是這麼一回事了，尤其是一堆舊的 IE 遲遲不願更新的情況，讓 IE 一直是網頁設計最大的挑戰，IE 真的為網頁設計帶來許多就業機會啊！

Modernizr 是什麼？

官方定義如下：

「Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.」

重點如下：

• Javascript 程式
• 用來偵測
• 瀏覽器是否支援 HTML5 與 CSS3 功能

Modernize 的功能如下：

• 用來偵測使用者的瀏覽器是否支援想要使用的功能。
• 適合用來做 Progressive Enhancement。
• 在頁面載入時立即執行所有偵測（可以自訂偵測項目），並將偵測結果放在一個 Javascript 物件（Modernizr）供 Javascript 程式使用，再另外增加 CSS class 到 HTML 物件（html）上供 CSS 使用。
• 目前可以測試超過 40 個功能，而且厲害的是只需要幾毫秒的時間。
• 整合 yepnope.js 做條件式載入，有關 yepnope 請參考 yepnope.js 讓瀏覽器只載入需要的檔案 與 More in yepnope 1.5.4。

Hello Jsoup 1.6.3

處理 HTML 的好工具。

讀 HTML 有兩種方式：

• DOM Navigation - 幾乎是 DOM 與 jQuery 的 Java 版本，API 幾乎一樣
• CSS Selector - 會 CSS 的就知道好用！

除了讀，還可以寫，API 幾乎是 jQuery 的翻版，還可以更正錯誤的 HTML 並輸出。

更棒的是，可以將相對路徑轉成絕對路徑！

萬能的 Google 怎麼不讓我直接輸入 HTML Tags？

怎麼沒有一個 Blog site 有幫寫程式的人想一想呢？好歹你也是寫程式的人啊！

寫部落格文章最怕遇到編輯器自動把<ImNOTAHTMLTag/>當成HTML Tag，然後在最後顯示時搞隱形。

為了讓<ImNOTAHTMLTag/>跟大家說哈囉，得寫成外星文，像這樣：&lt;ImNOTAHTMLTag/&gt;。

事實上，為了讓大家可以看到前面那段外星文，我寫的原文是這樣：&amp;lt;ImNOTAHTMLTag/&amp;gt;。

事實上，為了讓大家可以看到前面那段外星文，我寫的原文是這樣：&amp;amp;lt;ImNOTAHTMLTag/&amp;amp;gt;。

事實上，為了讓大家可以看到前面那段外星文，我寫的原文是這樣：&amp;amp;amp;lt;ImNOTAHTMLTag/&amp;amp;amp;gt;。