
今天我們介紹一個(gè)新的插件 - Sisyphus.js,這個(gè)插件是由Alexander Kaupanin開發(fā)的一個(gè)類似Gmail客戶端草稿保存的jQuery插件,幫助你的用戶在客戶端保存未寫完的草稿。
我們需要解決什么樣的問題呢?
但凡使用過互聯(lián)網(wǎng)的用戶,都會(huì)有如下的慘痛教訓(xùn):
洋洋灑灑的寫了一篇幾百的文章,正準(zhǔn)備保存發(fā)布的時(shí)候,發(fā)現(xiàn)瀏覽器崩潰了,或者是你剛準(zhǔn)備評(píng)論一篇不錯(cuò)的文章,可正準(zhǔn)備遞交的時(shí)候,你PC死機(jī)了。又或是你正準(zhǔn)備發(fā)布時(shí),不小心按錯(cuò)了快捷鍵F5或者后退鍵?
是不是你也曾為以上情況抓狂過?對(duì)于本人來說,我至少遇到過10次以上,每一次我都后悔自己為什么不早些保存。當(dāng)然我們可以使用一些瀏覽器的插件,比如firefox的一些插件(例如,Lazarus)能夠幫助你在本地保存表單上的數(shù)據(jù)。但是對(duì)于其它瀏覽器呢? 或者對(duì)于沒有裝插件的PC呢?
今天我們介紹的這款jQuery插件,絕對(duì)能讓你以后避免遇到如此慘痛的經(jīng)驗(yàn)。
自動(dòng)保存的解決方案
通常使用的解決方式是按時(shí)自動(dòng)保存表單內(nèi)容到本地的文件中,完成后拷貝內(nèi)容回表單輸入項(xiàng)目中。
有的網(wǎng)站提供一個(gè)保存為草稿的按鈕,但是這個(gè)并不非常方便,最方便的方式就類似Gmail提供一個(gè)定時(shí)自動(dòng)保存機(jī)制。
使用Sisyphus.js
這里我們使用簡(jiǎn)單的方式來實(shí)現(xiàn)自動(dòng)保存功能,數(shù)據(jù)將會(huì)保存到瀏覽器的local storage,然后直接從這里取出數(shù)據(jù)內(nèi)容。
Javascript代碼
引入jQuery類庫(kù),版本需要是1.2以上
調(diào)用Sisyphus,如下:
$('#GBin1form1. #GBin1form2').sisyphus();
或者你需要提供所有的表單自動(dòng)保存機(jī)制:
$('Gbin1allform').sisyphus();
以上代碼中,我們調(diào)用sisyphus方法來實(shí)現(xiàn)表單數(shù)據(jù)的自動(dòng)保存。同時(shí)你可以自定義一些選項(xiàng),如下:
customKeyPrefix
一個(gè)自定義的額外key用來保存表單內(nèi)容數(shù)據(jù)
timeout
數(shù)據(jù)自動(dòng)保存的間隔時(shí)間,按秒計(jì)算,如果設(shè)置為“0”,那么每一個(gè)字段更新都自動(dòng)執(zhí)行保存
onSave
本地保存操作后觸發(fā)這個(gè)方法
onRestore
數(shù)據(jù)從本地存儲(chǔ)讀取后觸發(fā)的方法,和onSaveCallback不一樣,它作用于整個(gè)表單,而非某一個(gè)字段
onRelease
本地存儲(chǔ)數(shù)據(jù)清空后調(diào)用的方法
我們可以使用如下代碼自定義選項(xiàng):
$('Gbin1allform').sisyphus({ customKeyPrefix: 'gb', timeout: 5, onSave: function() {}, onRestore: function() {}, onRelease: function() {} }}
你可以針對(duì)不同的表單設(shè)置不同的插件選項(xiàng),并且能夠隨時(shí)修改插件對(duì)應(yīng)的選項(xiàng)。
$('Gbin1allform1').sisyphus({ customKeyPrefix:'gbin1', timeout: 5, onSave:function() {}, onRestore: function() {}, onRelease: function() {} }}$('Gbin1allform2').sisyphus({ customKeyPrefix:'gbin1', timeout: 1, onSave: function() {}, onRestore: function() {}, onRelease: function() {} }}$.sisyphus().setOptions( {timeout:10} ); //設(shè)置全局選項(xiàng) var gbin1 = $('#Gbin1allform1').sisyphus();gbin1.setOptions( {timeout: 15} ); //設(shè)置指定表單選項(xiàng)
插件信息
瀏覽器支持:
Chrome 4+,
Firefox 3.5+,
Opera 10.5+,
Safari 4+,
IE 8+,
Android 2.2,也應(yīng)該可以在其它平臺(tái)運(yùn)行,需要你自己測(cè)試一下
使用要求:
jQuery1.2+
原文地址:http://www.zydsybocom/gbin1ocom/
感謝 gbin1ocom 的投稿


