jQuery slimScroll

 

What is slimScroll?

slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

css-element-queries

CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.

程式碼標示 Code Mirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

(黑暗執行序) 以jQuery實現可編輯

網頁以<table>方式呈現數據矩陣,希望能做到在某一格(<td>)點兩下可以直接編輯格子文字內容,按Enter或點選其他格子結束編輯狀態,並將該格內容更新為剛才輸入結果。

介面如下圖所示,在<td>V11</td>上點兩下,V11就變成<input value=”V11”>,使用者可將<input>的值改成ZZZ,當按Enter或點其他<td>,該格內容就變成<td>ZZZ</td>。

這個需求要用jQuery實現並不難: 在<td>上掛dblclick事件,將<input type=”text”>放入td中,val()就設成td原本的text();另外設定<input>的keydown及所有<td>的click事件,執行td.text(input.val())取input值寫成td內容就大功告成囉!

觸控滑動 - 頁面立體切換效果

這篇要介紹 jQuery Mobile 一個鮮為人知但又非常好用的功能:觸控!在使用行動版網頁或是製作 hybrid App 的時候,觸控通常都是一個大問題,一個單純區分 tap 和 mousedown、mouseover 之類的行為,可能都會讓程式變得十分複雜,好加在,jQuery Mobile 替我們解決掉了這個問題,既有的五種觸控事件,涵蓋了基本的手勢行為 ( 當然多點觸控就沒辦法了 ),因此我就利用觸控事件,搭配 CSS3 的 transform 3D ,做出立體又酷炫的切換效果!

顯示下載進度的JS函式庫

A themeable progress bar library for everything.

ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them.

You can use ProgressJs to show the progress of loading contents (images, videos, etc.) on the page to the users. It can be used on all elements including textboxes, textareas or even the whole body.

It's light-weight, easy to use, customizable, free and open-source.