2010年11月14日 星期日

又寫了一個新的jquery plugin - jquery imgdesc

最近一個project是需要有產品瀏覽..
而每個產品還有詳細描述
為了增加畫面的簡潔度跟流暢感
所以又寫了一個jquery的plugin imgdesc
呈現的結果是這樣

要使用請按照下面的步驟
1. 首先先確定你的html的DOCTYPE如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

這樣跑出來的結果位置才會對

2. include需要的javascript以及css

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery-imgdesc.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-imgdesc.css">


3. 資料的部分,請這樣定義



Title

Your description




Title

Your description




Title

Your description




4. 最後一步就是呼叫imgdesc()套上imgdesc的plugin

$(function()
{
$(".modelImage").imgdesc();
});