標籤: jQuery 頁1

教學

[jQuery] 將指定的元素包起來- wrap

在 jQuery 我們可以很輕鬆的使用 .wrap() 將指定的元素用我們想要包的東西包起來,使用方法只要使用 .wrap() 將要把它包起來的 HTML 寫好就好。

網路資源

simple-lightbox- 好用方便的 jQuery lightnox 套件

simple-lightbox 是一個好用的 jQuery lightbox 套件,只要簡單引入就能使用。

網路資源

Masonry- 瀑布流版面配置的套件

相信對於網站開發有一定經驗的朋友一定對瀑布流 UI 不陌生,其中最有名的以瀑布流 UI 為版面配置的就屬 pintreset,那如果我們要在自己的網站上使用瀑布流 UI 的配置的話,一般我們都是使用 Masonry 這一個 js 的套件。

教學

[jQuery] before, after, insertBefore, insertAfter 的用法

在 jQuery 裡 before, after, insertBefore, insertAfter 的用法說明。

網路資源

[jQuery Plugin] 拖曳切換內容- twentytwenty

如果想要做一些可以拖曳切換兩種狀態的樣子,很像開窗戶的感覺可以參考這個 plugin,應該很多人會用來做 before/after 的比對。

網路資源

[jQuery plugin] 簡單音效外掛- EasyAudioEffects.js

想要幫你的網站簡單的點綴一點音效的話,可以試一下這個 EasyAudioEffects.js。

教學

[jQuery] javascript 製作下拉式選單與捲軸連動效果

學生問的我寫出來也記錄一下,以往會做這種效果都是用點擊的,也因為有現成的 plugin 所以還沒完整自己寫過,這次有問到要跟下拉式選單怎麼互動我就來弄一下。

教學

[Livewire] 經過一段時間後隱藏透過 session flash 產生的 UI

透過偵測 livewire 的事件,實作經過一段時間後隱藏透過 session flash 產生的 UI。

網路資源

slick- 好用的圖片輪播套件,也支援手機手勢及 RWD

slick 是一個很好用的圖片輪播套件,還號稱是 the last carousel you'll ever need,我個人也覺得是很棒,支援 RWD 也支援手機手勢,這樣不管在任何裝置上都可以正常操作。

教學

[jQuery Plugin] 倒數計時- jQuery.countdown

要使用倒數計時功能找到一隻很方便的 plugin- jQuery.countdown,基本的使用方法是把 plugin 讀入後像這樣寫。

網路資源

[jQuery] instastory.js- 方便好用的抓取 instagram hash tag 的 plugin

instastory.js 方便好用的抓取 instagram hash tag 的 plugin,只要使用 jQuery 並透過簡單的設定,就能抓取指定的 ig hash tag 照片了。

教學

[jQuery] 按下加到購物車後,物品飛到購物車的效果

有些網站為了增加互動,會做把物品點了後東西飛到購物車的效果,這個只要善用網頁排版的概念就能夠做出來了,這邊來示範一下。

教學

[jQuery] 點選圖片後切換循環播放效果

用一個陣列來儲存圖片,在點擊的時候切換圖片的 index 並加上動畫完成。

教學

[CodeIgniter] 使用 reCAPTCHA 驗證(包含 AJAX) 教學

如果要在網站上加裝防機器人的機制,google 提供的這個 reCAPTCHA 是一個很方便的套件,如果有投票、留言板之類的功能怕被灌票的話,可以透過裝上這個來防治。

教學

[jQuery] 取得 datalist 的值

使用 jQuery 取得 datalist 標籤的內容的方法。

教學

使用js的setInterval實現網頁打字機效果

練習用jquery寫打字機的效果。

教學

用 jquery 製作自動伸展寬度的 input 欄位

因為有需求所以研究怎麼寫這樣的 UI: 如果在input的時候,想要後面一直有固定的值的寫法,又希望在打的時候能夠自動跟著輸入的值,這樣看起來使用者會覺得這個值就是之後會輸入到系統的值。

教學

使用 jQuery ajax 上傳 csv 後並透過 D3.js 畫出圖表

在網頁上用 ajax 動態上傳檔案後並馬上繪製出圖表,結合 jquery 跟 d3.js。