DIV CSS 佈局教程網

> 唔，這個主題掛的時間也夠長的了，也該換換了，到時候找找看有沒有合胃口的主題。
> 話說，最近有點偏向 PHP 去了，我發現貪多嚼不爛，所以就又回到主題咯，(*^__^*) 嘻嘻。

1. Jquery 庫的調用：

> 呵呵，相信很多童鞋早就會了，不過還是得提一下，忘記就杯具咯。
> 第一個是常用的 Google 托管處的 jQuery 庫地址。
> 而第二個則是 jQuery 官方網站的庫地址，隨時獲取最新版，嘿嘿。

代碼如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

2. Load() 函數：

> 這個也是很不錯的喔，很多地方都可以用上。
> 比如想在某些圖片沒有載入之前加個提示之類的。
> 或者對頁面載入過程最後一個元素使用，則可以提供整頁面的載入提示。
> 下面只是一個簡單的例子，選擇器選擇的是 Img 標簽。
> 然後搜索屬性，只是屬性類型為 Src 即圖片地址，後面則是圖片地址的內容。
> 在圖片載入完成之後則會彈出一個提示框表示圖片已經載好。
> 注意！！請一定要填入與目標元素內填的完全相同的 Src，否則會杯具的。
代碼如下:
<script>
jQuery(document).ready(function($){
$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg')
.load(function() {
alert('Image Loaded');
});
});
</script>

> 演示頁面傳送門：http://www.evlos.org/global/demo/jquery_load

3. 簡單的垂直居中：

> 這裡使用的是 Height() 函數，選擇器裡的 document 表示整個頁面。
> 下面查找的是 Class 為 Move 的元素，It_height 定義為元素高度。
> 然後將變量 Global_height 定義為整個頁面的高度，即頁頂至頁底的距離。
> 然後將此元素的至頂部的距離調整為整個頁面的高度的一半即可。

> 呵呵，相信有興趣的童鞋已經可以舉一反三咯。
> jQuery 對 CSS 進行調整的能力是灰常強大的 O(∩_∩)O。
代碼如下:
<script>
jQuery(document).ready(function($){
var global_height = $(document).height();
var it_height = $('.move').height();
$('.move').css({'position' : 'absolute' , 'top' :
global_height/2 - it_height/2});
});


> 演示頁面傳送門：http://www.evlos.org/global/demo/jquery_height

4. jQuery 與 Onclick 事件結合：
代碼如下:
<div onclick="var global_height = $(document).height();
var it_height = $('.move').height();
$('.move').css({'position' : 'absolute' , 'top' :
global_height/2 - it_height/2});">Move It !</div>

> 把上面的代碼放到這裡來，則鼠標點擊此 DIV 之後執行代碼。

5. ReplaceWith 函數：

> 下面的代碼是尋找 Class 為 Demo 的元素，然後將其整個替換掉。
> 整個的意思，是包含了前後的標簽的，所以替換函數內別忘記寫標簽喔。

代碼如下:
<script>
jQuery(document).ready(function($){
$('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>');
});
</script>

> 演示頁面傳送門：http://www.evlos.org/global/demo/jquery_replace

6. Load() 函數的運用（頁面載入提示）：

> 首先寫好 CSS，絕對定位到頁面右上角。

代碼如下:
#loading {
position:absolute; z-index:900;text-align:center;
background-color:#eef2fa;border:1px solid #d8e3e8;
color:#000;font-size:12px;padding:3px;width:80px;
right:0;top:0;
}

> 然後用 jQuery 然後在所有圖片載入完成之後，隱藏 Loading DIV。
> 別忘記載入 jQuery 庫哈，剛才測試代碼的時候地址寫錯了，差點瘋掉。
代碼如下:
<script>
jQuery(document).ready(function($){
$('img').load(function(){
$('#loading').css("display","none");
});
});
</script>

> 隨便某處插入一個 DIV 即可，O(∩_∩)O 哈哈。

<div id="loading">Loading ...</div>