JQuery

Backbone.js Event 事件，介紹 Event 之前，大家可以先看看 Backbone.js 的初學介紹，該教學文件可以學習如何載入 Backbone.js library，利用此套件如何去制定各種事件。Backbone.js 提供了3個 method 去控制事件產生、移除、執行，分別是 on(bind)、off(unbind)、trigger。文字上寫得很清楚 on 就等於 bind，off 就是 unbind，最後就是如何去 trigger 事件。底下就來簡單舉例:

既上一篇作者寫了 Javascript 前端工具 Backbone.js Framework 初學介紹，這次來將程式改寫成 jQuery 寫法，藉這個機會來介紹 jQuery 新功能 on API，底下來看看 jQuery event handle 的演進

//在 jQuery 1.3 以上版本
$(selector).live(events, data, handler);
//在 jQuery 1.4.3 以上版本 
$(document).delegate(selector, events, data, handler);
//在 jQuery 1.7 以上版本
$(document).on(events, selector, data, handler);

PHP, Ruby, Python .. 等語言都已經相當熟悉，進階開發者也都接觸了好用的後端 Framework 如 CodeIgniter, CakePHP, Django, Ruby on Rail, Yii, Symfony .. 等，用 Framework 最大的好處並不是在 Framework 提供了大量工具，而是制定了 MVC 架構，讓專案多位開發者可以遵循，上了講了這麼多後端 MVC Framework，那麼前端呢？接下來介紹前端強大工具: Backbone.js

什麼是 Backbone.js 簡單來說 Backbone.js 就是一套前端 Javascript Framework，它提供 MVC 架構，相信大家都玩過後端 MVC，那至於前端呢，好像比較少人提到，這就是介紹 Backbone.js 最主要的目的。Backbone.js 包含了 Model View Controller 來讓使者操作，Model 提供了key-value 結構，以及可以 binding 大量 event，開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。如果想瞭解 Backbone.js 線上文件可以參考

GitHub 網站，如果想瞭解程式碼可以參考 source code 註解。

在網頁裡面用 Select 是很常遇到的，之前也寫了一篇如何利用 jQuery 動態增加 option 或取值，jQuery 部份就不介紹了，那是需要搭配 jQuery Plugin: Select box manipulation，今天要介紹的是如何用 javascript 動態取值或者是增加 option 選項。因為我發現有使用者直接利用 innerHtml 的方式來把資料塞入到 Select 裡面，雖然 FireFox 或 Chrome 都可以正常運作，但是遇到 IE 還是沒辦法動。

如何取得 select element 底下很多方法可以取得 select element: 1. 透過 form name + element name

document.myform.selectname

document.myform.elements

document.getElementById("selectid")

在這裡跟大家推薦一本國外的書籍，也就是 Elated.com 網站作者 Matt Doyle 推出的一本新書 Master Mobile Web Apps with jQuery Mobile，此作者也有推出 PHP 及 Photoshop 的書籍，本人相當佩服有美工天份又會寫程式人才。然而現在當紅的 Mobile Device，大家相繼為了 iOS, Android 或其他手持式裝置撰寫 Web 介面，目前網路上大家推的其中一套就是 jQuery Mobile，而我呢，正在摸索另一套強大的 Web App Framework: Sencha Touch，功能來比的話，個人覺得 Sencha Touch 優勢比較多，之後有機會再來寫一系列的 Sencha Touch 文章。此書有提供目錄可以參考，該作者會教大家如何搭配 PHP 跟 MySQL 結合 jQuery Mobile API 來撰寫程式，書籍應該是蠻完整的，目前售價美金19元，如果有興趣的人可以上網下單。

之前寫了一篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection)，這次可以來加上 Android 手機版本，其實就是分析瀏覽器 User Agent 來達到目的，底下分享 PHP 跟 Javascript 作法

PHP 方法

if(stripos($_SERVER['HTTP_USER_AGENT'],'Android') !== false) 
{
	header('Location: http://android.xxx.com');
	exit();
}

Javascript 方法

if(navigator.userAgent.match(/Android/i))
{
	window.location = 'http://android.xxx.com';
}

Apache .htaccess 方法 用

Apache mod rewrite 方法

RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://android.xxx.com [R=301]