BlogJava-BlueSpace-文章分类-javasrcipthttp://www.blogjava.net/wufalong/category/25525.html思想有多远，我们就能走多远！zh-cnSun, 30 Aug 2009 05:34:56 GMTSun, 30 Aug 2009 05:34:56 GMT60jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中http://www.blogjava.net/wufalong/articles/292615.htmlcrazycrazyWed, 26 Aug 2009 03:11:00 GMThttp://www.blogjava.net/wufalong/articles/292615.htmlhttp://www.blogjava.net/wufalong/comments/292615.htmlhttp://www.blogjava.net/wufalong/articles/292615.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/292615.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/292615.htmljquery radio取值，checkbox取值，select取值，radio选中，checkbox选中
2009-05-18 16:27

文章简介：获取select被选中项的文本，select下拉框的第二个元素为当前选中值，radio单选组的第二个元素为当前选中值，获取值：文本框，文本区域：$("#txt").attr("value")；多选框checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val(); ……
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值

var item = $('input[@name=items][@checked]').val();


获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();


select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;


radio单选组的第二个元素为当前选中值

$('input[@name=items]').get(1).checked = true;


获取值：

文本框，文本区域：$("#txt").attr("value")；

多选框checkbox：$("#checkbox_id").attr("value")；

单选组radio： $("input[@type=radio][@checked]").val();

下拉框select： $('#sel').val();

控制表单元素：

文本框，文本区域：$("#txt").attr("value",'');//清空内容

   $("#txt").attr("value",'11');//填充内容


多选框checkbox： $("#chk1").attr("checked",'');//不打勾

   $("#chk2").attr("checked",true);//打勾

   if($("#chk1").attr('checked')==undefined) //判断是否已经打勾


单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项


下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

   $("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//添加


下拉框的option

   $("#sel").empty()；//清空下拉框


获取一组radio被选中项的值

var item = $('input[@name=items][@checked]').val();


获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();


select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;


radio单选组的第二个元素为当前选中值

$('input[@name=items]').get(1).checked = true;


获取值：

文本框，文本区域：$("#txt").attr("value")；


多选框checkbox：$("#checkbox_id").attr("value")；


单选组radio： $("input[@type=radio][@checked]").val();


下拉框select： $('#sel').val();


控制表单元素：

文本框，文本区域：$("#txt").attr("value",'');//清空内容


$("#txt").attr("value",'11');//填充内容


多选框checkbox： $("#chk1").attr("checked",'');//不打勾


$("#chk2").attr("checked",true);//打勾


if($("#chk1").attr('checked')==undefined) //判断是否已经打勾


单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项


下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项


$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option


$("#sel").empty()；//清空下拉框


crazy 2009-08-26 11:11 发表评论
]]>取得页面的大小 宽高等各种信息http://www.blogjava.net/wufalong/articles/214667.htmlcrazycrazyMon, 14 Jul 2008 01:47:00 GMThttp://www.blogjava.net/wufalong/articles/214667.htmlhttp://www.blogjava.net/wufalong/comments/214667.htmlhttp://www.blogjava.net/wufalong/articles/214667.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/214667.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/214667.html<SCRIPT LANGUAGE="JavaScript">
function test(){
var  s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
}
</SCRIPT>
<A HREF="javascript:test()">点击我查看信息</A>
</body>

crazy 2008-07-14 09:47 发表评论
]]>js对象http://www.blogjava.net/wufalong/articles/207755.htmlcrazycrazyFri, 13 Jun 2008 12:56:00 GMThttp://www.blogjava.net/wufalong/articles/207755.htmlhttp://www.blogjava.net/wufalong/comments/207755.htmlhttp://www.blogjava.net/wufalong/articles/207755.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/207755.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/207755.html<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <SCRIPT LANGUAGE="JavaScript">
  <!--
 function Human()
 {
  this.i=3;
 }

 function test()
 {
  alert(Human.i+",1");
  alert(new Human().i+",2");
  alert(ff.test1+",3");
  alert(ff.test2+",4");
  alert(ff.test3+",5");
 }
 //用alert(Human.i)居然访问不到
 //而 alert(new Human().i)则可以

 function f()
 {
  this.test1=1;
 }
 f.test2=2;
 f.prototype.test3=3;
 ff= new f();

  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
  <script>test()</script>
 </BODY>
</HTML>

结果 alert(1,3)取不到值



crazy 2008-06-13 20:56 发表评论
]]>dwrhttp://www.blogjava.net/wufalong/articles/207298.htmlcrazycrazyThu, 12 Jun 2008 02:15:00 GMThttp://www.blogjava.net/wufalong/articles/207298.html相关文章:  
推荐圈子: GT-Grid
更多相关推荐 DWR 处理各种form表单Select/option,table

util.js包含一些有用的函数function,用于在客户端页面调用.

主要功能如下：

代码

1、$() 获得页面参数值
2、addOptions and removeAllOptions 初始化下拉框
3、addRows and removeAllRows 填充表格
4、getText 取得text属性值
5、getValue 取得form表单值
6、getValues 取得form多个值
7、onReturn
8、selectRange
9、setValue
10、setValues
11、toDescriptiveString
12、useLoadingMessage
13、Submission box

代码

1、$()函数
IE5.0 不支持
$ = document.getElementById
取得form表单值
var name = $("name");

代码

a、如果你想在更新select 时，想保存原来的数据，即在原来的select中添加新的option：
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id,...);
DWRUtil.setValue(id,sel);
demo:比如你想添加一个option：“--请选择--”
DWRUtil.addOptions(id,["--请选择--"]);

DWRUtil.addOptions()有5中方式：

代码

@ Simple Array Example: 简单数组
例如:
Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
DWRUtil.addOptions("demo1",array);

代码

@ Simple Object Array Example 简单数组,元素为beans
这种情况下,你需要指定要显示 beans 的 property 以及 对应的 bean 值
例如:
public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}
DWRUtil.addOptions("demo2",array,'id','name');
其中id指向及bean的id属性，在optiong中对应value，name指向bean的name属性，对应下拉框中显示的哪个值.

代码

@ Advanced Object Array Example 基本同上
DWRUtil.addOptions( "demo3",
[{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'AU' },
{ name:'Europe', id:'EU' }
],'id','name');

代码

@ Map Example 用制定的map来填充 options:
如果 server 返回 Map,呢么这样处理即可：
DWRUtil.addOptions( "demo3",map);
其中 value 对应 map keys，text 对应 map values；

代码

@ <ul> and <ol> list editing

DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素

3、addRows and removeAllRows 填充表格

DWR 提供2个函数来操作 table；

----------------------------

DWRUtil.addRows(); 添加行

----------------------------

DWRUtil.removeAllRows(id); 删除指定id的table

----------------------------

下面着重看一下 addRows() 函数：

DWRUtil.addRows(id, array, cellfuncs, [options]);

其中id 对应 table 的 id(更适合tbodye，推荐使用 tbodye)

array 是server端服务器的返回值，比如list，map等等

cellfuncs 及用返回值来天春表格

[options] 用来设置表格样式，它有2个内部函数来设置单元格样式(rowCreator、cellCreator)。

比如: server端返回list，而list中存放的是下面这个 bean：

代码

public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}

下面用 DWRUtil.addRows();

代码

function userList(data){
//var delButton = "<input type='button'/>";
//var editButton = "<input type='button'/>";
var cellfuncs = [
function(data){return data.id;},
function(data){return data.userName;},
function(data){return data.userTrueName;},
function(data){return data.birthday;},
function(data){
var idd = data.id;
var delButton = document.createElement("<INPUT TYPE='button' onclick='delPerson("+ idd +")'>");
delButton.setAttribute("id","delete");
delButton.setAttribute("value","delete");
return delButton;
},
function(data){
var idd = data.id;
var editButton = document.createElement("<INPUT TYPE='button' onclick='editPerson("+ idd +")'>");
editButton.setAttribute("name","edit");
editButton.setAttribute("value","edit");
return editButton;
}
];
DWRUtil.removeAllRows('tabId');
DWRUtil.addRows('tabId', data,cellfuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
var index = options.rowIndex * 50;
row.setAttribute("id",options.rowData.id);
row.style.collapse = "separate";
row.style.color = "rgb(" + index + ",0,0)";
return row;
},
cellCreator:function(options) {
var td = document.createElement("td");
var index = 255 - (options.rowIndex * 50);
//td.style.backgroundColor = "rgb(" + index + ",255,255)";
td.style.backgroundColor = "menu";
td.style.fontWeight = "bold";
td.style.align = "center";
return td;
}
});
document.getElementById("bt").style.display = "none";
}

4、getText 取得text属性值

DWRUtil.getText(id): 用来获得 option 中的文本

比如：

代码

<select id="select">
<option value="1"> 苹果 </option>
<option value="2" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
</select>

调用 DWRUtil.getText("select"); 将返回 "香蕉" 字段；

DWRUtil.getText(id)；仅仅是用来获得 select 文本值，其他不适用。

5、DWRUtil.getValue(id): 用来获得 form 表单值

有如下几种情况：

代码

Text area (id="textarea"): DWRUtil.getValue("textarea")将返回 Text area的值;
Selection list (id="select"): DWRUtil.getValue("select") 将返回 Selection list 的值;
Text input (id="text"): DWRUtil.getValue("text") 将返回 Text input 的值;
Password input (id="password"): DWRUtil.getValue("text") 将返回 Password input 的值;
Form button (id="formbutton"): DWRUtil.getValue("formbutton") 将返回 Form button 的值;
Fancy button (id="button"): DWRUtil.getValue("formbutton") 将返回 Fancy button 的值;

6、getValues 取得form多个值

批量获得页面表单的值,组合成数组的形式,返回 name/value;

例如: form():

代码

<input type="textarea" id="textarea" value="1111"/>
<input type="text" id="text" value="2222"/>
<input type="password" id= "password" value="3333"/>
<select id="select">
<option value="1"> 苹果 </option>
<option value="4444" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
</select>
<input type="button" id="button" value="5555"/>

那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null})
将返回 ^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}

7、DWRUtil.onReturn 防止当在文本框中输入后，直接按回车就提交表单。

<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)"/>

<input type="button" onclick="submitFunction()"/>

8、DWRUtil.selectRange(ele, start, end);

在一个input box里选一个范围

代码

DWRUtil.selectRange("sel-test", $("start").value, $("end").value);

比如:<input type="text" id="sel-test" value="012345678901234567890">

DWRUtil.selectRange("sel-test", 2, 15);

9、DWRUtil.setValue(id,value);

为指定的id元素,设置一个新值;

10、DWRUtil.setValues({

name: "fzfx88",

password: "1234567890"

}

); 同上,批量更新表单值.

/***********************************************************************/

11、DWRUtil.toDescriptiveString()

带debug信息的toString，第一个为将要debug的对象，第二个参数为处理等级。等级如下：

0: Single line of debug 单行调试

1: Multi-line debug that does not dig into child objects 不分析子元素的多行调试

2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二层子元素的多行调试

<input type="text" id="text">

DWRUtil。toDescriptiveString("text",0);

/******************************************************************************/

12、DWRUtil.useLoadingMessage();

当发出ajax请求后,页面显示的提示等待信息;

代码

function searchUser(){
var loadinfo = "loading....."
try{
regUser.queryAllUser(userList);
DWRUtil.useLoadingMessage(loadinfo);
}catch(e){

}
}

crazy 2008-06-12 10:15 发表评论
]]>编辑的单元格http://www.blogjava.net/wufalong/articles/206060.htmlcrazycrazyThu, 05 Jun 2008 07:21:00 GMThttp://www.blogjava.net/wufalong/articles/206060.htmlhttp://www.blogjava.net/wufalong/comments/206060.htmlhttp://www.blogjava.net/wufalong/articles/206060.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/206060.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/206060.html<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript">
<!--
var inputItem; // 输入框句柄
var g_activeItem; // 保存正在编辑的单元格
function changeToText(obj)
{
 if( obj && inputItem )
 {
  // 如果存在正在编辑的单元格， 则取消编辑状态， 并将编辑的数据保存起来
  var str = " ";
  if(inputItem.value != "")
  {
   str = inputItem.value;
  }
  obj.innerText = str;  
 }
}

function changeToEdit(obj)
{
 if( !inputItem )
 {
  inputItem = document.createElement('input');
  inputItem.type = 'text';
  inputItem.style.width = '100%';
  inputItem.style.height = '18px';
  inputItem.style.fontSize = '12px';
 }
 inputItem.style.display = '';
 inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上
 obj.innerHTML = ''; // 清空单元格的数据
 obj.appendChild(inputItem);
 inputItem.focus();
 g_activeItem = obj;
}

document.attachEvent('ondblclick',function()
{
 if (event.srcElement.tagName.toLowerCase() == "td")
 {
  if( !inputItem )
  {
   inputItem = document.createElement('input');
   inputItem.type = 'text';
   inputItem.style.width = '100%';
   inputItem.style.height = '18px';
   inputItem.style.fontSize = '12px';
  }
  changeToText()
  changeToEdit(event.srcElement);
 } else
 {
  event.returnValue = false;
  return false; 
 }
});

document.attachEvent('onclick', function()
{
 if( event.srcElement.parentNode == g_activeItem || event.srcElement == g_activeItem )
 {
  return;
 } else
 {
  changeToText(g_activeItem);
 }
});
//-->
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 24px}
-->
</style>
</head>
<body>
<table border="0" width="100%" id="table1">
 <tr>
  <td colspan="5" align="center" valign="middle"><span class="STYLE1">Test　　　　　</span></td>
  </tr>
 <tr>
  <td width="130">　</td>
  <td width="130">　</td>
  <td width="130">　</td>
  <td width="130">　</td>
  <td width="130">　</td>
 </tr>
</table>
</body></html>



crazy 2008-06-05 15:21 发表评论
]]>js cookiehttp://www.blogjava.net/wufalong/articles/189001.htmlcrazycrazyThu, 27 Mar 2008 06:37:00 GMThttp://www.blogjava.net/wufalong/articles/189001.htmlhttp://www.blogjava.net/wufalong/comments/189001.htmlhttp://www.blogjava.net/wufalong/articles/189001.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/189001.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/189001.htmlfunction writeCookie(name, value, expires)
{
 var expire = "";
 if(expires != null)
 {
  expire = new Date((new Date()).getTime() + expires * 3600000);
  expire = "; expires=" + expire.toGMTString();
 }
 document.cookie = name + "=" + escape(value) + expire;
}

function readCookie(name)
{
 var cookieValue = "";
 var search = name + "=";
 if(document.cookie.length > 0)
 {
  offset = document.cookie.indexOf(search);
  if (offset != -1)
  {
   offset += search.length;
   end = document.cookie.indexOf(";", offset);
   if (end == -1) end = document.cookie.length;
   cookieValue = unescape(document.cookie.substring(offset, end))
  }
 }
 return cookieValue;
}



crazy 2008-03-27 14:37 发表评论
]]>prototypehttp://www.blogjava.net/wufalong/articles/169495.htmlcrazycrazyFri, 21 Dec 2007 18:56:00 GMThttp://www.blogjava.net/wufalong/articles/169495.htmlhttp://www.blogjava.net/wufalong/comments/169495.htmlhttp://www.blogjava.net/wufalong/articles/169495.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/169495.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/169495.html 在 Javascript 中， object 就是一个 associative array 。一个 function 就是一个类。当你编写如下 function 时，其实就是定义了一个类，该 function 就是它的构造函数。

function MyObject(name, size)

       {

              this.name = name;

              this.size = size;

       }

之后，你可以方便的通过 MyObject 类的 prototype 属性来方便的扩充它。比如，你可以给他添加其他的属性和方法。

       MyObject.prototype.tellSize = function()

       {

              return "size of "+this.name+" is "+this.size;

       }

      

       MyObject.prototype.color = "red";

       MyObject.prototype.tellColor = function()

       {

              return "color of "+this.name+" is "+this.color;

       }

      

       var myobj1 = new MyObject("tiddles", "7.5 meters");

       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

你可以想象，当你调用 tellColor() 方法后，结果是这样的：

color of tiddles is red

很方便的是， prototype 属性可以动态添加。比如，你需要往 MyObject 中加入一个 height 属性，并希望其提供一个 tellHeight() 方法来获得 height 属性的值。你可以在上面的代码后，继续添加如下的代码：

       MyObject.prototype.height = "2.26 meters";

       MyObject.prototype.tellHeight = function()

       {

              return "height of "+this.name+" is "+this.height;

       }

之后，你可以访问一下 myobj1 的 tellHeight() 方法，你可以得到如下的结果：

height of tiddles is 2.26 meters

prototype 的这些动态的特性看起来有些迷人，不过我倒是反而觉得有些凉飕飕的。确实，这些特性给你很大的灵活性，可以给与你 runtime 改变类属性和方法的能力。不过，稍微发掘一下，会有些不良的习惯产生。

首先，如果可以动态添加属性和方法，那么很容易让人想到，当我调用时，我想要调用的属性或者方法存在不？这是一个很严肃的问题，如果当我们调用时根本没有该属性或者方法，将可能导致我们的脚本 down 掉。

不过也有解决办法。比如，在上面的代码中，当还没有 tellHeight() 方法时，我们可以如下编写代码避免发生错误：

       if (myobj1.tellHeight)

       {

              domDiv.innerHTML += myobj1.tellHeight()+"<br /><br />";

       }

注意，一定要在 if 语句中，不要加方法后面的那对 () ，否则，直接就 down 掉了。有兴趣的读者可以打印一下，看看分别访问 myobj1.tellHeight 和 myobj1.tellHeight() 时有什么区别。

也许，你觉得这个是小意思。加个判断嘛，不就好了？

对，但是下面一个问题更令人头痛。

属性和方法在不在的问题简单，可是属性和方法变不变化的问题可就严重了。在不在我们可以检测，变不变呢？比如，请看下面的代码：

       function MyObject(name, size)

       {

              this.name = name;

              this.size = size;

       }

      

       MyObject.prototype.color = "red";

       MyObject.prototype.tellColor = function()

       {

              return "color of "+this.name+" is "+this.color;

       }

      

       var myobj1 = new MyObject("tiddles", "7.5 meters");

       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

      

       MyObject.prototype.color = "green";

      

       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

该代码将产生如下结果：

color of tiddles is red
color of tiddles is green

请注意，你修改的是类 MyObject 的 color 属性。但是你惊奇的看到你之前实例化的对象 myobj1 的属性值竟然也变化了。天！如果你的项目代码是多人合作，那么，也许某个人会在编程时为了图一己之便，擅自修改你的类。于是，所有人的对象都变化了。于是，你们陷入了漫长的 debug 过程中。。。。。。（不要说我没有告诉你啊）

上面是属性，还有方法：

       function MyObject(name, size)

       {

              this.name = name;

              this.size = size;

       }

      

       MyObject.prototype.color = "red";

       MyObject.prototype.tellColor = function()

       {

              return "color of "+this.name+" is "+this.color;

       }

      

       var myobj1 = new MyObject("tiddles", "7.5 meters");

       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

      

       MyObject.prototype.color = "green";

       MyObject.prototype.tellColor = function()

       {

              return "your color of "+this.name+" is "+this.color;

       }

      

       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";

这段代码的结果是：

color of tiddles is red
your color of tiddles is green

哈？原来方法也能变，汗！

问题来了。 Javascript 太灵活的编程方式多少让人不适应。如果整个 Team 的水平都比较高还可以，没人会犯这样的错误。但是，当有个毛头小伙子不知情，擅自修改类，将导致所有的人的对象都发生变化，无论是属性还是方法。在 Javascript 代码变得越来越多的 Ajax 时代，这是一个严重的问题。



crazy 2007-12-22 02:56 发表评论
]]>拉动操作http://www.blogjava.net/wufalong/articles/169444.htmlcrazycrazyFri, 21 Dec 2007 12:54:00 GMThttp://www.blogjava.net/wufalong/articles/169444.htmlhttp://www.blogjava.net/wufalong/comments/169444.htmlhttp://www.blogjava.net/wufalong/articles/169444.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/169444.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/169444.html
<script>

var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;
var displayway = false;

function show(){
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY+"\nscrollleft+x:"+document.body.scrollTop+event.x);
}

function catchFlyBar(e){
 var obj = getSelectorObj('test');
 var objaaa = getSelectorObj('screenFront');
 screenChange(objaaa);
 objaaa.style.visibility="visible";
 bIsCatchFlyBar = true;
 var x=event.x+document.body.scrollLeft;
 var y=event.y+document.body.scrollTop;
 dragClickX=x-obj.offsetLeft;
 dragClickY=y-obj.offsetTop;
 obj.setCapture();
 document.onmousemove  = onmousemove1;
 document.onmouseup  = onmouseup1;
}

function getSelectorObj(name){
 var obj;
 if (document.layers){
  obj = document.layers[name];
    }
    else if (document.all){
  obj = document.all[name];
    }
    else if (document.getElementById){
        obj = document.getElementById(name);
    }
 return obj;
}

function onmouseup1(){
 var obj = getSelectorObj('test');
 var objaaa = getSelectorObj('screenFront');
 screenChange(objaaa);
 objaaa.style.visibility="hidden";
 bIsCatchFlyBar = false;
 obj.releaseCapture();
}

function onmousemove1(){
 if(bIsCatchFlyBar){
  var obj = getSelectorObj('test');
   obj.style.left = event.x+document.body.scrollLeft-dragClickX; 
   obj.style.top = event.y+document.body.scrollTop-dragClickY;
 }
}

function screenChange(obj)
{
 obj.style.left=0;
 obj.style.top=0;
 obj.style.height=document.body.scrollHeight;
 obj.style.width=document.body.scrollWidth;
}
</script>
<div id="screenFront"  style="position:absolute;visibility:hidden;width:100%;height:100%;background: #000000;filter:alpha(opacity=50)"></div><div  id="test" style="position:absolute;left:100;top:100">
<table border=1 cellpadding=15 cellspacing=15 >
<tr><td>
<table><tr style="cursor:move"  nowrap onMouseDown="catchFlyBar()"><td>Click here to show. </td></tr></table>
</div>
</td></tr>
</table>

 



crazy 2007-12-21 20:54 发表评论
]]>event.x,event.clientX,event.offsetXhttp://www.blogjava.net/wufalong/articles/169425.htmlcrazycrazyFri, 21 Dec 2007 11:04:00 GMThttp://www.blogjava.net/wufalong/articles/169425.htmlhttp://www.blogjava.net/wufalong/comments/169425.htmlhttp://www.blogjava.net/wufalong/articles/169425.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/169425.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/169425.htmlx:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。
<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show. 
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY);
}
</script>



crazy 2007-12-21 19:04 发表评论
]]>js获取对象的绝对坐标http://www.blogjava.net/wufalong/articles/169274.htmlcrazycrazyFri, 21 Dec 2007 04:31:00 GMThttp://www.blogjava.net/wufalong/articles/169274.htmlhttp://www.blogjava.net/wufalong/comments/169274.htmlhttp://www.blogjava.net/wufalong/articles/169274.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/169274.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/169274.htmlfunction   getAbsPoint(e)  
{  
    var   x   =   e.offsetLeft,   y   =   e.offsetTop;  
    while(e=e.offsetParent)
    {
       x   +=   e.offsetLeft;  
       y   +=   e.offsetTop;
    }
    alert("x:"+x+","+"y:"+y);  
}

方法2：

function   getAbsPoint(obj)  
{  
   var   x,y;  
   oRect   =   obj.getBoundingClientRect();  
x=oRect.left  
y=oRect.top  
alert("("+x+","+y+")")  
}

JS中获得窗口属性的方法

1。获得屏幕的分辨率：
screen.width
screen.height

2。获得窗口大小：
document.body.clientWidth
document.body.clientHeight

3。获得窗口大小（包含Border、Scroll等元素）
document.body.offsetWidth
document.body.offsetHeight  



crazy 2007-12-21 12:31 发表评论
]]>javascript的eval 和 replace用法http://www.blogjava.net/wufalong/articles/144067.htmlcrazycrazyMon, 10 Sep 2007 10:36:00 GMThttp://www.blogjava.net/wufalong/articles/144067.htmlhttp://www.blogjava.net/wufalong/comments/144067.htmlhttp://www.blogjava.net/wufalong/articles/144067.html#Feedback0http://www.blogjava.net/wufalong/comments/commentRss/144067.htmlhttp://www.blogjava.net/wufalong/services/trackbacks/144067.html  1 function highlightDiamondIcon(objtemp)
  2 {    
  3    var obj = objtemp + '_arrw';
  4    alert(eval(obj).src);
  5    eval(obj).src = eval(obj).src.replace('_on','_off');
  6    alert(eval(obj).src);
  7 }
  8
 9 IMG id=wire_prof_img 
 10     onmouseover="this.src=this.src.replace('_off','_on');" 
 11     onmouseout="this.src=this.src.replace('_on','_off');" onclick="highlightDiamondIcon('wire_prof_img');" 

crazy 2007-09-10 18:36 发表评论
]]>