找javascript高手--不好意思 [将就可以用了:谢谢]

为当前最终发行版之前的所有版本提供支持
回复
sqlfm
帖子: 356
注册时间: 2007-02-15 6:26
送出感谢: 0
接收感谢: 1 次

找javascript高手--不好意思 [将就可以用了:谢谢]

#1

帖子 sqlfm » 2007-03-15 17:13

不好意思:我只认识ubuntu forum。所以就贴在此:

说明:这个script是用来resize grid/frame的

问题1:

当我加了这行:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

javascript 的function grid_init()就不工作了。

问题2:
我想pass一个id到function grid_newX2(XXX)怎么做?

顺便问:javascript的function name() 跟 function name 有什么不同?
为什么我要在下面的function 里加XXX,才工作?


以下是网页html吗:
-------------------------------------
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>MySQL SIDU - Free MySQL Client for ubuntu</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script language='javascript' type='text/javascript'>
window.onresize=grid_init;
window.onload=grid_init;
var startposX, diffposX=0, stop=false;
function grid(id){
document.getElementById(id).onmousedown = grid_oldX;
document.onmouseup = grid_move;
if(id=="frmenu") document.onmousemove = grid_newX;
else document.onmousemove = grid_newX2(id);
grid_init();
}
function grid_move(){stop=false; return false;}
function grid_init(){
var h = document.body.clientHeight - 20;
document.getElementById("menu").style.height = h+'px';
}
function grid_oldX(XXX){
startposX = (!document.all ? XXX.screenX : event.clientX) + diffposX;
stop = true; return false;
}
function grid_newX(XXX){if (stop){
diffposX = startposX-(!document.all ? XXX.screenX : event.clientX);
document.getElementById("menu").style.width = 200 - diffposX + "px";
}}
function grid_newX2(XXX){if (stop){
//this is same as function grid_newX
//except that I'd like to pass in an ID
//eg. if id = data1sp then ID = data1
//eg. if id = data2sp then ID = data2 ...
diffposX = startposX-(!document.all ? XXX.screenX : event.clientX);
document.getElementById(ID).style.width = 200 - diffposX + "px";
}}

</script>
<style>
.box {height:100px; background:#ccc; width:200px; float:left;}
.grid {cursor:e-resize; width:20px; height:50px; border:solid 1px #0ff; float:left;}
</style>
</head>
<body>
<div id='menu' class='box'>this is menu</div><!--menu-->
<div id="frmenu" class='grid' onmouseover="grid('frmenu')"></div>

<div id='data1' class='box'>this is data1</div><!--data1-->
<div id="data1sp" class='grid' onmouseover="grid('data1sp')"></div>
<div id='data2' class='box'>this is data2</div><!--data2-->
<div id="data2sp" class='grid' onmouseover="grid('data2sp')"></div>
<div id='data3' class='box'>this is data3</div><!--data3-->

</body>
</html>
上次由 sqlfm 在 2007-03-16 12:49,总共编辑 3 次。
头像
juanzhewudi
帖子: 1114
注册时间: 2006-01-19 11:55
来自: HUST
送出感谢: 0
接收感谢: 0
联系:

#2

帖子 juanzhewudi » 2007-03-15 18:15

没加时候:
附件
1.png
没加时候
头像
juanzhewudi
帖子: 1114
注册时间: 2006-01-19 11:55
来自: HUST
送出感谢: 0
接收感谢: 0
联系:

加了后:

#3

帖子 juanzhewudi » 2007-03-15 18:16

加了后
不过javascript还是在工作的。。。也就是menu区域宽度可以调节吧。。两种情况下都是可以调节的。。。
附件
2.png
头像
anticlockwise
帖子: 2393
注册时间: 2007-03-01 20:46
来自: 湖南长沙
送出感谢: 0
接收感谢: 0
联系:

#4

帖子 anticlockwise » 2007-03-15 19:35

首先说说你这个程序想用来做什么吧~~
我所看到的Javascript只是给HTML提供了大小调整的功能~~

代码: 全选

document.getElementById("page").style.height = h+'px';
上面这句,ID为page的元素你的HTML页面里都没有啊~~
sqlfm
帖子: 356
注册时间: 2007-02-15 6:26
送出感谢: 0
接收感谢: 1 次

#5

帖子 sqlfm » 2007-03-16 6:33

我把昨天的HTML改得简单一点。您再帮我看看吧。
我是昨天到w3school临时学了一点javascript的。

我是纯粹想把我的工作全部转移到 ubuntu 来。MySQL Client是我最后一个。google了半天,也没有满意的。想自已编译一个的。
我不懂javascript,少懂html/sql的。现在是骑虎难下。上面的javascript化了我一星期才google到的。
谢谢您的帮助。
2007:琉璃地,旃檀林。心心作。念念是。
头像
juanzhewudi
帖子: 1114
注册时间: 2006-01-19 11:55
来自: HUST
送出感谢: 0
接收感谢: 0
联系:

#6

帖子 juanzhewudi » 2007-03-16 11:15

不好意思,因为一直喜欢看缩进了的代码,昨天看你的看的不爽就只是把效果图贴给了你。现在给你详细说一下吧,权当道歉:
1,if(id=="frmenu")
document.onmousemove = grid_newX;
else
document.onmousemove = grid_newX2(id);
注意,在js代码里面书写事件调用和在html元素内嵌入书写事件调用不同,在js代码里面被调用函数只需要把函数名传递进去,它不接受参数,因此改成:
document.onmousemove = grid_newX2;
这样你的gride_newX2就可以接受事件了

2,XXX的意义:
js在ie和firefox下对event处理不同。
firefox需要显式写一个参数当做event,而ie这是默认使用event这个名字。
所以,在里面XXX代表了在firefox中可以解析的event,所以就有了这一句:
diffposX = startposX-(!document.all ? XXX.screenX : event.clientX);
在firefox下读取XXX.screenX,在ie下读取event.clientX

3,这也就是说XXX很有用,比如可以XXX.target获取事件源(当然,ie和firefox下这个操作也不同)

4,你所说的第一个问题(加如头部定义的那个问题)不存在

5,按照你所期望的功能,我把修改后的代码贴上:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>MySQL SIDU - Free MySQL Client for ubuntu</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script language='javascript' type='text/javascript'>
window.onresize=grid_init;
window.onload=grid_init;
var startposX, diffposX=0, stop=false;
//用个临时全局变量来保存你的id吧
var tmp_id=null;
function grid(id){
document.getElementById(id).onmousedown = grid_oldX;
document.onmouseup = grid_move;
if(id=="frmenu")
document.onmousemove = grid_newX;
else
//document.onmousemove = grid_newX2(id);这里出错了
document.onmousemove=grid_newX2,tmp_id=id;
grid_init();
}
function grid_move(){
stop=false;
return false;
}
function grid_init(){
var h = document.body.clientHeight - 20;
document.getElementById("menu").style.height = h+'px';
}
function grid_oldX(XXX){
startposX = (!document.all ? XXX.screenX : event.clientX) + diffposX;
stop = true;
return false;
}
function grid_newX(XXX){
if (stop){
diffposX = startposX-(!document.all ? XXX.screenX : event.clientX);
document.getElementById("menu").style.width = 200 - diffposX + "px";
}
}
function grid_newX2(XXX){
if (stop){
//this is same as function grid_newX
//except that I'd like to pass in an ID
//eg. if id = data1sp then ID = data1
//eg. if id = data2sp then ID = data2 ...
diffposX = startposX-(!document.all ? XXX.screenX : event.clientX);
if(!document.all){
//这个解决方法很笨,主要是因为我不会正则表达式,你自己看看去吧;
var event_src=document.getElementById(tmp_id);
var foo=event_src.previousSibling.previousSibling;
foo.style.width = 200 - diffposX + "px";
}else{
//for ie的你自己搞定吧,我一向没有兼容ie的雅兴
}
}
}
</script>
<style>
.box {height:100px; background:#ccc; width:200px; float:left;}
.grid {cursor:e-resize; width:20px; height:50px; border:solid 1px #0ff; float:left;}
</style>
</head>
<body>
<div id='menu' class='box'>this is menu</div><!--menu-->
<div id="frmenu" class='grid' onmouseover="grid('frmenu')"></div>

<div id='data1' class='box'>this is data1</div>
<div id="data1sp" class='grid' onmouseover="grid('data1sp')"></div>
<div id='data2' class='box'>this is data2</div>
<div id="data2sp" class='grid' onmouseover="grid('data2sp')"></div>
<div id='data3' class='box'>this is data3</div>

</body>
</html>
上次由 juanzhewudi 在 2007-03-16 12:07,总共编辑 2 次。
头像
juanzhewudi
帖子: 1114
注册时间: 2006-01-19 11:55
来自: HUST
送出感谢: 0
接收感谢: 0
联系:

#7

帖子 juanzhewudi » 2007-03-16 11:16

晕,原来是论坛排版把缩进去掉了,误会 :oops: :oops:
sqlfm
帖子: 356
注册时间: 2007-02-15 6:26
送出感谢: 0
接收感谢: 1 次

#8

帖子 sqlfm » 2007-03-16 12:00

谢谢拉。

您试图把下面一行删了。网页会不一样的。因为有下面一行function grid_init()并无反应的。

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

------------------
window.onresize=grid_init;
window.onload=grid_init;

function grid_init(){
var h = document.body.clientHeight - 20;
document.getElementById("menu").style.height = h+'px';
}

是否这个function 于html DOCTYPE 有冲突的?

--------------------
又:

document.getElementById("menu").style.width = 200 - diffposX + "px";

有什么办法,知道 menu 的 width,而不用 200 -- 这样可以解决屏幕抖动。
我改成如下,死机了。

var w = document.getElementById("menu").style.width;
var ww = w.substr(0,w.length - 2);
document.getElementById("menu").style.width = ww - diffposX + "px";
上次由 sqlfm 在 2007-03-16 12:37,总共编辑 2 次。
头像
juanzhewudi
帖子: 1114
注册时间: 2006-01-19 11:55
来自: HUST
送出感谢: 0
接收感谢: 0
联系:

#9

帖子 juanzhewudi » 2007-03-16 12:21

不好意思,忘记把调试语句去掉了 :oops: 我英语不好,又爱看好莱坞电影,就学会这这两句,晕。。
这是document.body.clientHeight在firefox上的一个bug了。。
见:
http://www.quirksmode.org/js/doctypes.html
头像
juanzhewudi
帖子: 1114
注册时间: 2006-01-19 11:55
来自: HUST
送出感谢: 0
接收感谢: 0
联系:

#10

帖子 juanzhewudi » 2007-03-16 13:11

哈哈,原来取字符串中一段的方法是substr()阿,
看来可以把
var event_src=document.getElementById(tmp_id);
var foo=event_src.previousSibling.previousSibling;
foo.style.width = 200 - diffposX + "px";
改成:
var foo=tmp_id.substr(0,5);
document.getElementById(foo).style.width=200 - diffposX + "px";
效果一样,呵呵,不用正则表达式
回复

回到 “老旧版本支持”