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

sqlfm · #1

不好意思：我只认识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>
<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 · #2

没加时候：

juanzhewudi · #3

加了后
不过javascript还是在工作的。。。也就是menu区域宽度可以调节吧。。两种情况下都是可以调节的。。。

anticlockwise · #4

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

代码：全选

document.getElementById("page").style.height = h+'px';

上面这句，ID为page的元素你的HTML页面里都没有啊～～

sqlfm · #5

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

我是纯粹想把我的工作全部转移到 ubuntu 来。MySQL Client是我最后一个。google了半天，也没有满意的。想自已编译一个的。
我不懂javascript,少懂html/sql的。现在是骑虎难下。上面的javascript化了我一星期才google到的。
谢谢您的帮助。

juanzhewudi · #6

不好意思，因为一直喜欢看缩进了的代码，昨天看你的看的不爽就只是把效果图贴给了你。现在给你详细说一下吧，权当道歉：
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>
<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 · #7

晕，原来是论坛排版把缩进去掉了，误会 ${L_SMILIES_EMARRASSED}$ ${L_SMILIES_EMARRASSED}$

sqlfm · #8

谢谢拉。

您试图把下面一行删了。网页会不一样的。因为有下面一行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";

juanzhewudi · #9

不好意思，忘记把调试语句去掉了 ${L_SMILIES_EMARRASSED}$ 我英语不好，又爱看好莱坞电影，就学会这这两句，晕。。
这是document.body.clientHeight在firefox上的一个bug了。。
见：
http://www.quirksmode.org/js/doctypes.html

juanzhewudi · #10

哈哈，原来取字符串中一段的方法是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";
效果一样，呵呵，不用正则表达式

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

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

加了后：