2009年02月16日

正式搬家囉！以後這裡不再更新啦~

歡迎到新家坐嘿~


Posted by jaceju at 樂多Roodo! │19:12

2009年02月12日

[Web] 連結分享

PHP

Zend Framework

CSS

JavaScript

jQuery

Database

MySQL

Web Development

Design

Browser

Programming

Software

Other


Posted by jaceju at 樂多Roodo! │14:30 │連結分享

2009年01月22日

[Web] 連結分享

PHP

Zend Framework

JavaScript

jQuery

CSS

Web Development

Browser

Database

MySQL

Design

Game

Other

Service

Software

System


Posted by jaceju at 樂多Roodo! │18:24 │連結分享

2009年01月15日

[JavaScript] 如何讓 reset.css 和 HTML 預覽功能並存？

問題描述

現在 CSS 排版技術越來越盛行，很多網頁設計師為更精準地控制頁面呈現效果，都會使用 reset.css 來將 HTML 元素在瀏覽器的預設呈現效果給移除 (例如 YUI 的 reset.css 或 Eric Meyer 的 reset.css ) 。

雖然這個技術很好用，但在需要讓客戶自訂畫面的專案上就會遇到一個問題：如何讓客戶的 HTML 呈現出瀏覽器原本預設的效果？

像 YUI 有提供一個 base.css ，可以稍微幫我們將 HTML 元素回復原本的呈現方式。但我們有時只是需要在畫面上一小部份轉換為原來的效果，這時就勢必得修改 base.css ，在它的各項元素定義前加上某區塊的 class 或 id ；不過這不是一個好選項，因為大多數狀況我們還是沒辦法百分之百讓畫面呈現它原本的樣子。

解決方案

其實用 iframe 就可以幫我們解決這個問題。

步驟很簡單：

  • 建立一個動態 iframe 。
  • 將原本的 html 內容指定給 iframe 的 document 。
  • 把 iframe 高度調整至和 html 內容一般高。

這裡我用 jQuery 來實作囉。

建立一個動態 iframe

假設我們的 html 內容已經放在 div.htmlContent 這個區塊中，我們可以用以下程式來動態建立一個 iframe ，並將它 append 在 div.htmlContent 中。當然也別忘記把原來的內容清掉：

$(function () {
    var $iframe = $('<iframe src="about:blank" width="100%" height="300" frameborder="0"></iframe>');
    var $htmlContent = $('div.htmlContent');
    var html = $htmlContent.html();
    $htmlContent.html('');
    $htmlContent.append($iframe);
}

這裡要注意一點，就是 iframe 的高度一定要設定一個大於 0 的整數值，不然等一下 IE 在自動調整高度時會出問題。 (別問我為什麼...我也是自己試出來的 Orz)

至於 iframe 的來源，我們設定為 about:blank 就好，也就是瀏覽器預設的空白頁。

將原本的 html 內容指定給 iframe 的 document

在建立好動態的 iframe 之後，我們要先等它將內容載完。在載完之後，我們就可以將原來的 html 放到 iframe 裡的 docuement 物件的 body 中。 

    $iframe.load(function () {
        var iframeDocument = getIframeDocument($iframe.get(0));
        $(iframeDocument.body).html(html).css({ margin: '0', padding: '0' });
    });

這裡用到了一個自訂函式 getIframeDocument ， 它可以幫我們取得 iframe 裡的 document 物件，而且是跨瀏覽器的：

function getIframeDocument(iframeObject) {
    if (iframeObject.contentWindow) {
        return iframeObject.contentWindow.document;
    } else if (iframeObject.contentDocument) {
        return iframeObject.contentDocument.document;
    }
    return null;
}

註：getIframeDocument 暫時不支援 Google Chrome 和 Safari 。

把 iframe 高度調整至和 html 內容一般高

接著我們要調整 iframe 的高度，讓它能完整呈現出 html 的內容。

在 html 載入完畢後，body 的 offsetHeight 就會是我們所需要的內容高度：

    $iframe.load(function () {
        var iframeDocument = $.wacow.getIframeDocument($iframe.get(0));
        $(iframeDocument.body).html(html).css({ margin: '0', padding: '0' });

        setTimeout(function () {
            var bodyHeight = iframeDocument.body.offsetHeight + 20;
            $iframe.height(bodyHeight);
        }, 0);
    });

這裡有個小技巧，就是重新指定 html 內容時， load 事件並不會被觸發，所以我們要利用 setTimeout 來確定 html 已經全部加載完畢 (讓它跳離到另一個執行空間) 。

到這裡就大功告成啦~謝謝收看~


Posted by jaceju at 樂多Roodo! │18:11 │JavaScript

[Web] 連結分享

PHP

Zend Framework

JavaScript

jQuery

CSS

Web Development

Database

MySQL

Programming

Software

System

Other


Posted by jaceju at 樂多Roodo! │11:43 │連結分享

2009年01月5日

[程式開發] 抽象的意義

上次教育訓練完，小魚問我抽象的意義是什麼？知道它對寫物件導向有什麼幫助嗎？

在課程中我舉了人開車的例子，但充其量只是解釋了「抽象」的抽象意義而已 (還真繞口) ...

就讓我用新的例子來說明吧。

資料庫抽象層

不曉得各位有沒有轉換過資料庫系統的經驗，撇開政治因素不談，其實以往在轉換資料庫時常是一件麻煩事。

以 MySQL 轉換成 Oracle 為例，在 PHP 中 MySQL 通常是用 mysql_* 的函式來處理資料庫，而 Oracle 則是用 oci_* 的函式來處理。

這樣在轉換資料庫系統時，程式改動所要耗費的心力將會是難以想像的估計，尤其在大型程式上面。

如果在初期開發時，我們能夠不必受到不同資料庫系統的限制，而能專注於處理資料上的邏輯，那不是很好嗎？

所以我們就有了 ADOdb 、 PEAR::DB 或是 PDO 等等資料庫抽象層類庫可使用了。

以 PDO 為例：

<?php
$dsn = 'mysql:dbname=testdb;host=127.0.0.1';
$user = 'dbuser';
$password = 'dbpass';

try {
    $dbh = new PDO($dsn, $user, $password);
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}

sql = 'SELECT ...';
foreach ($dbh->query($sql) as $row) {
    // ...
}

在系統底層， $dbh 其實是以 MySQL Driver 在連結 MySQL 資料伺服器。我們只要能夠使用它的 query() 方法，就能夠操作資料，而 $dbh 這個物件到底是怎麼跟 MySQL 溝通的，我們其實不在乎。以下是圖解：

PDO 抽象圖解

如果現在要將資料庫系統轉換成 Oracle ，我們只要換掉 DSN 就好了，這樣不是很方便嗎？

註：當然 MySQL 所支援的 SQL 語法和 Oracle 還是有些許不同，但改動幅度已大大降低。

抽象的意義

所以抽象其實在物件導向開發中，是個很重要的觀念；它可以讓我們從不同卻又類似的模型中，找出一致性的操作方式。

而且像是「繼承」、「多型」及「封裝」其實都和「抽象」有著密切的關係，更可以說它們其實是一體的。

希望這個補充說明可以幫助上次沒聽懂這部份的伙伴們對物件導向有更深的體會囉！

如果有空，我會再對其他主題再做進一步說明的。


Posted by jaceju at 樂多Roodo! │19:52 │程式開發

2009年01月4日

[Web] 連結分享

PHP

Zend Framework

JavaScript

jQuery

CSS

Web Development

Database

MySQL

Design

Security

Service

Software

System


Posted by jaceju at 樂多Roodo! │09:22 │連結分享

2008年12月21日

[Web] 連結分享

PHP

Zend Framework

JavaScript

jQuery

CSS

Browser

Database

MySQL

Programming

SCM

Security

Software

System


Posted by jaceju at 樂多Roodo! │09:20 │連結分享
回頁首▲