当前时区为 UTC + 8 小时



发表新帖 回复这个主题  [ 10 篇帖子 ] 
作者 内容
1 楼 
 文章标题 : 找javascript高手--不好意思 [将就可以用了:谢谢]
帖子发表于 : 2007-03-15 17:13 

注册: 2007-02-15 6:26
帖子: 356
送出感谢: 0 次
接收感谢: 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><!--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 次

页首
 用户资料  
 
2 楼 
 文章标题 :
帖子发表于 : 2007-03-15 18:15 
头像

注册: 2006-01-19 11:55
帖子: 1114
地址: HUST
送出感谢: 0 次
接收感谢: 0 次
没加时候:


附件:
文件注释: 没加时候
1.png
1.png [ 52.44 KiB | 被浏览 267 次 ]



_________________
http://www.classfoo.org
页首
 用户资料  
 
3 楼 
 文章标题 : 加了后:
帖子发表于 : 2007-03-15 18:16 
头像

注册: 2006-01-19 11:55
帖子: 1114
地址: HUST
送出感谢: 0 次
接收感谢: 0 次
加了后
不过javascript还是在工作的。。。也就是menu区域宽度可以调节吧。。两种情况下都是可以调节的。。。


附件:
2.png
2.png [ 46.05 KiB | 被浏览 263 次 ]



_________________
http://www.classfoo.org
页首
 用户资料  
 
4 楼 
 文章标题 :
帖子发表于 : 2007-03-15 19:35 
头像

注册: 2007-03-01 20:46
帖子: 2393
地址: 湖南长沙
送出感谢: 0 次
接收感谢: 0 次
首先说说你这个程序想用来做什么吧~~
我所看到的Javascript只是给HTML提供了大小调整的功能~~

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


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


页首
 用户资料  
 
5 楼 
 文章标题 :
帖子发表于 : 2007-03-16 6:33 

注册: 2007-02-15 6:26
帖子: 356
送出感谢: 0 次
接收感谢: 1
我把昨天的HTML改得简单一点。您再帮我看看吧。
我是昨天到w3school临时学了一点javascript的。

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


_________________
2007:琉璃地,旃檀林。心心作。念念是。


页首
 用户资料  
 
6 楼 
 文章标题 :
帖子发表于 : 2007-03-16 11:15 
头像

注册: 2006-01-19 11:55
帖子: 1114
地址: HUST
送出感谢: 0 次
接收感谢: 0 次
不好意思,因为一直喜欢看缩进了的代码,昨天看你的看的不爽就只是把效果图贴给了你。现在给你详细说一下吧,权当道歉:
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>


_________________
http://www.classfoo.org


最后由 juanzhewudi 编辑于 2007-03-16 12:07,总共编辑了 2 次

页首
 用户资料  
 
7 楼 
 文章标题 :
帖子发表于 : 2007-03-16 11:16 
头像

注册: 2006-01-19 11:55
帖子: 1114
地址: HUST
送出感谢: 0 次
接收感谢: 0 次
晕,原来是论坛排版把缩进去掉了,误会 :oops: :oops:


_________________
http://www.classfoo.org


页首
 用户资料  
 
8 楼 
 文章标题 :
帖子发表于 : 2007-03-16 12:00 

注册: 2007-02-15 6:26
帖子: 356
送出感谢: 0 次
接收感谢: 1
谢谢拉。

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

页首
 用户资料  
 
9 楼 
 文章标题 :
帖子发表于 : 2007-03-16 12:21 
头像

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


_________________
http://www.classfoo.org


页首
 用户资料  
 
10 楼 
 文章标题 :
帖子发表于 : 2007-03-16 13:11 
头像

注册: 2006-01-19 11:55
帖子: 1114
地址: HUST
送出感谢: 0 次
接收感谢: 0 次
哈哈,原来取字符串中一段的方法是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";
效果一样,呵呵,不用正则表达式


_________________
http://www.classfoo.org


页首
 用户资料  
 
显示帖子 :  排序  
发表新帖 回复这个主题  [ 10 篇帖子 ] 

当前时区为 UTC + 8 小时


在线用户

正在浏览此版面的用户:没有注册用户 和 4 位游客


不能 在这个版面发表主题
不能 在这个版面回复主题
不能 在这个版面编辑帖子
不能 在这个版面删除帖子
不能 在这个版面提交附件

前往 :  
本站点为公益性站点,用于推广开源自由软件,由 DiaHosting VPSBudgetVM VPS 提供服务。
我们认为:软件应可免费取得,软件工具在各种语言环境下皆可使用,且不会有任何功能上的差异;
人们应有定制和修改软件的自由,且方式不受限制,只要他们自认为合适。

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
简体中文语系由 王笑宇 翻译