顯示具有 電腦- 網頁設計-jQuery 標籤的文章。 顯示所有文章
顯示具有 電腦- 網頁設計-jQuery 標籤的文章。 顯示所有文章

讓網頁表格能自動排序﹍TableSorter 安裝懶人包 (CDN)

讓網頁表格能自動排序﹍TableSorter 安裝懶人包 (CDN)

前陣子製作「 CSS 色碼英文名稱對照表一覽 」時，需要一個 "讓表格能排序" 的功能，這樣讀者就能依照自己需求，針對不同欄位進行排序，如此查找資料非常方便，算是一個「友善的使用者體驗」。 因此研究了一下網頁表格排序的功能，本篇記錄一下處理的心得，並將安裝...

繼續閱讀全文

[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)

[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)

(Pic from: keytothecity.co.uk ) 之前做過兩個「回到頂端」按鈕的版本，分別是「 Go Top 按鈕符合使用者體驗的友善設計 」、「 Go Top 按鈕放在浮動導覽列 」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。 ...

繼續閱讀全文

CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式

CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式

CSS tooltip 系列文前兩篇「 安裝懶人包 」及「 疑難雜症排除 」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN  提出了「 CSS tooltip 能否顯示圖片 」的問題，答案雖然是可以，但很麻煩，且需要考量的因素不少。 +Mark X  在前一篇留言...

繼續閱讀全文

[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

當網頁圖片多的時候，「 影響效能的最大因素就是圖片載入 」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外，更好的改善方法是讓圖片能延遲載入，先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「 Lazy Load 」的作用。 好的，本篇的程式正是為了...

繼續閱讀全文

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...

繼續閱讀全文

[小工具] jQuery 展開收合效果安裝懶人包

[小工具] jQuery 展開收合效果安裝懶人包

「展開收合效果」是常見的網頁技巧，最早是在 +Mark X  的「 留言版提示 - jQuery 展開收合效果 」看到這個效果。 如果一個頁面只有一處需要用這個效果，那麼請直接參考 mark 這篇文章即可；如果同一網頁有多處需要展開收合時，這個功能在使用上會稍微麻煩一些，需要...

繼續閱讀全文

[教學]Blogger導覽列下拉選單﹍安裝懶人包

[教學]Blogger導覽列下拉選單﹍安裝懶人包

「下拉選單」是個從部落格建立以來便很想要的功能，不過大部分下拉選單除了安裝方式不容易，通常需要有 HTML 基礎才比較能成功；且另外比較麻煩的是，下拉選單很難具備管理性，也就是日後想調整選單內容、順序時，是個不太輕鬆的工程。 以上便是這篇安裝懶人包的源由，使用這個工具沒有語法...

繼續閱讀全文

[教學]讓部落格導覽列選單能浮動置頂__更新版

[教學]讓部落格導覽列選單能浮動置頂__更新版

關於浮動導覽列的優點，為了節省篇幅請直接參考「 舊版 」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決： 1. 底色透明的異常狀況 2. 留言 #9 +Ken Lo  表示「搜尋框會左右移動」 3. 當螢幕解析度不同時，導覽列的寬度會異常 因此本文的更新版，用...

繼續閱讀全文

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

(Pic from: shimivn.blogspot.com ) 「回到上方」的按鈕是很常見的網頁設計，且 code 不難寫。那麼特地撰寫本文的目的為何呢？其實主要是拜讀了 Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」(連結已失效)覺得很有道...

繼續閱讀全文

[教學]讓部落格導覽列選單能浮動置頂

[教學]讓部落格導覽列選單能浮動置頂

寫完「 部落格浮動側邊欄 」之後，對於這樣的功能還可以有什麼樣的應用，直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具)，認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。 2013.12.20 公告： 由於本篇程式碼...

繼續閱讀全文

讓側邊欄 Adsense 廣告出現在吸引目光的位置 [加值文章]

讓側邊欄 Adsense 廣告出現在吸引目光的位置 [加值文章]

上一篇寫了「 部落格浮動側邊欄 」後，原本的應用是要讓 Google Adsense 廣告能夠在側邊欄浮動、增加讀者的注意力。還好沒釀成大錯，即時發現「 Adsense 的官方規定 」是不允許這樣做的。 根據閱覽經驗，當讀者觀看部落格的文章時，目光焦點大多集中在本文區塊，這也...

繼續閱讀全文

[教學]部落格浮動側邊欄(浮動廣告)__改良精簡版

[教學]部落格浮動側邊欄(浮動廣告)__改良精簡版

浮動側邊欄是效果很不錯的一個網頁設計，這個浮動區塊不會隨著畫面捲動而消失。站長可將想特別強調的內容、傳達的訊息、甚至是廣告內容放入這個區塊，而達到強力曝光的效果。 一開始敘述的是原理及過程，想直接安裝程式碼請跳「二、準備動作」。 P.S. 為了避免誤會，右邊的浮動廣告圖案...

繼續閱讀全文

Blogger 文章置頂+首頁公佈欄實作技巧

Blogger 文章置頂+首頁公佈欄實作技巧

(Pic from: psdgraphics.com ) 過去在「 Blogger 小技巧 」曾整理了一些公佈欄的筆記，以備實作時參考之用。一般而言，在 Blogger 要找到一個區塊能長期置頂實現公告的功效，大致有以下這幾個作法： A. 放在導覽列上方 B. 放在文...

繼續閱讀全文

圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式

圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式

2014.12.17 公告： 本文已有更新版，請前往「 jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 」 若是圖片很多的部落格，非常有必要安裝 Lazy Load 這個圖片延遲載入的外掛，以改善網頁讀取的效能。不過為了這個功能在網路上奮戰了好久，一直沒有成功，也...

繼續閱讀全文
TOP