今年在 COSCUP 大會上最主流的議題就是 Html5，今天看到一個網站 HTML5 Boilerplate，這網站提一個全新 html 5 模板，自從離開 Dreamweaver 樣板軟體，利用 Pspad 手動撰寫 html，此網站就發揮非常大的用處，提供全新 html，CSS 以及 javascript，支援了底下很多功能：
Windows C#
html
[將所有 的內容包到一個
apache
javascript
CSS
[Read More]紀錄 iframe 如何呼叫子頁或者是父頁函式，iframe 在現今 Web 2.0 時代已經不流行了，因為有很多問題的存在，例如對於 SEO 搜尋引擎也沒有幫助，但是也是很多人在使用，底下筆記心得，說不定之後會 google 到自己的文章，哈哈。 父頁(主視窗)呼叫子頁函式：
/* iframeID 是 iframe ID*/
window.iframeID.formSubmit();
/* ifr 是 iframe ID */
document.getElementById('ifr').contentWindow.formSubmit();
子頁(iframe)呼叫父頁(主視窗)函式：parent.formSubmit();如果有兩層
parent.parent.formSubmit();注意 timing issue，等 iframe 視窗 load 完之後才可以呼叫 iframe function。至於如果取主視窗跟 iframe 的變數 value，可以利用 jQuery $("#ID") 方式來得到。 reference:
【程式】JS : parent , iframe function call Access child function from iframe
今天無意間看到 Drew McLellan 在 2007 年寫了這篇 Transparent PNGs in Internet Explorer 6，真的是太晚發現這篇了，之前自己寫到一篇：『[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript』，雖然 Google 官方網站宣佈完全不支援 IE6 瀏覽器，打算只支援 Microsoft Internet Explorer 7.0+, Mozilla Firefox 3.0+, Google Chrome 4.0+, Safari 3.0+，可是我們這些 Web Developer 還是需要考慮客戶的瀏覽器阿，因為客戶才是最大的，尤其是在一些學術機構，安裝好 XP，預設就是 IE6，從 Google 分析裡面，IE6 也是網站的客戶大群。
先來介紹 Drew McLellan 寫的一支好用 js 來改善所有 png 透明圖檔，最主要是修正 background-image 跟 img tag 所包含的 png 圖檔
先下載：Download SuperSleight，解壓縮放到 js 資料夾
針對 IE6 瀏覽器寫入 html
<pre class="brush: xml; title: ; notranslate" title=""><!--[if lte IE 6]>
<![endif]–>
[Read More]最近 survey 一些 AJAX upload plugin by jQuery，或者是一些網路知名 upload opensource: SWFUpload, 以及目前很強大的 Plupload，先來說明 AjaxFileUpload 這個 jQuery Plugin 單一檔案上傳，如果想要簡單方便的單一上傳，我很推薦這個，搭配回傳的 json type 吐出錯誤訊息還蠻好用的，雖然作者給單一上傳的說明，不過還是可以將它改成多檔上傳，也就是多增加 input type=“file” 就可以了，底下介紹一下怎麼實作單一檔案或者是多檔案上傳。
function ajaxFileUpload()
{
//這部份可以省略，或者是撰寫當 ajax 開始啟動需讀取圖片，完成之後移除圖片
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
/*
prepareing ajax file upload
url: the url of script file handling the uploaded files
fileElementId: the file type of input element id and it will be the index of $_FILES Array()
dataType: it support json, xml
secureuri:use secure protocol
success: call back function when the ajax complete
error: callback function when the ajax failed
*/
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}注意 fileElementId 對應到 input file 裡面的 ID 值，取 name 是後端程式需要用到，例如 PHP $_FILES，後端處理回傳 json Type 給 jQuery 處理，json 格式：{
"error" : 'test',
"msg" : 'upload completed'
}這樣大致上ok了。如果要多檔案上傳，其實就是改 jQuery 部份：html 部份請加上多個 input file$().ready(function() {
$('#uploadfile').click(function(){
$('input:file').each(function(){
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId: $(this).attr('id'),
dataType: 'json',
success: function (data, status)
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
},
error: function (data, status, e)
{
alert(e);
}
}
);
});
});
});
另外也可以參考 jQuery Plugin:先前在國外部落格發現一篇非常好用的教學：Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters，裡面有提供一部教學影片，非常好用，也很實在，底下可以先看影片，看完大概就可以針對 IE, FireFox, Chrome 進行 CSS Hack。 目前網頁製作，要符合多瀏覽器跨平台(IE, Safari, Chrome, FireFox…等)，就必須動到 CSS Hack，雖然 Google 已經宣稱不支援 IE6，但是很多單位，很多學校跟客戶都是使用 IE6 瀏覽器，不只國內這樣，國外大廠也都希望支援 IE 系列，包含 IE6, IE7, IE8，這時候就必須知道如何分別針對各種不同 IE 做設定，底下就來看看實做例子。
[Read More]
相信大家在製作 Web 過程，一定會用到編輯器，然而 CKeditor 前身 FCKeditor 非常有名，FCKeditor 運行了六年之久，在去年2009年的時候，轉換成了 CKeditor，目前開發團隊也專注於此版本，現在已經推出到 CKEditor 3.2 released!，可以參考 CKEditor 3.x - Developer’s Guide，裡面也整合了 jQuery，替很多開發者想到更多管道去整合網站，然而今天設計網站，需要改變編輯器的背景顏色，預設是白色背景，但是並非所有網站都是白色呈現，所以才需要動到背景顏色，這樣好讓使用者可以融入整個背景，在 Plurk 發表了這問題，也找了官方論壇，都沒有發現正確解答，官方論壇有篇類似問題：Change the background color of the CKEditor text area，這篇自己試過是沒有用的，正確解法可以參考 CKeditor 的 API:contentsCss。 1. 首先在 CKeditor 根目錄建立新檔案：mysitestyles.css
body
{
/* Font */
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
/* Text color */
color: #f0f0f0;
/* Remove the background color to make it transparent */
background-color: #353c42;
}
html
{
/* #3658: [IE6] Editor document has horizontal scrollbar on long lines
To prevent this misbehavior, we show the scrollbar always */
_overflow-y: scroll
}
img:-moz-broken
{
-moz-force-broken-image-icon : 1;
width : 24px;
height : 24px;
}
img, input, textarea
{
cursor: default;
}2. 設定 config.js 檔案(Ckeditor 目錄裡面)CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
config.uiColor = '#AADC6E';
config.contentsCss = '/path/ckeditor/mysitestyles.css';
};重點在於config.contentsCss = ‘/path/ckeditor/mysitestyles.css’; 這行，在 Path 部份，請注意由根目錄開始寫起喔。 另外解法，就是用 jQuery Adapter，header 加入：
[Read More]看到 Google Chrome Blog 發表的Google Chrome 支援超過 40,000 Extensions!，當 Google Chrome 瀏覽器剛出來的時候，造成 Web Developer 一些震撼，因為 Chrome 強調的是擁有快速的 Javascript 引擎，以及快速的啟動，Fast start-up、Fast loading、Fast search，也因此讓很多設計網站的工程師必須把 Chrome 的支援性考慮進去，但是由於剛推出的瀏覽器，沒有任何外掛功能，我本身用 FireFox 瀏覽器很多年了，FireFox 的附加元件讓許多程式設計師投入開發，也製造出很多方便的附加元件來讓大家使用，例如：FireBug、Gmail Manager、Greasemonkey…，然而 FireFox 最方便的就是 Greasemonkey 此附加元件，使用者可以撰寫簡單 Javascript 語言來跟指定網站進行元件控制，現在 Google 工程師聽到我們的聲音了，Google Chrome 4 加入 Greasemonkey user scripts 功能，大家可以到 userscripts.org 下載超過 40,000 script 安裝到 Chrome 瀏覽器。您可以在 blogger 使用 emoticons，大家可以去參考看看。 由於 Chrome 支援了 Greasemonkey，所以趕快把 FireFox 所安裝的 script，也安裝到 Chrome，可是我發現之前 DarkKiller 大神寫的 Wretch Album Expander 已經不能用了，所以我將它實做到 Chrome，可以從這裡下載安裝：Wretch Album Expander for Google Chrome or FireFox，平時自己偶而會看看無名小站，所以也是方便自己觀看照片，此 script 也可以安裝在 FireFox 喔。這樣大家就不用再看圖片還要一張一張慢慢點，只要負責按換頁就可以了 ^^。 來測試看看，隨便找一本無名相簿：馬甲‧小葵 ，畫面：點我觀看
在 Web 程式設計，不管是 html 或者是 CSS、甚至 javascript，都可以利用 FireFox Plugin: firebug 來除錯，順便推薦另一套 Web Develper 工具：Web Developer 1.1.8，這兩套都可以玩看看，在網路看自己東華電機學長 gasolin 寫過一篇：3 分鐘學會用 firebug 除錯 ，裡面有一個影片，建議大家看看：影片，如何利用 firebug 來對 javaascript 除錯，介紹了 firebug 優點。底下整理我看到的內容
a is test [1, 2, 3, 4]
在網路上看到一篇：『Setting default values for missing parameters in a Javascript function』，提到在 Javascript 函式參數如果未定義，就會出現 undefine 的錯誤訊息，請看底下範例：
function foo(a, b, c) {
document.write('a: ' + a + ' ');
document.write('b: ' + b + ' ');
document.write('c: ' + c + ' ');
document.write('
');
}測試函數：foo(); foo(1); foo(1, 2); foo(1, 2, 3);輸出結果：
a: undefined b: undefined c: undefined a: 1 b: undefined c: undefined a: 1 b: 2 c: undefined a: 1 b: 2 c: 3底下有兩種方式可以解決此問題： 1. 加入 if 判斷：
function foo(a, b, c) {
if(typeof a == 'undefined') {
a = 'AAA';
}
if(typeof b == 'undefined') {
b = 'BBB';
}
if(typeof c == 'undefined') {
c = 'CCC';
}
document.write('a: ' + a + ' ');
document.write('b: ' + b + ' ');
document.write('c: ' + c + ' ');
document.write('
');
}測試：foo(); foo(1); foo(1, 2); foo(1, 2, 3);結果輸出：
a: AAA b: BBB c: CCC a: 1 b: BBB c: CCC a: 1 b: 2 c: CCC a: 1 b: 2 c: 32. 網友提供的最佳解法：
function foo(a, b, c) {
a = a || "AAA";
b = b || "BBB";
c = c || "CCC";
document.write('a: ' + a + ' ');
document.write('b: ' + b + ' ');
document.write('c: ' + c + ' ');
document.write('
');
}假設 a 尚未被定義，就會以 AAA 預設值顯示，程式碼也相當好閱讀。