Sisyphus.js的使用

最新推荐文章于 2021-10-23 11:28:47 发布

weixin_34167819

最新推荐文章于 2021-10-23 11:28:47 发布

阅读量733

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/Seaside20151225/blog/813669

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、引入js

建立html页面test.html文件，并且引入jquery和sysyhpus以及html文件对应的test.js文件

2、支持的控件以及写法

文本框、复选框、单选框、textarea等都可以保持数据缓存。也可以在js里面控制哪些是不保持的。

<form id="aaa">
   aa:<input name="aa" id="aa" /><br>
   bb:<input type="password" name="password" id="bb" /><br>
   cc:<select id="cc">
       <option value="1" >hahaha111111</option>
       <option value="2">hahaha222222</option>
       <option value="3">hahaha333333</option>
       <option value="4">hahaha444444</option>
       <option value="5">hahaha555555</option>
   </select><br>
   dd:<input type="checkbox" name="dd" value="111" id="c1" >哈哈11
   <input type="checkbox" name="dd" value="222" id="c2">哈哈22
   <input type="checkbox" name="dd" value="333" id="c3" >哈哈33
   <input type="checkbox" name="dd" value="444" id="c4" >哈哈44
   <input type="checkbox" name="dd" value="555" id="c5" >哈哈55<br>
   ee:<input type="radio" name="ee" value="11">呵呵11
   <input type="radio" name="ee" value="22" >呵呵22
   <input type="radio" name="ee" value="33" >呵呵33
   <input type="radio" name="ee" value="44">呵呵44
   <input type="radio" name="ee" value="55">呵呵55<br>
   ff:<input type="file" name="ff" id="ff123" /><br>
   gg:<textarea rows="2" cols="20" name="gg" id="gg"></textarea>
   <button type="button" οnclick="test()" >hehe</button>
</form>

例如：在sysyphus中，去掉password就可以缓存密码。

findFieldsToProtect: function( target ) {
return target.find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" ).not( ":password" ).not( ":disabled" ).not( "[readonly]" );
}

3、js加载

form表单的id直接加载。并且可以设置多长时间自动保存，并且提示自动保存框

$(function(){
   $( "#aaa" ).sisyphus({
       locationBased: true,
       excludeFields: $( "#c1" ), //排除
       timeout: 10,
       onBeforeSave: function() {
           console.log("开始保存"+new Date());
           }
   });
});

4、效果展示

即使关掉页面，再打开依然可以保持数据的已有数据的状态