BlogJava-lsbwahaha-随笔分类-js，html，csshttp://www.blogjava.net/lsbwahaha/category/39058.htmlzh-cnSun, 29 May 2011 09:25:47 GMTSun, 29 May 2011 09:25:47 GMT60可输入的下拉框ComboBox(Select加Input)http://www.blogjava.net/lsbwahaha/archive/2011/05/29/351280.html胡鹏胡鹏Sun, 29 May 2011 08:39:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2011/05/29/351280.htmlhttp://www.blogjava.net/lsbwahaha/comments/351280.htmlhttp://www.blogjava.net/lsbwahaha/archive/2011/05/29/351280.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/351280.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/351280.html
<HTML> 
<HEAD> 
<META http-equiv='Content-Type' content='text/html; charset=gb2312'> 
<TITLE>可输入的下拉框</TITLE> 
</HEAD> 
<BODY > 
 
<div style="position:relative;"> 
<span style="margin-left:100px;width:18px;overflow:hidden;"> 
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value"> 
<option value="www.taobao.com"> taobao </option> 
<option value="www.baidu.com"> soft </option> 
<option value="WEB开发者"> WEB开发者 </option> 
</select></span><input name="box" style="width:100px;position:absolute;left:0px;"> 
</div> 
</BODY></HTML> 


胡鹏 2011-05-29 16:39 发表评论
]]>js,倒计时时间显示(转)http://www.blogjava.net/lsbwahaha/archive/2009/11/03/300927.html胡鹏胡鹏Tue, 03 Nov 2009 08:33:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/11/03/300927.htmlhttp://www.blogjava.net/lsbwahaha/comments/300927.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/11/03/300927.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/300927.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/300927.html Untitled Document

倒计时：

 


胡鹏 2009-11-03 16:33 发表评论
]]>什么是Cookie(转)http://www.blogjava.net/lsbwahaha/archive/2009/11/03/300924.html胡鹏胡鹏Tue, 03 Nov 2009 08:28:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/11/03/300924.htmlhttp://www.blogjava.net/lsbwahaha/comments/300924.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/11/03/300924.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/300924.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/300924.html
   Cookie由某个WWW网页在某客户机上进行设置。比如,某个WWW网页已在一个用户的计算机上设置了一个Cookie,其中存储的信息是该用户的身份号(随机赋予该用户的唯一标识),当该用户的浏览器连接该WWW站点时,站点要求浏览器将Cookie送回,他的身份号就通过Cookie 传递给该网页所在的WWW服务器。服务器上的一个CGI程序查找一个服务器端的文件以确定关于他的预设内容。

   当某个服务器在客户的计算机上设置Cookie后,请注意如果要让Cookie信息确实写入文件,必须关闭浏览器。在浏览器未关闭之前,任何新的或变化的Cookie都存放在内存中。

二、Cookie的特性
   每个Cookie包含有6个元素,常用的有:name、value、expires、domain和secure。这些元素存放了这个Cookie的作用范围及实际的数据。
   1.name  这是每一个Cookie必须有的元素,它是该Cookie的名字。name元素是一个不含分号、逗号和空格的字符串。其命名方式与变量命名相同。
   2.value  value也是每个Cookie必须有的元素,它是该Cookie的值。value元素是实际存放于Cookie中的信息。它是由任何字符构成的字符串。
   3.expires  expires是一个Cookie的过期时间。没有设置expires元素的Cookie在用户断开连接后过期,但在用户关闭浏览器之前Cookie依然存在。
   Cookie有一个过期时间并等于它会从Cookie.txt文件中被删除。在它的位置被用来存放另一个Cookie前,它依然存在着。过期的Cookie只是不被送往要求使用它的服务器。
   expire是一个串,它的形式如下:
   Wdy, DD-Mon-YY HH:MM:SS GMT
   expires元素是可选的。
   4.domain  domain是设置某个Cookie的Web网页所在的计算机的域名。这样,由一个站点创建的Cookie不会影响到另一个站点上的程序。对于较高层的域名如.com, .edu,或.mil,域名中至少有两个分隔符(.)。而对于较低层的域名如.cn, .uk或.ca,域名中至少有3个分隔符。demain元素自动地被设为网页所在站点的基本域名。比如,你的网页位于http://www.abc.com/～user,则该网页创建的Cookie缺省地对域abc.com有效。如果你希望你的Cookie 只应用于服务器www3.abc.com,那么你必须在设置Cookie的时候指定。
   只有拥有域名的站点才能为那个域名设置Cookie
   5.path  一个Cookie可以被指定为只针对一个站点的某一层次。如果一个Web站点要区分已注册的和未注册的客户,就可以为已经注册的客户设置Cookie,当注册过的客户访问该站点时,他就可以访问到只对注册客户有效的页面。path是可选项,如果没有指定path,将被缺省地设置为设置Cookie的页面的路径。
   6.secure标志  secure是一个布尔值(真或假)。它的缺省值为假。如果它被设为真值, 这个Cookie只被浏览器认为是安全的服务器所记住。

三、关于Cookie的一些限制

   一个站点能为一个单独的客户最多设置20个Cookie。如果一个站点有两个服务器(如www.abc.com和www3.abc.com)但没有指定域名,Cookie的域名缺省地是abc.com。如果指定了确切的服务器地址,则每个站点可以设置20个Cookie--而不是总共20个。不仅每个服务器能设置的Cookie数目是有限的,而且每个客户机最多只能存储300个Cookie。如果一个客户机已有300个Cookie,并且一个站点在它上面又设置了一个新Cookie,那么,先前存在的某一个Cookie将被删除。
   每个Cookie也有自身的限制。Cookie不得超过4KB(4096bytes),其中包括名字和其他信息。
四、javascript和Cookie

   现在大家已经了解有关Cookie的一些基本概念了,让我们更进一步讨论Cookie。可以用javascript来很方便地编写函数用来创建、读取和删除Cookie。下面,我们就介绍这些函数

   1.创建Cookie

   我们要进行的第一件事就是要创建一个Cookie。下面给出的SctCookie()函数将完成这一功能。
   function SetCookit (name, value) {
     var argv=SetCookie.arguments;
     var argc=SetCookie.arguments.length;
     var expires=(argc>2)?argv[2]: null;
     var path=(argc>3)? argv[3]: null;
     var domain=(argc>4)? argv[4]: null;
     var secure=(argc>5)? argv[5]: false;
     documents.cookie=name+"="+escape
       (value)+
     ((expires==null)?"":(";expires="
       +expires.toGMTString()))+
     ((path==null)?"":(";path="+path))+
     ((domain==null)?"":(";domain="+
       domain))+
     ((secure==true)?";secure":"");
   }
   SetCookie()只要求传递被设置的Cookie的名字和值,但如果必要的话你可以设置其他4 个参数而不必改变这个函数。可选的参数必须用正确的次序使用。如果不想设置某个参数, 必须设置一个空串。比如,如果我们创建的一个Cookie需要指定secure域,但不想设置expires, patb或domain,就可以像这样调用SetCokie():  SetCookie("MyNewCookie","Myvalue" ,"",","tyue);
   2.读取Cookie

   下面给出的函数GetCookie()用来读取一个Cookie。当一个Cookie的请求被客户机收到时,该客户机查找它的cookies.txt文件以进行匹配。这个函数首先匹配这个Cookie的名字。如果有多个同名的Cookie,它再匹配路径。函数完成匹配后返回这个Cookie的值。如果客户机中没有这个Cookie,或者路径不匹配,该函数返回一个NULL。
   function GetCookie(name) {
     var arg=name+ "=";
     var alen=arg.length;
     var clen=documents.cookie.length;
     var i=0;
     while (i<clen) {
       var j=i+alen;
       if(documents.cookie.substring(i,j)
       ==arg)
       return getCookieVal(j);
       i=documents.cookie.indexOf("",i)+1;
       if(i==0)break;
     }
     return null;
   }
   函数中使用了getCookieVal()函数,它是GetCookie()函数的补充。getCookieVal()将C ookies.txt文件分解为片断,并从一批Cookie中读出正确的Cookie。该函数的实现如下:
   function getCookieVal(offset) {
     var endstr=documents.cookie.indexOf
       (";",offset);
     if(endstr==-1) //没有指定其他元素
       endstr=documents.cookie.length;
     return unescape(documents.cookie.substring
       (offset,endstr));
   }

   3.删除Cookie

   删除一个Cookie很简单,只需将它的过期时间设为NULL。当用户断开连接后,这个Cooki e就过期了(没有过期时间的Cookie将在浏览器关闭时被删除)。下面的函数DeleteCookie() 说明了如何删除一个
Cookie:
   function DeleteCookie(name) {
     var exp=new Date();
     exp.setTime(exp.getTime()-1);
     //将exp设为已过期的时间
     var cval=GetCookie(name);
     documents.cookie=name+"="+cval+";
     expires="+exp.toGMTString();
   }




胡鹏 2009-11-03 16:28 发表评论
]]>第一次接触ExtJShttp://www.blogjava.net/lsbwahaha/archive/2009/07/26/288475.html胡鹏胡鹏Sun, 26 Jul 2009 14:28:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/07/26/288475.htmlhttp://www.blogjava.net/lsbwahaha/comments/288475.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/07/26/288475.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/288475.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/288475.htmlExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写 的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应 用中。

ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术 的精品。

ExtJS:    http://www.spket.com/demos/js.html spket插件(eclipse)

·         Start Aptana and navigate the application menu to: Help → Software Updates → Find and Install… → Search for new features to install → New remote site…

·         Name: “Spket”, Url: “http://www.spket.com/update/”

·         Restart Eclipse

·         Watch this Spket IDE Tutorial to see how to easily add Ext code assist (you can point it at the latest /src/ext.jsb to keep code assist up to date with the latest Ext version). The steps are basically:

o    Window → Preferences → Spket → JavaScript Profiles → New

o    Enter “ExtJS” and click OK

o    Select “ExtJS” and click “Add Library”, then choose “ExtJS” from the dropdown

o    Select “ExtJS” and click “Add File”, then choose the “ext.jsb” file in your “./ext-2.x/source” directory

o    Set the new ExtJS profile as the default by selecting it an clicking the “Default” button on the right-hand side of the “JavaScript Profiles” dialog.

o    Restart Eclipse

o    Create a new JS file and type: Ext. and you should get the Ext Code completion options.

一个简单的例子：

http://extjs.org.cn/node/83



胡鹏 2009-07-26 22:28 发表评论
]]>常用的匹配正则表达式和实例(转)http://www.blogjava.net/lsbwahaha/archive/2009/05/15/270865.html胡鹏胡鹏Fri, 15 May 2009 08:06:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/05/15/270865.htmlhttp://www.blogjava.net/lsbwahaha/comments/270865.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/05/15/270865.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/270865.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/270865.html
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
匹配首尾空格的正则表达式：(^\s*)|(\s*$)
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：
String.prototype.trim = function()
{ return this.replace(/(^\s*)|(\s*$)/g, "");
} 利用正则表达式分解和转换IP地址：
下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：
function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/

[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/
[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"



胡鹏 2009-05-15 16:06 发表评论
]]>HTML——网页中嵌入 media play 和 real play 代码http://www.blogjava.net/lsbwahaha/archive/2009/04/16/266028.html胡鹏胡鹏Thu, 16 Apr 2009 12:34:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/266028.htmlhttp://www.blogjava.net/lsbwahaha/comments/266028.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/266028.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/266028.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/266028.html
<object align=middle classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 class=OBJECT

id=MediaPlayer width=360 height=70 >
<param name=ShowStatusBar value=-1><param name=Filename

value=http://008.org.cn/mp3/rosebush/2.mp3>
<embed type=application/x-oleobject

codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701

flename=mp src=http://008.org.cn/mp3/rosebush/2.mp3 width=360 height=70></embed></object>
在网页中嵌入 real play 的代码：
htmlavi
<OBJECT height=300 width=500 classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA><PARAM NAME="_ExtentX" VALUE="13229"><PARAM NAME="_ExtentY" VALUE="7938"><PARAM NAME="AUTOSTART" VALUE="-1"><PARAM NAME="SHUFFLE" VALUE="0"><PARAM NAME="PREFETCH" VALUE="0"><PARAM NAME="NOLABELS" VALUE="0"><PARAM NAME="SRC" VALUE="http://192.168.2.56:8085/pmi/resupload/00000000000000000042/100001/1087890034804_1.rm"><PARAM NAME="CONTROLS" VALUE="ImageWindow"><PARAM NAME="CONSOLE" VALUE="Clip1"><PARAM NAME="LOOP" VALUE="0"><PARAM NAME="NUMLOOP" VALUE="0"><PARAM NAME="CENTER" VALUE="0"><PARAM NAME="MAINTAINASPECT" VALUE="0"><PARAM NAME="BACKGROUNDCOLOR" VALUE="#000000"></OBJECT><BR>
<OBJECT height=30 width=500 classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA><PARAM NAME="_ExtentX" VALUE="13229"><PARAM NAME="_ExtentY" VALUE="794"><PARAM NAME="AUTOSTART" VALUE="0"><PARAM NAME="SHUFFLE" VALUE="0"><PARAM NAME="PREFETCH" VALUE="0"><PARAM NAME="NOLABELS" VALUE="0"><PARAM NAME="CONTROLS" VALUE="ControlPanel"><PARAM NAME="CONSOLE" VALUE="Clip1"><PARAM NAME="LOOP" VALUE="0"><PARAM NAME="NUMLOOP" VALUE="0"><PARAM NAME="CENTER" VALUE="0"><PARAM NAME="MAINTAINASPECT" VALUE="0"><PARAM NAME="BACKGROUNDCOLOR" VALUE="#000000"></OBJECT>


胡鹏 2009-04-16 20:34 发表评论
]]>js——实现当前网页中的代码导入到word中http://www.blogjava.net/lsbwahaha/archive/2009/04/16/266027.html胡鹏胡鹏Thu, 16 Apr 2009 12:32:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/266027.htmlhttp://www.blogjava.net/lsbwahaha/comments/266027.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/266027.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/266027.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/266027.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页上内容导出到word</title>
</head>
<body>
<div id="Layer1" >Happy New Year ! ! !
<input type=button name='button_export' title='导出到word'  onclick=OpenWord() value=下载到word></div>
</div>
<input type='button' value='fullscreen' onClick="window.open('c:\\a.html','fullscreen','fullscreen,scrollbars');">

<input name="but1" type="button" onClick="window.open('b.html');" value="b.html">
<iframe name="iframe2" src=""></iframe>

<p>this is a test!</p>
<table align="center" width="300" border="1" bordercolor="#2baeff" cellpadding="0" cellspacing="0" bgcolor="lightblue">
<Tr><Td>1</td><Td>2</td><Td>3</td></tr>
<Tr><Td>4</td><Td>5</td><Td>6</td></tr>
<Tr><Td>7</td><Td>8</td><Td>9</td></tr>
</table>

<input type="checkbox" id="chk">chkTest<br><br>
<input type="button" name="testOpen" value="openWindow" onClick="var newWindow = window.open('a.html');newWindow.document.all('chk').checked = true;">
</body>
</html>
<script language="javascript">
function OpenWord(){
Layer1.style.border=0
ExcelSheet = new ActiveXObject('Word.Application');
ExcelSheet.Application.Visible = true;
var mydoc=ExcelSheet.Documents.Add('',0,1);
myRange =mydoc.Range(0,1)
var sel=Layer1.document.body.createTextRange()
sel.select()
Layer1.document.execCommand('Copy')
sel.moveEnd('character')
myRange.Paste();
location.reload()
ExcelSheet.ActiveWindow.ActivePane.View.Type=9
}
</script>


胡鹏 2009-04-16 20:32 发表评论
]]>js——网页全屏显示http://www.blogjava.net/lsbwahaha/archive/2009/04/16/265955.html胡鹏胡鹏Thu, 16 Apr 2009 05:44:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/265955.htmlhttp://www.blogjava.net/lsbwahaha/comments/265955.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/265955.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/265955.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/265955.html

这段程序放在<body>与</body>之间
<script>
<!--
function windowopen(){
var target="http://zhoucaiqi.51.net"
newwindow=window.open("","","scrollbars")
if (document.all){
newwindow.moveTo(0,0)
newwindow.resizeTo(screen.width,screen.height)
}
newwindow.location=target
}
//-->
</script>
<form>
<input type="button" onClick="windowopen()" value="全屏显示" name="button">
</form>
 
 程序讲解：
   


function windowopen()
 定义一个函数。
{ var target="http://zhoucaiqi.51.net"
设置一个字符串。
newwindow=window.open("","","
scrollbars")
打开一个新窗口。
if (document.all)
{ newwindow.moveTo(0,0)
新窗口从（0，0）位置开始显示。
newwindow.resizeTo
(screen.width,screen.height) }
新窗口的尺寸是整个屏幕的宽，整个屏幕的高。
newwindow.location=target 显示target指定的链接地址。
<input type="button" onClick="windowopen()" value="全屏显示" name="button"> 插入一个按钮，击它的时候调用windowopen()函数。


胡鹏 2009-04-16 13:44 发表评论
]]>js—网页中拖动图片http://www.blogjava.net/lsbwahaha/archive/2009/04/16/265954.html胡鹏胡鹏Thu, 16 Apr 2009 05:40:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/265954.htmlhttp://www.blogjava.net/lsbwahaha/comments/265954.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/04/16/265954.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/265954.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/265954.html
<style>
<!--.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop 
x=event.clientX
y=event.clientY
document.onmousemove=move
}}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
        <img src="img/draw.jpg" class="drag">

程序代码讲解：

<style>
<!--.drag{position:relative;cursor:hand} -->
</style>
定义一个样式。
<script language="JavaScript">
var dragapproved=false
var z,x,y
 声明几个变量。
function move()
{ if (event.button==1&&dragapproved)
定义一个函数move()，判断鼠标是否是按下状态。
{ z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false }}
定义图片左上角的位置。
function drags()
{ if (!document.all)
return
 定义一个函数drags()。如果是Netscape浏览器，就返回。所以此效果，在Netscape浏览器中看不到。
if (event.srcElement.className=="drag")
{ dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
如果鼠标左键被按下，返回z，temp1，temp2，x，y的值。
document.onmousemove=move }}
document.onmousedown=drags
document.onmouseup=new
Function("dragapproved=false")
</script>
当鼠标移动时，执行move（）函数，当鼠标按下的时候，执行drags函数，当鼠标抬起的时候，不执行任何函数。
<img src="img/draw.jpg" class="drag"> 在页面中插入一张图片。




胡鹏 2009-04-16 13:40 发表评论
]]>yui中——Event工具集的使用(转)http://www.blogjava.net/lsbwahaha/archive/2009/04/15/265800.html胡鹏胡鹏Wed, 15 Apr 2009 09:28:00 GMThttp://www.blogjava.net/lsbwahaha/archive/2009/04/15/265800.htmlhttp://www.blogjava.net/lsbwahaha/comments/265800.htmlhttp://www.blogjava.net/lsbwahaha/archive/2009/04/15/265800.html#Feedback0http://www.blogjava.net/lsbwahaha/comments/commentRss/265800.htmlhttp://www.blogjava.net/lsbwahaha/services/trackbacks/265800.htmlYUI提供的Event工具集

YUI提供的Event工具集简化了浏览器中事件驱动程序的编写，提供了一种简单的接口来定制事件和检查浏览器中的event对象。YUI事件工具集提供了自定义事件对象(Custom Event)，通过自定义事件对象可以“发布”自己感兴趣的时刻或事件，页面中的YUI组件能够响应这些自定义的事件并做出回应。

YUI对事件响应的顺序：通过YUI Event工具集添加的事件，默认是在冒泡过程中执行事件处理函数的。从DOM节点上来说，是从子节点向根节点响应事件。

Event需要的引入

<!-- Dependency -->

build/yahoo/yahoo-min.js

<!-- Event source file -->

build/event/event-min.js

Event和Custom Event分别定义在YAHOO.util.Event和YAHOO.util.CustomEvent中

Event工具集提供的方法

YAHOO.util.Event.addListener(element,eventType,fn,obj,override)

参数：

element：为绑定事件的元素id，可以是一个数组，以支持批量操作

eventType：为事件类型

fn：为事件响应的回调函数

obj：当override为true时，为回调函数传入的参数对象；当override为false时，该参数被忽略。

override：

返回值类型：Boolean

功能：给指定的element绑定事件响应函数

YAHOO.util.Event.removeListener:function(element,eventType,fn)

参数：

element：为绑定事件的元素id,

eventType：事件类型

fn：为事件响应函数

返回值类型：Boolean

功能：给指定的element解除绑定事件

YAHOO.util.Event.purgeElement ( el , recurse , sType )

参数：

el：为绑定事件的元素id,

recurse：Boolean值，是否解除子节点的事件绑定

sType：事件类型

返回值类型：Boolean

功能：给指定的element解除绑定的同一类型的事件，也可以解除子节点上绑定的这一类型的事件

YAHOO.util.on

addListener的函数别名

YAHOO.util.Event.onAvailable ( p_id , p_fn , p_obj , p_override )

参数：

p_id：为绑定事件的元素id,

p_fn：为事件响应函数

p_obj：同addListener的obj参数

p_override：同addListener的override参数

返回值类型：无

功能：当指定的element的p_id出现时，执行事件响应函数。如果在页面初始化之前执行这一函数，当页面加载时（可能还未完成时），就会执行响应的事件响应函数；如果放在页面加载之后执行这一函数，将以固定的时间轮询，当element可用时响应这一事件。这个轮询的的时间是可以配置的，缺省的时间是10秒一次。

YAHOO.util.Event.onContentReady ( p_id , p_fn , p_obj , p_override )

参数：

p_id：为绑定事件的元素id,

p_fn：为事件响应函数

p_obj：同addListener的obj参数

p_override：同addListener的override参数

返回值类型：无

功能：与onAvailable类似，但不同的是事件响应函数是等到element可以安全的修改的时候才响应。

YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )

参数：

p_fn：为事件响应函数

p_obj：同addListener的obj参数

p_scope：同addListener的override参数

返回值类型：无

功能：当DOM第一次可用时执行响应函数。

YAHOO.util.Event.preventDefault ( event)

参数：

event：事件对象

返回值类型：无

功能：阻止事件的缺省行为发生。



胡鹏 2009-04-15 17:28 发表评论
]]>