顯示具有 半自創碼 標籤的文章。 顯示所有文章
顯示具有 半自創碼 標籤的文章。 顯示所有文章
星期五, 11月 23, 2007
星期五, 11月 23, 2007

https://rhinohorns.blogspot.com/2007/11/jquery.html
頁面外罩對話框效果 - 以 jQuery 改寫

sh_show篇展示了一個外罩對話框的頁面效果,不過是以一般的 javascript 碼來製成,此篇改以目前還算有人使用的 jQuery 來改寫,看看程式碼有何不同之處。

首先需要引用 jQuery,js 路徑要視存放位址更改就是,

頁面中需要元素的 html 和排列可以清爽如下,也可以都使用程式碼產生,不過這樣做就沒有分工的意義了 = =。

除了工具函式外,其它的碼改寫為下述,

兩篇原始碼比較,利用 JQuery 的優點在於,

  • 能夠很方便的將程式碼與 html 排版分離。
  • 程式碼較簡潔,少掉一部分非主要邏輯內的建構碼。
  • 程式碼文法易讀性較高,例如 .css()、.attr() 等。
  • 一些顯示、消失的特效不必自己撰寫,直接使用 jQuery 提供的 .show()、.hide()、.fadeOut() …等即可。

當然 jQuery 的能力絕不僅於此,還有許多的 plugin 可用,此篇主要希望能看到 jQuery 所旨的「Write less, Do more.」效果。

星期三, 11月 21, 2007
星期三, 11月 21, 2007

https://rhinohorns.blogspot.com/2007/11/blog-post_21.html
頁面外罩對話框效果

sh_show 是一個最近還滿常見到的頁面對話框效果,會呈現出對話框明亮,而頁面其它四週圍偏暗,好處是讓使用者很明確的知道目前正在使用的對話框。這篇碼是較平舖式的,方便理解及重整。

第一部分是 css,需要一個半透明的外罩效果,這裡是設 70%,還有一個要注意的是「z-index」,外罩需在對話框之下頁面之上,所以設的數字要比對話框小些,比頁面中的物件大些。

第二部分是設定外罩長寬涵蓋整個頁面並顯示/隱藏、對話框的置中顯示/隱藏處理碼,這裡以傳入操作塊 ID 來指定展現的對話框。

至於取得頁面長寬、捲軸位置及操作塊定位的工具函式可直接參考示範頁的原始碼。

很簡單的效果,卻十分友善。