Html5 模板架構(Boilerplate)
Posted on August 23, 2010
| 1 minutes
| 47 words
| appleboy
今年在 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 壓縮也有支援，如果不需要的功能，也可以參考看看，對於初學者也是非常好的學習例子。
[網站] 好站連結 (七) Android, javascript, Css, PHP, Perl, FreeBSD, Linux
Posted on July 30, 2010
| 2 minutes
| 228 words
| appleboy
Windows C#
C# 比較字串 MSDN 比較字串 Request.Form Collection Request Query String / Form Parametrs ASP.NET QueryString Usage Using include files with ASP.NET html
[將所有 的內容包到一個
中][7] apache
Fixing mod_rewrite and .htaccess on GoDaddy Hosting javascript
jQuery Week Calendar Javascript: reference the parent window from a popup How to get and set form element values with jQuery How to check and uncheck a checkbox with jQuery Loop through parameters passed to a Javascript function perl-completion.
[Read More][筆記] iframe 父頁子頁呼叫函式 parent call function
Posted on May 7, 2010
| 1 minutes
| 57 words
| appleboy
紀錄 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
[jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6)
Posted on May 2, 2010
| 2 minutes
| 407 words
| appleboy
今天無意間看到 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
[Read More][jQuery] AjaxFileUpload : Multiple File Upload plugin
Posted on April 13, 2010
| 2 minutes
| 228 words
| appleboy
最近 survey 一些 AJAX upload plugin by jQuery，或者是一些網路知名 upload opensource: SWFUpload, 以及目前很強大的 Plupload，先來說明 AjaxFileUpload 這個 jQuery Plugin 單一檔案上傳，如果想要簡單方便的單一上傳，我很推薦這個，搭配回傳的 json type 吐出錯誤訊息還蠻好用的，雖然作者給單一上傳的說明，不過還是可以將它改成多檔上傳，也就是多增加 input type=“file” 就可以了，底下介紹一下怎麼實作單一檔案或者是多檔案上傳。
單一檔案上傳 先 include AjaxFileUpload javascript html: jQuery code: 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
*/
$.
[Read More][CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript
Posted on April 5, 2010
| 2 minutes
| 279 words
| appleboy
先前在國外部落格發現一篇非常好用的教學：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][編輯器] CKeditor 更換 background-color and font-size
Posted on March 30, 2010
| 1 minutes
| 162 words
| appleboy
相信大家在製作 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.
[Read More]Google Chrome 支援超過 40,000 Extensions! with Greasemonkey
Posted on February 3, 2010
| 1 minutes
| 82 words
| appleboy
看到 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 喔。這樣大家就不用再看圖片還要一張一張慢慢點，只要負責按換頁就可以了 ^^。 來測試看看，隨便找一本無名相簿：馬甲‧小葵 ，畫面：點我觀看
Using firebug for firefox 除錯 javascript
Posted on January 5, 2010
| 1 minutes
| 90 words
| appleboy
在 Web 程式設計，不管是 html 或者是 CSS、甚至 javascript，都可以利用 FireFox Plugin: firebug 來除錯，順便推薦另一套 Web Develper 工具：Web Developer 1.1.8，這兩套都可以玩看看，在網路看自己東華電機學長 gasolin 寫過一篇：3 分鐘學會用 firebug 除錯 ，裡面有一個影片，建議大家看看：影片，如何利用 firebug 來對 javaascript 除錯，介紹了 firebug 優點。底下整理我看到的內容
1. 利用 console.log() 來針對變數除錯 以往都是利用 window.alert() 的方式來看看變數是否正確，現在只要在 javascript 裡面加入 console.log() 針對不同變數取值出來觀看 輸出會顯示： a is test
[1, 2, 3, 4] 2. 印出有圖示的訊息 console.info/console.warn/console.error 這功能跟 console.log 差不多，只有差在前面有圖示符號，請看下圖： 3. 使用 firebug 除錯 debugger; 只要在 js 裡面加入 debugger; 就會進行 逐步除錯，我想如果寫過 Window form 的使用者，C# ASP.net 最常用的就是逐步徵測錯誤，這功能相當方便，每一行跑了哪些變數，都可以逐一在旁邊顯示喔 大家看到逐步偵錯到第19行，前面變數都會在旁邊顯示喔，原本都是 null。
[Read More][Javascript] 在函數裡設定參數預設值
Posted on November 25, 2009
| 2 minutes
| 221 words
| appleboy
在網路上看到一篇：『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.
[Read More]