2008-09-17

create_function 匿名函數

在 PHP 中的函數只要宣告後就是全域的,而且還不能修改,不小心就會撞名,真是麻煩的事,而且實體宣告在當做變數傳遞時非常麻煩,最近習慣 JavaScript 的函數傳遞方法,為了達到這個作法,PHP 中有一個匿名函數的宣告方法,會直接已變數的形式呈現,可惜的事在宣告上必須用字串編寫,也是很麻煩,但總比沒有好。

<?php
    $newfunc = create_function('$a,$b', 'return $a + $b');
    echo $newfunc(2,5);



參考來源:PHP Manual
2008-09-13

利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法

利用 IE6 特有的 expression 屬性質,去執行 JavaScript 程式。
好處是可以簡化開發,讓設計師可以自己去控制想要的樣式。
壞處是執行大量的 expression 會讓 IE6 很吃重。


ie_hover.htc 中的程式碼:
this.onmouseover=function(){
    if(!this.className.match(/(^|\s)hover(\s|$)/)){
        this.className=(this.className+' hover')
            .replace(/\s{2,}/g,' ')
            .replace(/^\s+|\s+$/g, '');
    }
}
this.onmouseout=function(){
    this.className=this.className
        .replace(/(^|\s)hover(\s|$)/,' ')
        .replace(/\s{2,}/g,' ')
        .replace(/^\s+|\s+$/g, '');
}
this.style.behavior=null;


ie_hover.html 中的 CSS:
p{
    padding-left:30px;
    behavior: url(ie_hover.htc);
}
p:hover,
p.hover{
    padding-left:0;
}


展示頁面(Demo Page)
2008-09-09

CSS 三欄排版

  1. float 排版
    CSS 三欄排版
    這是在 Table 排版之後最常見的排版方式,利用 float 與 clear 的屬性設定去達成的分欄排版。

    最近發現除了利用 clear 屬性的空 Tag 以外還有其他的方式可以達到這個效果,在最外層的 div 上加入以下屬性也可以達到相同的效果:
    * html #demo_1{
        height: 1%;
    }
    #demo_1:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #demo_1 {
        zoom: 1;
    }
    


  2. table 排版
    CSS 三欄排版
    這是最早期排版方式,雖然有種種的缺點,但還是有很多網站使用,除了利用原有的 Table Tag,也可以使用其他 Tag 設定 display 屬性去達到 Table 排版的效果,雖然在寬度的定義上的彈性,但還是建議保持只有一個欄位的彈性寬度,過多的彈性寬度只會造成意想不到的後果。


  3. margin and float 排版
    CSS 三欄排版
    這是利用中欄的 margin 屬性空出側欄位空間,再利用 float 及負邊界方式去達成的三欄排版,因為 float 屬性不會對整體高度做出貢獻,如果需要側欄的高度影響,必須上擁有 clear 屬性的 Tag 或利用第一個範例的方法,由於中欄沒有 float 屬性所以不能在內容使用 clear 屬性。


  4. margin and position排版
    CSS 三欄排版
    這是利用中欄的 margin 屬性空出側欄位空間,再利用 position 的定位方式去達成的三欄排版,因為 position 屬性不像 float 屬性,可以利用 clear 屬性做出高度的貢獻,所以側欄的高度不可以大於主欄,要不然會造成顯示重疊。


  5. padding and float排版
    CSS 三欄排版
    這是結合 (float 排版) 及 (margin and float 排版) 的排版方式,主要是解決 (margin and float 排版) 的主欄中不可以使用 clear 屬性的問題,CSS 的差別只在於利用外匡的 padding 屬性去做預留空間的設定。


優劣差異:
floattablemargin
float
margin
position
padding
float
靈活性
親和力
HTML 結構簡單複雜簡單簡單簡單
寬度彈性noyesyesyesyes
允許彈性的欄位數0all111
overflow 容錯
瀏覽器的解析差異
欄位的高度影響allallall1all


展示頁面(Demo Page)