javascript学习笔记
prototype.js的domready事件，和post方式的ajax
1 document.observe("dom:loaded",function(){ 2 new Ajax.Request('Ajax.asp',{ 3 method:'post', 4 parameters:"action=allusercount", 5 onSuccess:function(data){ 6 alert(data.responseText); 7 } 8 }); 9 });
prototype.js控制元素显示隐藏
1 $("addwebbtn").observe("click",function(){ 2 $("addwebtr").toggle(); 3 //Toggle.display($("addwebtr")); 4 });
prototype.js阻止事件传播
1 $("addwebsubmit").observe("click",function(e){ 2 Event.stop(e); 3 });
javascript阻止事件传播
1 button.onclick=function(event){ 2 if(event){ 3 event.preventDefault(); 4 event.stopPropagation(); 5 }else{ 6 window.event.returnValue=false; 7 window.event.cancelBubble=true; 8 } 9 }
checkbox设置readonly会失败，可以设置onclick事件来实现
1 <input type="checkbox" name="checkbox" value="1" checked="checked" onclick="return false;" />
修改Prototype.js的Toggle.display方法
Prototype.js的Toggle.display方法就是Element.toggle()方法，用来控制元素显示隐藏的，可是在做一个操作的时候往往需要的不只是显示隐藏，如果有几步操作的话，可以放在两个function里面，调用Toggle.display的时候轮流调用这两个方法，所以给Toggle.display又添加了两个参数，是两个函数，Toggle.display内部会判断，如果是一个参数的话还会是原来的Element.toggle方法，否则就会轮流调用function1，function2，修改如下
1 var Toggle = { display: function(element,fn1,fn2){ 2 element = $(element); 3 element.togglefn=element.togglefn||1; 4 if(!fn1||!fn2){ 5 Element.toggle(element); 6 }else{ 7 if(element.togglefn==1){ 8 //这里fn1.call()的第一个参数是element，所以在fn1内部就可以用this来表示element 9 fn1.call(element); 10 element.togglefn=2; 11 }else{ 12 fn2.call(element); 13 element.togglefn=1; 14 } 15 } 16 } };
下面在加上一个调用的示例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 <script language="javascript" src="js/prototype.js"></script> 7 <script language="javascript"> 8 document.observe("dom:loaded",function(){ 9 $("testbtn").observe("click",function(){ 10 Toggle.display($("testdiv"), 11 function(){ 12 this.toggle(); 13 $("testbtn").value="hide"; 14 },function(){ 15 this.toggle(); 16 $("testbtn").value="show"; 17 } 18 ); 19 }); 20 }); 21 </script> 22 </head> 23 24 <body> 25 <input type="button" id="testbtn" value="show" /> 26 <div id="testdiv">1<a>1</a>1</div> 27 </body> 28 </html>
给Element扩展两个方法，在注册的时候，点击提交按钮，不符合的文本框会高亮显示，另外还可以弹出提示信息(不是alert)，一个是highlight方法，另一个是tooltip方法，另外如果highlight方法提供第二个参数，会默认调用tooltip方法。
1 Element.addMethods({ 2 highlight:function(element,delay,msg){ 3 element.hltimes=0; 4 if(element.hl){ 5 clearInterval(element.hl); 6 element.hltimes=0; 7 }else{ 8 element.bgc=element.getStyle("backgroundColor"); 9 } 10 if((msg+"").length>0)element.tooltip(msg); 11 element.hl=setInterval(function(){ 12 if(element.hltimes<5){ 13 var c1=Math.floor(Math.random()*255+1); 14 var c2=Math.floor(Math.random()*255+1); 15 var c3=Math.floor(Math.random()*255+1); 16 element.setStyle({'backgroundColor':"#"+c1.toColorPart()+c2.toColorPart()+c3.toColorPart()}); 17 element.hltimes++; 18 }else{ 19 clearInterval(element.hl); 20 element.setStyle({'backgroundColor':element.bgc}); 21 element.hltimes=0; 22 } 23 },delay); 24 }, 25 tooltip:function(element,msg){ 26 element.opc=1; 27 element.times=1; 28 if(element.hd){ 29 clearInterval(element.hd); 30 } 31 if(!element.tempdiv){ 32 element.tempdiv=document.createElement("div"); 33 element.tempdiv.style.position="absolute"; 34 element.tempdiv.style.width="200px"; 35 element.tempdiv.style.left=element.positionedOffset()[0]+5+"px"; 36 element.tempdiv.style.top=element.positionedOffset()[1]+element.getHeight()+5+"px"; 37 element.parentNode.appendChild(element.tempdiv); 38 }else{ 39 element.tempdiv.innerHTML=""; 40 element.tempdiv.style.display="block"; 41 element.tempdiv.setOpacity(1); 42 } 43 var tempdiv=element.tempdiv; 44 var top=document.createElement("div"); 45 top.style.width="200px"; 46 top.style.backgroundImage="url(js/bubble.gif)"; 47 top.style.height="30px"; 48 tempdiv.appendChild(top); 49 var msgdiv=document.createElement("div"); 50 msgdiv.style.width="192px"; 51 msgdiv.style.backgroundImage="url(js/bubble_filler.gif)"; 52 msgdiv.style.paddingLeft="8px"; 53 msgdiv.innerHTML=msg; 54 tempdiv.appendChild(msgdiv); 55 var bot=document.createElement("div"); 56 bot.style.width="200px"; 57 bot.style.backgroundImage="url(js/bubble.gif)"; 58 bot.style.backgroundPosition="bottom"; 59 bot.style.height="10px"; 60 tempdiv.appendChild(bot); 61 element.hd=setInterval(function(){ 62 if(element.opc>0){ 63 if(element.times>5){ 64 element.opc=element.opc-0.05; 65 $(element.tempdiv).setOpacity(element.opc); 66 } 67 }else{ 68 element.tempdiv.innerHTML=""; 69 element.tempdiv.style.display="none"; 70 clearInterval(element.hd); 71 element.times=0; 72 } 73 element.times++; 74 },50); 75 } 76 });
下面是是用方法，和效果图
1 $("uname").highlight(100,"<span style='color:red;'>用户名请输入六位或以上!</span>"); 2 //highlight的第一个参数是highlight的速度，数字越大越慢 3 //这里提供了第二个参数，所以默认为调用tooltip方法
这个高亮的背景颜色是随机产生的，这个提示框也会慢慢的改变透明度直到完全消失。
如果要单独调用tooltip方法，只要$("uname").tooltip("用户名请输入六位以上！");