利用jQuery來達到更新部份頁面的效果

最近開始玩jQuery這小巧強大的JavaScript函式庫,
首先試著利用jQuery來實作連結更新部份頁面的效果。

例如這是導覽列的部份:
[ccel lang=”html”]

[/ccel]
而現在有一個id為content的div,
當擊點導覽列時所連結的到網頁會顯示在該div中,
在下面就可以寫上jQuery來達到效果,
只是一開始我是用比較笨的寫法:
[cce_javascript]
<script type=”text/javascript”>
$(“li#a”).click(function(){
$(“div#content”).load(“a.html”);
});
$(“li#b”).click(function(){
$(“div#content”).load(“b.html”);
});
</script>
[/cce_javascript]
以第一個連結為例子,
先利用當滑鼠擊點id為a的li後,
使用當中所寫的函式,
讀取a.html這個網頁顯示到id為content的div之中。
但這種寫法的缺點是導覽列每新增一個,
下面就要再多寫一條,
如果覽導列很長下面也會寫得一大串。
後來有問到其實可以利用onclick加到連結之中,
如下:
[cce_html width=”500″]
<a href=”#” onclick=”$(‘#content’).load(‘a.html’);”>A</a>
[/cce_html]
如此程式碼就簡潔多了。

利用!important,分隔IE6與非IE6瀏覽器所套用的CSS樣式

最近在寫網頁時遇到一些CSS樣式在IE與非IE瀏覽器顯示差異的狀況,
例如我希望某個div有最小高度320px的限制,
雖然可以在CSS加入:
[cc_css]min-height: 320px;[/cc_css]
但問題是IE6並不認識min-height,
而height若是給定值,
當div的內容超過給定的高度IE6會自己延伸,
非IE6的瀏覽器則是照給定的值。

後來找了一下相關文章發現可以利用!important這個語法,
這個語法是用來提高樣式的優先權,
例如我在CSS中寫下:
[cc_css]height: 200px !important;
height: 240px;[/cc_css]
那麼實際套用的高度是200px而不是240px,
而IE6是看不懂!important,
如此一來可以利用這個語法來分隔IE6與非IE6瀏覽器所套用的樣式。

假設我希望某個div高度最小為120px且會隨著內容長度自動延伸,
而不管IE6還是IE8、Firefox等瀏覽器都能達到同樣的效果,
就可以這麼寫:
[cc_css]height: auto !important;
height: 120px;
min-height: 120px;[/cc_css]
對IE6來說它只看懂height: 120px,
而對非IE6的瀏覽器來說,
兩個重覆定義的height只有auto會生效並且最小高度120px也能順利運作,
如此一來便可解決這種惱人的問題。