jquery 一類的 javascript 庫
在web2.0 以前, 只能說是玩樂, 觀賞性質
甚至老牌的教科書會說不要使用javascript
免得面對瀏覽器兼容的問題
但隨著ajax, web2.0 等新世代名詞出現
gmail, yahoo pipes 等的出現
javascript 已經成為網頁元素必然的一部分
jquery, prototype, moto 等的通用庫的出現
更進一步推動javascript 的發展
Drupal 在5.0 之後正式支援jquery
但大家可能只會在上傳檔案時見到它的出現
其餘的core 部分幾乎都沒有用到jquery
留下一大塊可開發的地方
也直接促成tabbed block 的開發
入正題
drupal 因為已經內建jquery
使用上已經提供很多方便的函數, 方法
所以要使用jquery, 技術上難度不大
但要在效能和功能上取得平衡
便需要點實作的經驗和測試了
先約略介紹jquery 的操作
在一頁網頁裏, 代碼要從眾多的元素(element) 裏選出目標對象
然後再處理
一般會使用id, class, tags 等方法, 和使用css 類似
其中id 最直觀
<a id="link1">hyper link</a>css 裏
<style>
#link1{color:red;}
</style>#link1 中的# 代表id 的意思
便指定id 為 link1 的任何東西(id 在一頁裏應為唯一)
字體都是紅色
如果我要用jquery 令id 為 link1 的元素隱藏:
$("#link1").hide()$("#link1")指定了一個或一些元素(id 在一頁裏應為唯一)
.hide() 令他們隱藏
相似的,
.link 的 . 代表class
input 代表input tag 等
都可以用在jquery 內
$(".link").show()
$("input").fadeIn()註: jquery 代碼要放到<script></script>內
css 要放到<style></style>內
更進一步, 例如:
<ul id="list">
<li>a</li>
<li>b</li>
</ul>$("#list") 找到 <ul id="list">
$("#list").children("li") 便可以找到id 為list, 子元素為li (共二個)
$("#list").children("li").eq(0) 便可以找到id 為list, 子元素為li, 的第零個元素 (<li>a</li>)
$("#list").children("li").eq(0).hide()....
jquery 稱這連續的選擇方式為"chained"
到了這個部分
當看見jquery 的代碼
應該可以明白它的工作原理
然後到jquery.com 找一找沒有看過的函數 toogle(), attr() 等等
一里通, 百里明
這些代碼都可以放在theme 內
直接顯示, 處理
本站的menu 漸變都是用此方式植入
因為這屬於theme 的管轄範圍
放在theme 內合情合理
明日會再談談進階jquery, each(), callbacks 等
