OfflineSave离线保存代码再次发布使用说明- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > OfflineSave离线保存代码再次发布使用说明

技术文章搜索

关键字

Javascript 中的 OfflineSave离线保存代码再次发布使用说明

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 106 ::

收藏到网摘: n/a

一个js实现的所谓的滑动门 css静态滤镜 + A:Hover 效果

必知：所有需要处理的HTML元素必须具有ID属性，组件只会探测元素的ID属性
1. 在</Head>上加入
<STYLE>
.userData {behavior:url(#default#userdata);}
</STYLE>
2. 在<body>下加入
<INPUT type=text class=userData id=OfflineSave_Area style="display:none">
3. 在</body>上加入
<script src=OfflineSave.js></script>
4. 为form标签加入扩展属性OfflineSave
例：<form id=myOfflineSaveForm OfflineSave ToolsBarStyle="mycssclass">
ToolsBarStyle为css class属性，容器为div,包含select,input,button
注意：
情况1：
<form id=myform onsubmit="docheck(this)">
<input type=text id=mytext>
<input type=submit value=submit>
</form>
在这种情况下,组件可以自动探测服务器存活状态，如服务器无法连接时，会提示本地保存,
并且docheck函数也可以正常工作
情况2：
<form id=myform >
<input type=text id=mytext>
<input type=button value=submit onclick="myform.submit()">
</form>
在这种情况下,组件无法截获提交事件，也无法自动探测服务器存活状态
建议：检测表单内数据时，在form标签onsubmit事件内写入检测函数
联系我：qq:13872888 注明：blueidea

复制代码代码如下:

var os_Obj,os_usd; 
var os_dg=document.getElementById; 
var os_ButtonCss="style=\"cursor:hand;height:20px;padding:0px 3px;border:1px solid #67C1E4;\""; 
var os_SelectCss="style=\"font-size:12px;\""; 
var os_SaveSuccessStr="离线数据保存成功!"; 
var os_SaveProStr="请输入离线保存的名称:(如为空则用当前时间表示)"; 
var os_LoadProStr="确认要载入离线数据吗?"; 
var os_DelProStr="确认要删除离线数据吗?"; 
var os_DelSuccessStr="离线数据删除成功!"; 
var os_oUD="OfflineSave_oPersistInput"; 
var os_DefaultFiledLength=10;//Default Filed length 
var os_str="OfflineSave_"; 
var os_CannotSaveStr="保存数据时出现错误![离线保存空间仅限640K]\n\n有可能已超出离线保存容量!请删除部分数据后再保存!"; 
var os_expires = (new Date(2010,1,1)).toUTCString(); 

InitOfflineSave(); 
function InitOfflineSave(){ 
 for(var i=0;i<document.forms.length;i++){ 
 if(document.forms[i].OfflineSave!=null){ 
 os_usd=os_dg("OfflineSave_Area"); 
 var tbs=document.forms[i].ToolsBarStyle==null?"":document.forms[i].ToolsBarStyle; 
 os_CreateToolBar(document.forms[i],tbs); 
 os_GetOfflineSaveList(document.forms[i].id); 
 var cmd=document.forms[i].onsubmit==null?"":document.forms[i].onsubmit; 
 if(cmd!=""){ 
 cmd=document.forms[i].onsubmit+""; 
 cmd=cmd.split("{")[1].split("}")[0].replace("\n",""); 
 } 
 cmd=escape(cmd); 
 eval("document.forms[i].onsubmit=function(){return os_CheckSubmit('"+document.forms[i].id+"','"+cmd+"');}"); 
 break; 
 } 
 } 
} 
function os_CreateToolBar(obj,boolbarstyle){ 
 var hc; 
 hc="<div id='os_"+obj.id+"_div'><select id='os_"+obj.id+"_Select' "+os_SelectCss+">"; 
 hc+="</select>"; 
 hc+=" "; 
 hc+="<input type=button "+os_ButtonCss+" value=载入 onclick=\"os_LoadData('"+obj.id+"');\">"; 
 hc+=" "; 
 hc+="<input type=button "+os_ButtonCss+" value=删除 onclick=\"os_DelData('"+obj.id+"');\">"; 
 hc+=" "; 
 hc+="<input type=button "+os_ButtonCss+" value=离线保存 onclick=\"os_SaveData('"+obj.id+"');\"></div>"; 
 obj.innerHTML=hc+obj.innerHTML; 
 if(boolbarstyle==""){ 
 os_dg("os_"+obj.id+"_div").style.textAlign = "left"; 
 os_dg("os_"+obj.id+"_div").style.textvAlign = "middle"; 
 os_dg("os_"+obj.id+"_div").style.paddingTop = "3"; 
 os_dg("os_"+obj.id+"_div").style.height = "30"; 
 os_dg("os_"+obj.id+"_div").style.border = "1 solid black"; 
 os_dg("os_"+obj.id+"_div").style.paddingLeft = "5"; 
 } 
 else 
 os_dg("os_"+obj.id+"_div").className=boolbarstyle; 
} 
function os_CheckSubmit(id,subfunc){ 
 if(!os_CanSubmit(os_dg(id).action)){ 
 if(confirm("离线保存提示:\n\n您要提交的服务器连接可能出现问题,是否进行离线保存?")){ 
 os_SaveData(id); 
 } 
 return false; 
 } 
 eval(unescape(subfunc)); 
} 
function os_LoadData(id){ 
 var v=os_dg("os_"+id+"_Select").selectedIndex; 
 if(v==0) return; 
 var ud=os_str+id+os_dg(id).length; 
 if(confirm(os_LoadProStr+"\n\n记录名称:"+os_getUserData(ud,"f_"+v+"_os_savename")+"\n保存时间:"+os_getUserData(ud,"f_"+v+"_os_savedate"))){ 
 var lcount=os_dg(id).length; 
 for(var i=0;i<lcount;i++){ 
 if(os_dg(id).item(i).type!="submit"&&os_dg(id).item(i).type!="reset"&&os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_"+id+"_Select"){ 
 if(os_dg(id).item(i).type=="radio"||os_dg(id).item(i).type=="checkbox") 
 os_dg(os_dg(id).item(i).id).checked=os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id)=="1"?true:false; 
 else{ 
 if(os_dg(id).item(i).type=="select-multiple"){ 
 var sm=os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id).split(","); 
 var x; 
 for(x=0;x<os_dg(id).item(i).length;x++) 
 os_dg(id).item(i).options[x].selected=false; 
 for(x=0;x<sm.length-1;x++) 
 os_dg(id).item(i).options[parseInt(sm[x])].selected=true; 
 } 
 else{ 
 if(os_dg(id).item(i).type=="select-one") 
 os_dg(os_dg(id).item(i).id).selectedIndex=parseInt(os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id)); 
 else{ 
 //alert(os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id)); 
 os_dg(os_dg(id).item(i).id).value=unescape(os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id)); 
 } 
 } 
 } 
 } 
 } 
 } 
} 
function os_DelData(id){ 
 var v=os_dg("os_"+id+"_Select").selectedIndex; 
 if(v==0) return; 
 var ud=os_str+id+os_dg(id).length; 
 if(confirm(os_DelProStr+"\n\n记录名称:"+os_getUserData(ud,"f_"+v+"_os_savename")+"\n保存时间:"+os_getUserData(ud,"f_"+v+"_os_savedate"))){ 
 var i=0; 
 var ud=os_str+id+os_dg(id).length; 
 var lcount=parseInt(os_getUserData(ud,"count")); 
 var vcount=os_dg(id).length; 
 for(i=0;i<vcount;i++){ 
 if(os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_"+id+"_Select") 
 if(v<lcount) 
 os_putUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id,os_getUserData(ud,"f_"+lcount+"_"+os_dg(id).item(i).id)); 
 os_remUserData(ud,"f_"+lcount+"_"+os_dg(id).item(i).id); 
 } 
 if(v<lcount){ 
 os_putUserData(ud,"f_"+v+"_os_savename",os_getUserData(ud,"f_"+lcount+"_os_savename")); 
 os_putUserData(ud,"f_"+v+"_os_savedate",os_getUserData(ud,"f_"+lcount+"_os_savedate")); 
 } 
 os_remUserData(ud,"f_"+lcount+"_os_savename"); 
 os_remUserData(ud,"f_"+lcount+"_os_savedate"); 
 eval("os_putUserData(ud,\"count\",\""+(lcount-1)+"\");"); 
 var s=os_dg("os_"+id+"_Select"); 
 if(lcount==1){ 
 os_delUserData(ud); 
 while (s.length>0) s.remove(0); 
 s.add(new Option("无数据",0)); 
 } 
 else{ 
 s.item(0).text="共有"+(lcount-1)+"个记录"; 
 if(v<s.length){ 
 s.item(0).value=0; 
 s.item(v).text=s.item(s.length-1).text; 
 } 
 s.remove(s.length-1); 
 } 
 alert(os_DelSuccessStr); 
 } 
} 
function os_SaveData(id){ 
 if(os_dg(id).length<=0){ 
 alert("[OfflineSave]Error:\n\n"+id+" no Element!(input,radio,checkbox,select)"); 
 return; 
 } 
 var sd=new Date(); 
 var sn=prompt(os_SaveProStr,sd.toLocaleString()+":MyData"); 
 var ud=os_str+id+os_dg(id).length; 
 var lcount=os_getUserData(ud,"count"); 
 lcount=lcount==""||lcount==null?1:parseInt(lcount)+1; 
 if(os_dg(id).length*10*2*lcount>64000){ 
 alert(os_CannotSaveStr); 
 return; 
 } 
 try{ 
 sn=sn==""?sd.toLocaleString():sn; 
 var vcount=os_dg(id).length; 
 for(var i=0;i<vcount;i++){ 
 if(os_dg(id).item(i).type!="submit"&&os_dg(id).item(i).type!="reset"&&os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_"+id+"_Select"){ 
 if(os_dg(id).item(i).type=="radio"||os_dg(id).item(i).type=="checkbox"){ 
 eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+(os_dg(id).item(i).checked?"1":"0")+"\");"); 
 } 
 else{ 
 if(os_dg(id).item(i).type=="select-multiple"){ 
 var mc=""; 
 for(var x=0;x<os_dg(id).item(i).length;x++){ 
 if(os_dg(id).item(i).options[x].selected) mc+=x+","; 
 } 
 eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+mc+"\");"); 
 } 
 else{ 
 if(os_dg(id).item(i).type=="select-one") 
 eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+os_dg(id).item(i).selectedIndex+"\");"); 
 else 
 eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+escape(os_dg(id).item(i).value)+"\");"); 
 } 
 } 
 } 
 } 
 eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_os_savename\",\""+sn+"\");"); 
 eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_os_savedate\",\""+sd.toLocaleString()+"\");"); 
 eval("os_putUserData(ud,\"count\",\""+lcount+"\");");//save list count 
 var s=os_dg("os_"+id+"_Select"); 
 s.item(0).text="共有"+lcount+"个记录"; 
 s.item(0).value=0; 
 s.add(new Option(sn,lcount)); 
 alert(os_SaveSuccessStr); 
 } 
 catch(e){ 
 alert(os_CannotSaveStr+"\n\n错误原因:"+e); 
 } 
} 
function os_GetOfflineSaveList(id){ 
 var ud=os_str+id+os_dg(id).length; 
 var s=os_dg("os_"+id+"_Select"); 
 var lcount=os_getUserData(ud,"count"); 
 var sv=""; 
 while (s.length>0) s.remove(0); 
 lcount=lcount==""||lcount==null?0:parseInt(lcount); 
 if(lcount<=0) 
 s.add(new Option("无数据","0")); 
 else{ 
 s.add(new Option("共有"+lcount+"个记录","0")); 
 for(var i=1;i<=lcount;i++){ 
 eval("sv=os_getUserData(ud,\"f_"+i+"_os_savename\");"); 
 s.add(new Option(sv,i)); 
 } 
 } 
} 
function os_putUserData(sUDName,sName,sVal) { 
 os_usd.load(sUDName); 
 os_usd.expires = os_expires; 
 os_usd.setAttribute(sName,sVal); 
 os_usd.save(sUDName); 
 return; 
} 
function os_remUserData(sUDName,sName) { 
 os_usd.load(sUDName); 
 os_usd.removeAttribute(sName); 
 os_usd.save(sUDName); 
 return; 
} 
function os_getUserData(sUDName,sName) { 
 os_usd.load(sUDName); 
 return os_usd.getAttribute(sName); 
} 
function os_delUserData(sUDName){ 
 var oTimeNow = new Date(); // Start Time 
 oTimeNow.setMinutes(oTimeNow.getMinutes()+1); 
 var sExpirationDate = oTimeNow.toUTCString(); 
 os_usd.load(sUDName); 
 os_usd.expires = sExpirationDate; 
 os_usd.save(sUDName); 
 return; 
} 
function os_CanSubmit(url){ 
 var xmlHTTP = window.ActiveXObject? new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest(); 
 xmlHTTP.open("get",url,false); 
 xmlHTTP.send(""); 
 return xmlHTTP.status=="200"; 
}

OfflineSave.htm

复制代码代码如下:

<html> 
 <head> 
 <title>离线保存</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
 <STYLE> .userData {behavior:url(#default#userdata);} 
 </STYLE> 
 <link href="css.css" rel="stylesheet" type="text/css"> 
 </head> 
 <body> 
 <INPUT type="text" class="userData" id="OfflineSave_Area" style="DISPLAY:none"> 
 <table width="100%" border="0" cellpadding="0" cellspacing="0" style="FONT-SIZE:12px"> 
 <tr> 
 <td height="78" colspan="3" valign="top"><font size="4" color="red">Ajax演示程序(J2EE)</font> 
 <BR> 
 <BR> 
 服务端:<b>JDK1.4 TomCAT4.1 Hibernate3 MSSQL Server2000(SP4) DWR1.0</b><BR> 
 客户端:<b>JavaScript(CallBack) VML </b> 
 <BR> 
 编写人:富深协通常州研发中心 姜泉</td> 
 </tr> 
 <tr> 
 <td colspan="3"><BR> 
 <table border="1" class="listView" width="100%"> 
 <Caption> 
 离线数据保存(仅限ＩＥ浏览器5.0版本以上)</Caption> 
 <tbody> 
 <tr> 
 <td><form id="myOfflineSaveForm" action="J2EE_AJAX.html" onsubmit="alert('这是在HTML页面中的onsubmit事件中执行的函数!');" OfflineSave> 
 <table cellSpacing="0" cellPadding="2" width="100%" border="1"> 
 <TR> 
 <TD>名称<input type="text" id="name" size="5"> 
 </TD> 
 <TD>公司全称<TEXTAREA id="gsqc" name="gsqc" rows="2" cols="20"> 
 </TEXTAREA></TD> 
 <TD>客户代码<INPUT id="dm" type="checkbox" name="dm"></TD> 
 </TR> 
 <tr> 
 <TD>分类<SELECT id="fl" name="fl"> 
 <OPTION selected>中国人</OPTION> 
 <OPTION>外星人</OPTION> 
 <OPTION>山西人</OPTION> 
 </SELECT></TD> 
 <TD>性别<INPUT id="cz" type="radio" value="cz" checked name="RadioGroup">男<INPUT id="cz1" type="radio" value="cz1" name="RadioGroup">女</TD> 
 <TD>增加日期<SELECT id="rq" size="4" name="rq" multiple> 
 <OPTION>2000年</OPTION> 
 <OPTION>2003年</OPTION> 
 <OPTION>2004年</OPTION> 
 <OPTION>2005年</OPTION> 
 </SELECT></TD> 
 </tr> 
 </table><input type=submit value=submit > 
 </form> 
 </td> 
 </tr> 
 </tbody> 
 </table> 
 </td> 
 </tr> 
 </table> 
 <script src="OfflineSave.js"></script> 
 </body> 
</html> 

一个js实现的所谓的滑动门 css静态滤镜 + A:Hover 效果

Javascript 中的 OfflineSave离线保存代码再次发布使用说明

评论 (0) All