插件 jQuery.Phoenix 中文API文档
插件 jQuery.Phoenix 中文API文档
- Github 地址:https://github.com/kugaevsky/jquery-phoenix
- 源码下载: -
- 效果演示: -
jQuery插件,通过HMTL5 Web Storage API将表单状态保存到本地存储 丢失的连接,崩溃的浏览器,破坏的验证 - 所有这些糟糕的丢失形式数据,你已经充满了爱和关怀。
Phoenix是一个jQuery插件,可以保存在本地表单字段中输入的数据,并在浏览器崩溃或页面意外刷新的情况下恢复它。
凤凰城将坏事远离你的形式。它非常小–3Kb(1Kb gziped),但功能强大。Phoenix使用HTML5 Web Storage API将表单字段值,复选框和单选按钮状态保存到浏览器本地存储。
如果Internet连接在任何时候脱机,浏览器崩溃,页面刷新或表单无法验证,填写表单的用户可以将表单恢复到他的上一个版本,而不是再次重新填充所有表单域。
够了!看一眼
要求
这是jQuery插件所以它需要jQuery。
安装
从源代码克隆,下载(缩小)或使用bower安装。
用法
- 需要jQuery
- 需要jquery.phoenix.js或其缩小版本
- $(‘input’).phoenix() - 施展魔法
- $(‘input’).phoenix(‘remove’) - 成功提交表格(或更多其他活动)的清晰存储空间
像这样的东西
<form id='stored-form'>
<input type="text" class="phoenix-input" />
<textarea type="text" class="phoenix-input"></textarea>
</div>
<script type="text/javascript">
$('.phoenix-input').phoenix()
$('#my-form').submit(function(e){
$('.phoenix-input').phoenix('remove')
})
</script>
请查看演示文件源以了解用法。
API
Phoenix提供简单但灵活的API。
选项
您可以在Phoenix初始化时传递选项对象。
$('.phoenix-input').phoenix({
namespace: 'phoenixStorage',
webStorage: 'sessionStorage',
maxItems: 100,
saveInterval: 1000,
clearOnSubmit: '#stored-form',
keyAttributes: ['tagName', 'id']
})
可能的选择是:
- namespace- webStorage命名空间(如果你不喜欢默认) - string : phoenixStorage,
- webStorage - 使用的方法; sessionStorage或localStorage,(默认为localStorage) - 字符串:localStorage,
- maxItems- 要存储的最大项目(每个表单字段是一个项目) - 整数:100,
- saveInterval - 将字段值保存到localStorage(毫秒)的频率。如果是负数,则仅在调用save方法时保存字段- 整数:1000
- clearOnSubmit- 表单选择器(当您提交此表单时,Phoenix将清理存储的项目) - 字符串:false
- keyAttributes- 定义将使用哪些元素属性来查找要填充的正确元素 - array:[’tagName’, ‘id’, ’name’]
方法
当Phoenix初始化时,您可以使用API方法来管理它。调用方法$(selector).phoenix(‘methodName’),其中methodName之一是:
- start- 开始保存计时器,它会每隔saveIntervalms 保存一次字段值(saveInterval是你记得的一个选项)
- stop - 停止保存计时器
- load - 从存储的项目到字段加载值
- save - 保存从字段到存储项目的值
- remove - 停止保存计时器并从localStorage中删除存储的项目
NB Phoenix不会自行从localStorage中删除存储的项目。因此,remove当您不再需要填写表单字段值时,请不要忘记调用事件,或者使用clearOnSubmit带有表单ID的选项。
活动
每个Phoenix方法调用都会触发您可以绑定的事件。例如
$('.phoenix-input').bind('phnx.loaded', function (e) {
console.log('Data loaded... ')
})
事件命名非常明显,所以试试看
- phnx.started
- phnx.stopped
- phnx.loaded
- phnx.saved
- phnx.removed
兼容性
浏览器
任何与HTML5 Web Storage API浏览器兼容的都可以与Phoenix配合使用。
- Chrome 4+
- Firefox 3.5+
- Safary 4+
- Opera 10.5+
- IE 8+
- 所有现代移动浏览器(Opera Mini除外)
CanIuse cheatsheet
其他插件
数十个插件使表单输入更加强大和漂亮。选择或选择二例如。你可以安全地在凤凰城使用它。只需确保在这些插件之前初始化Phoenix。