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

前端 JS 如何避免 callback 地獄?Fetch API 及 Promie 使用技巧

由於早期 Javascript 設計上的缺陷,一方面使用 Ajax 送出 http 請求時,舊時代的 API 異常繁複,非得使用 JS 框架操作 Ajax 才比較方便,例如 jQuery。 一方面 Ajax 是非同步(Asynchronous)執行緒,會造成前端工作一些麻煩,例...

繼續閱讀全文

2020 Lazy Load 延遲載入圖片原理及實作分析研究

前陣子接到一個需求,客戶網站做完「PageSpeed Insights」檢測後分數很低,於是尋求協助。對客戶網站進行健檢後提供一份報告與建議,客戶詢問「延遲載入畫面外圖片」的部分如何改善。 這個項目「PageSpeed Insights」本身提供了不少參考資料,不過研究後才發...

繼續閱讀全文

使用跨域代理伺服器(CORS PROXY),解決讀取第三方網站資料問題﹍實作範例

前端開發人員寫 JS 遇到需要串接第三方 API,或是想存取第三方網站的資料時,遲早會遇到跨域限制的問題。 跨域(Cross-Origin Resource Sharing)的原理可參考這篇「 跨來源資源共用 」,因為安全性考量,網站主幾可設定收到 HTTP 請求時,是否允許...

繼續閱讀全文

讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

最近接到的需求是,希望滑鼠經過圖片時,能像使用放大鏡一樣,掃過的區域有放大的效果。 類似的功能還滿常見的,例如購物網站,需要展示產品的頁面,由於網頁的空間、寬度有限,圖片很難呈現局部細節。為了降低消費者的疑慮,有必要用放大鏡功能,讓小圖來呈現大圖的細部效果。 另外客戶也希...

繼續閱讀全文

網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格

最近客戶需要在網頁上顯示大量的會員資料後,製作一個「匯出」按鈕,將表格所有資料匯出存成 CSV 檔,再用 EXCEL 之類的試算表軟體開啟。 整個流程要用的的技術其實沒有太高深,但是陷阱卻是很多,因此整理成一篇備存。 (圖片出處: pexels.com )

繼續閱讀全文

自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛

雖然時間軸的效果看過不少網頁使用,不過倒是很少看到部落格站長放在文章內。這次接到的需求是,案主希望將單車行旅的圖文經歷,版面用時間軸效果串起來。 於是研究了相關的外掛,同時也要顧及手機的 RWD 效果,請見本篇的心得整理。 點此看範例網頁 (圖片出處: eeyello...

繼續閱讀全文

輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛

最近的案子處理行動版的表格效果時,發現以前的「 Blogger 插入表格最佳流程 + 自適應寬度 」,這個方式若用在商業網站,將沒有任何質感可言,甚至可以用簡陋來形容。 於是找了一下自適應 RWD 表格有沒有比較美觀,而且又簡便的處理方式。有發現幾個功能強大的外掛,但操作稍嫌...

繼續閱讀全文

Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用

上一篇「 利用隱藏的 Iframe 跨域傳送訊息實作 」,很可惜在前端開發人員的大魔王(iOS)面前又失效了,在 iPhone 鬼打牆了很久才瞭解: iOS 禁止 localStorage 跨域傳值 iOS 的 Safari 設定中,預設關閉 cookie iOS 的 C...

繼續閱讀全文

網頁、行動版都可使用的 Tooltip 提示框﹍jQuery + Bootstrap

過去曾寫過一系列「 簡單漂亮的 CSS 提示框(tooltip)懶人包實作 」,可不用裝 JS 外掛,純粹使用 CSS 來實現。 網頁版的 tooltip 提示框,在滑鼠經過時會自動浮現。而最近的案子則是需要在行動版顯示 tooltip 提示框效果,這就有點麻煩,因為手機沒...

繼續閱讀全文

台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得

填寫會員資料的表單,大多需要輸入地址,不過自己製作「縣市」、「鄉鎮地區」的下拉選單其實很麻煩,而且最好也要提供郵遞區號,因為填表者自己不一定記得住。 本篇介紹的這個 jQuery 外掛 TWzipcode,可以完美地解決這些麻煩事,同時也會分享實作的心得。

繼續閱讀全文

自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus

所有網站架設要處理的區塊中,導覽列的下拉選單是最麻煩的一部份,如果需要「多層下拉選單」的話,難度就比較高,可參考「 Blogger 多層下拉選單實作 」。 而行動裝置使用率大幅攀升後,導覽列非常需要有自適應 RWD 效果,手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 R...

繼續閱讀全文

Bootstrap 表單驗證外掛 Validator,美觀輕鬆好上手

網頁表單在送出前,所有欄位都需進行防呆或驗證資料格式。如果每次製作不同的表單,都要重新寫一次 JS 來處理這些事,還挺麻煩的。 大致找了一下,「驗證表單」功能的外掛還不少,而且功能也很強。不過各個官網逛過一圈後,幾乎都被我刷掉了,要嘛功能太多、說明書太複雜,要嘛官網無法立即...

繼續閱讀全文

自動記憶表單狀態,重新開啟網頁後輸入的資料都還在﹍jQuery 外掛 Sisyphus

曾製作過不少線上工具,大多需要用表單的形式讓使用者輸入資料。其中「 圖片 ALT 描述自動產生器 」用到大量表單元件,有單選、多選、文字輸入等各種形式。 只要常常發佈部落格文章的話,這個工具每次都會用到,那麼表單勾選的狀態、或輸入的文字必須儲存起來,下次使用才不會麻煩,可避免...

繼續閱讀全文

jQuery 日期時間範圍選擇器 Date Range Picker (Bootstrap 外掛)

過去網頁表單要輸入日期不容易,往往得另外裝個外掛,例如基於 jQuery 的套件 datepicker。 而現在的瀏覽器使用 HTML5 已成為標準,Input 標籤內建就有簡易的選擇日期功能,只要加入屬性 type="date" 就可使用,不必另裝外掛...

繼續閱讀全文

將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

過去一段時間,網站業務的排程經常處於吃緊的狀態,於是決定好好利用「 Google Calendar 」,把行事曆的排程顯示在網頁上,業主可查詢案件何時能進入排程、以及案件的時程區間。 基本上,Google 日曆預設就有提供嵌入網頁的語法,如果是功能取向的站長,不一定需要另外瞭...

繼續閱讀全文

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」,提出本站的設計方針為: 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅、...

繼續閱讀全文

專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

前陣子有案主需要將文章中的註腳功能,結合資料庫進行管理,也就是讓多處重複的註解,可以直接從試算表讀取,而不必一筆筆註釋。 因為這個案子而接觸到這個文章註腳外掛「 BigFoot 」,測試之後覺得效果跟質感都很好,比之前在「 jQuery 展開收合效果安裝懶人包 」介紹的另一個...

繼續閱讀全文

引用 jQuery 連結及版本的注意事項

許多 Blogger 工具都會用到 jQuery 這個 javascript 框架,需要引用一個外部 js 檔連結。對於不熟悉程式碼的使用者,極有可能從網路上 google 找來許多工具、外掛,並在自己網站引用了多次 jQuery 連結,結果導致網頁載入時,重複讀取了多次 jQu...

繼續閱讀全文

讓 Blogger 留言能顯示圖片及 Youtube 影片﹍將網址字串轉換為圖片

一直以來 Blogger 留言不開放貼圖語法,這是很可惜的事,畢竟很多時候「一張圖勝過千言萬語」,搭配影像的輔佐可節省許多文字的描述。 當然官方應該也是有其考量,若開放了 img 標籤的使用,萬一訪客放了高解析大圖、或是大量貼圖用來惡搞網站,導致網頁開啟速度被癱瘓是有可能的...

繼續閱讀全文

將網頁所有網址字串轉換為超連結

雖然「 超連結 」語法不難,但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼,那麼在留言、發表意見時,若需要引用網址,訪客是不會使用 A 標籤語法的,只會直接貼上 http 開頭的網址連結字串。 如此一來,留言中的網址連結無法點擊,不利於資訊傳播。因此我們可以看到 Fa...

繼續閱讀全文
TOP