jQuery stopPropagation 和 stopImmediatePropagation 比較

 Posted on March 28, 2012  |  1 minutes  |  106 words  |  appleboy

近期在幫公司導入 Backbone.js 技術，把後台全面改寫成 Javascript MVC 架構，技術包含 jQuery + Backbone.js + Underscore.js + Mustache Template，這些技術我想可以寫另外一篇 Backbone.js 初體驗，這邊就先不多說了，在 Backbone.js 的 View 架構裡，可以任意 bind events，程式碼如下: RT.View = Backbone.View.extend({ initialize: function() { if (this.model) { this.model.bind("change", this.render, this); } if (this.collection) { this.collection.bind("all", this.render, this); } }, events: { 'click .add': 'add', 'click .edit': 'edit', 'click .delete': 'delete_item', 'click .delete_all': 'delete_all' }, add: function(e) { }, )}; 上面程式碼可以看到，將 click 事件綁在不同 Class 上，但是問題來了，如果同時 new 兩個 RT. [Read More]
Backbone.js  JavaScrpt  jQuery 

HTML5 placeholder attribute 在 IE 上顯示

 Posted on November 1, 2011  |  1 minutes  |  89 words  |  appleboy

程式設計師在網頁表單上通常會設計很多提示的功能，而在 Html5 提供了 placeholder attribute 這功能，目前 FireFox Safari Google Chrome 都沒有顯示上的問題，唯獨 IE8(含以下)都沒辦法顯示這功能，所以必須透過 javascript 來解決這部份問題了，網路上找到這篇解決方式，底下是原始碼 解決原理其實很簡單，那就先將 placeholder 寫入到 input value 裡面，在 focus event 當下比對 input value 是否等於 placeholder 的值，如果是就清空，反之透過 onblur event 來寫回原先的 placeholder 值，缺點就是如果當 input type = password 的時候會很麻煩。底下提供轉成 CoffeeScript 的程式碼： add_placeholder = (id, placeholder) -> el = document.getElementById(id) el.placeholder = placeholder el.onfocus = () -> if(this.value == this.placeholder) this.value = '' el.style.cssText = '' el.onblur = () -> if(this.value.length == 0) this. [Read More]
html5  javascript  jQuery 

JavaScript Reference Select and Option objects 用法介紹

 Posted on August 19, 2011  |  2 minutes  |  269 words  |  appleboy

在網頁裡面用 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
2. 透過 form name + element 陣列(注意看 select 是位在 form element index 值多少)
document.myform.elements
3. 透過獨一無二的 ID
document.getElementById("selectid")
[Read More]
javascript  jQuery 

推薦一本書籍 Master Mobile Web Apps with jQuery Mobile

 Posted on August 12, 2011  |  1 minutes  |  45 words  |  appleboy

master-mobile-web-apps-with-jqm 在這裡跟大家推薦一本國外的書籍，也就是 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  jQuery Mobile  Sencha  Sencha Touch 

CSS 3 圓角 border-radius 介紹

 Posted on April 3, 2011  |  1 minutes  |  89 words  |  appleboy

目前各家瀏覽器分別開始支援 CSS3，現在 MS 瀏覽器系列只有 IE 9 開始支援 CSS3，所以大家還是趕快升級到 IE 9.0，或者是使用 Google Chrome，FireFox 4.0 吧，以前還沒有 CSS 3 的時候，圓角功能都是靠 jQuery Plugin: Corner，有了 CSS3 大家就不用這麼麻煩了，一行就可以搞定喔。

CSS Border Radius Generator 大家可以參考

CSS Border Radius Generator 這網站，只要輸入4個角所需要的圓角半徑，就會自動產生 CSS 3 的語法喔

/* support Safari, Chrome */
-webkit-border-radius: 5px;
/* support firefox */
-moz-border-radius: 5px;
border-radius: 5px;
也可以個別設定角度 右上圓角：
border-topright-radius: 5px; 
-moz-border-topright-radius: 5px; 
-webkit-border-topright-radius: 5px;
左上圓角：
border-topleft-radius: 5px; 
-moz-border-topleft-radius: 5px; 
-webkit-border-topleft-radius: 5px;
右下圓角：
border-bottomright-radius: 5px; 
-moz-border-bottomright-radius: 5px; 
-webkit-border-bottomright-radius: 5px;
左下圓角：
border-bottomleft-radius: 5px; 
-moz-border-bottomleft-radius: 5px; 
-webkit-border-bottomleft-radius: 5px;
非常簡單，大家以後不用再自己做圓角的圖，CSS3 一行搞定啦 Ref:

css圓角(border-radius)介紹 螞蟻的 CSS border-radius developer mozilla border-radius

CSS  CSS3  jQuery 

2011 OSDC Day 1 筆記

 Posted on March 31, 2011  |  2 minutes  |  268 words  |  appleboy

Update: 補上 OSDC 紀錄影片 2011.06.26 今年很高興可以北上參加 OSDC 2011 (Open Source Developers Conference)，由於之前都在南部唸書及工作，沒有機會北上參加聚會，現在人在新竹，終於有機會可以參加了，雖然早上六點就要起床趕電車了，不過到現場聽課感覺就是不同，也可以認識很多新朋友，底下來紀錄上課筆記 微軟與 jQuery 社群的親密接觸 講者: Eric Shangkuan (Microsoft) Slide: 微軟與 jQuery 社群的親密接觸 這是 OSDC 第一場演講，早上九點就開始了，雖然人不多，但是蠻多人還是為了講者而來，首先介紹什麼是 jQuery，以及 jQuery 一些基本用法，像是 CSS selector，如何在 Windows Visual Studio 上面開發 jQuery 及撰寫 plugin 整合進去 ASP.Net，最後介紹三個不錯用的 jQuery Plugin: Templeate, Datalink, Globalzation。 Templeate: 這搭配 Facebook api 可以直接做個人頁面，請參考這裡 Globalzation: 前端多國語系實做 Datalink: 可以快速處理 form，利用 object 跟 jQuery 搭配 如果要研究上述三個 jQuery Plugin 可以參考底下: jQuery Datalink: https://github.com/jquery/jquery-datalink jQuery Templeate: https://github.com/jquery/jquery-tmpl jQuery Globalzation: https://github. [Read More]
AJAX  CSS  Embedded System  jQuery  MySQL  OSDC  Perl  Python 

利用 jQuery 動態改變網站 CSS

 Posted on October 7, 2010  |  1 minutes  |  83 words  |  appleboy

繼前一篇所寫的『jQuery 偵測瀏覽器版本, 作業系統(OS detection)』，當我們遇到手機上網使用者，可以透過 javascript 來判斷目前使用者瀏覽器以及 OS，iPad user agent 如下: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 我們必須分析上面字串來判斷是否用手機上網，手機網頁跟PC網頁大小一定有所不同，透過底下兩個方法來改變瀏覽器的畫面 自動導向手機網頁 動態改變 CSS 兩個方法都不錯，如果決定使用前者，建議在 Server side 那邊做判斷，底下先列出 javascript, PHP, .htaccess 判斷檢查 The JavaScript var isiPad = navigator.userAgent.match(/iPad/i) != null; The PHP $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); The .htaccess RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$ RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301] 如果您在前端做判斷，那就使用 jQuery 方式: if(jQuery){ jQuery("body").addClass("jq"); } CSS 檔案: . [Read More]
CSS  JavaScrpt  jQuery 

jQuery 偵測瀏覽器版本, 作業系統(OS detection)

 Posted on October 6, 2010  |  1 minutes  |  99 words  |  appleboy

update: 簡易版的偵測 iphone/ipod time: 23:32 jQuery 真是一個相當方便的 javascript framework，最近在弄嵌入式系統時候需要去偵測瀏覽器 user agent，就類似下此訊息 “Mozilla/4.0 (compatible; MSIE 4.01; Windows 95)"，原本打算直接用 C 語言內建的 getenv(“HTTP_USER_AGENT”) 來做掉，不過後來想想，直接在 UI 那邊，利用 jQuery 來偵測瀏覽器版本、系統OS，這樣就解決了，上網找到有人寫了 jQuery browser and OS detection plugin，利用底下語法就可以知道一些 user agent 裡面的資料
[Read More]
javascript  jQuery 

[CodeIgniter] 利用 jQuery 簡易驗證使用者帳號/Email

 Posted on August 26, 2010  |  1 minutes  |  169 words  |  appleboy

codeigniter_2
好久沒寫相關

CodeIgniter 文章，針對於剛入門 CI 的新手們，此篇教學如何使用 jQuery AJAX 搭配 CI 來驗證使用者帳號及相關資訊，本篇教學帶您如何在 CI 中發出 AJAX request 給伺服器端。 請先在網頁 header 自行 include jQuery 檔案，或者可以使用 Google AJAX CDN 方式來讀取，將底下程式碼放到之前：

$(document).ready(function() {
    /* 先停止讀取狀態 */
    $('#Loading').hide();

    /* 填寫好 email 欄位，按下 Tab 會進行讀取 */
    $('#email').blur(function(){
    /* 讀取 email 欄位 */
	var a = $("#email").val();
    /* email 正規語法 */
	var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    /* 簡易驗證 email */
	if(filter.test(a)){
        /* 讀取狀態 */
		$('#Loading').show();
        /* AJAX 比對資料庫 */
		$.post("controller_name/check_email_availablity", {
			email: $('#email').val()
		}, function(response){
            /* 驗證後讀取 reponse 狀態 */
			$('#Loading').hide();
			setTimeout("finishAjax('Loading', '"+escape(response)+"')", 400);
		});
		return false;
	}
});
[Read More]
CodeIgniter  jQuery 

Html5 模板架構(Boilerplate)

 Posted on August 23, 2010  |  1 minutes  |  47 words  |  appleboy

HTML5 Boilerplate - A rock-solid default for HTML5 awesome._1282574693481 今年在 COSCUP 大會上最主流的議題就是 Html5，今天看到一個網站 HTML5 Boilerplate，這網站提一個全新 html 5 模板，自從離開 Dreamweaver 樣板軟體，利用 Pspad 手動撰寫 html，此網站就發揮非常大的用處，提供全新 html，CSS 以及 javascript，支援了底下很多功能：

  • 跨瀏覽器 (IE6…)
  • 支援多種 html5 Tag
  • Compress 和 cache html 檔案
  • CSS IE6 , IE7 Hack
  • IE6 Png Fix (連這個都幫忙解決了)
  • 支援 CDN jQuery，避免在 local 端沒讀取到檔案 你還可以根據自己需要的功能做添加或者是減少，CSS reset、跨瀏覽器 CSS、robots.txt、Apache .htaccess cache 壓縮也有支援，如果不需要的功能，也可以參考看看，對於初學者也是非常好的學習例子。
apache  Boilerplate  CSS  html5  jQuery