用脚本实现循环的问题，急啊

abcdefg171459 2009-10-29 09:11:55
下面这段代码是生成了一个panel,现在我想用个for循环生成20个panel,每个用panel1,panel2,panel3,....panel19,panel20等命名，其中的layout也同理，该怎么写？能给出代码最好了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Layout inside a resizable Panel</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}

#demo .yui-resize-handle-br {
height: 11px;
width: 11px;
background-position: -20px -60px;
background-color: transparent;
}
.yui-layout-unit-top div div{
background-color:#ff0000;
}
.yui-layout-unit-center div div {
background-color:#85f285;
}

</style>
<link rel="stylesheet" type="text/css" href="yui_2.8.0r4/yui/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="yui_2.8.0r4/yui/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="yui_2.8.0r4/yui/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="yui_2.8.0r4/yui/build/layout/assets/skins/sam/layout.css" />
<link rel="stylesheet" type="text/css" href="yui_2.8.0r4/yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="yui_2.8.0r4/yui/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/event/event-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/dom/dom-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/container/container-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/resize/resize-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/animation/animation-min.js"></script>
<script type="text/javascript" src="yui_2.8.0r4/yui/build/layout/layout-min.js"></script>
</head>
<body class=" yui-skin-sam">

<div id="demo"></div>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
layout = null,
resize = null;

Event.onDOMReady(function() {
for (var i=1;i<=10;i++) {
<p>i</p><br>
}
var panel = new YAHOO.widget.Panel('demo', {
draggable: false,
close: false,
autofillheight: null, // default value, specified here to highlight its use in the example
underlay: 'none',
width: '100px',
height: '300px',
xy: [100, 100]
});

panel.setBody('<div id="layout"></div>');
panel.renderEvent.subscribe(function() {
Event.onAvailable('layout', function() {
layout = new YAHOO.widget.Layout('layout', {
height: 300,
width: 100,
units: [
{ position: 'top', height: 50, resize: true, body: '', gutter: '2', minHeight: 50, maxHeight:200 },
{ position: 'center', body: '', gutter: '2' }
]
});

layout.render();
});
});
panel.render();

});
})();

</script>
</body>
</html>
...全文
103 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
hitlcyu19 2009-10-29
  • 打赏
  • 举报
 回复
+i
James__Zhan 2009-10-29
  • 打赏
  • 举报
 回复
Fixing Bug!




<script>



(function() {

    var Dom = YAHOO.util.Dom,

        Event = YAHOO.util.Event,

		t = null;      



    Event.onDOMReady(function() {	

		for(var i = 0; i < 20; i++){

			createPanel(i);

		}	

    });

	

	function createPanel(id){

		

		var div = document.createElement('div');

		div.id = 'demo' + id;

		document.body.appendChild(div);

				

		var panel = new YAHOO.widget.Panel('demo' + id, {

			draggable: true,

			close: false,

			autofillheight: "body",        

			underlay: 'none',

			width: '300px',

			height: '400px',

			xy: [100, 100 + 500 * id + 10]

		});

				

		var bid = 'layout_' + id;

		var layout = null;

				

		panel.setHeader('Test Panel');

		panel.setBody('<div id="' + bid + '"></div>');

		panel.renderEvent.subscribe(function() {					

			Event.onAvailable(bid, function() {				

				layout = new YAHOO.widget.Layout(this.id, {

					height: (panel.body.offsetHeight - 20),                   

					height:360,

					units: [					

						{ position: 'top', height: 50, resize: true, body: 'Top', gutter: '2', minHeight: 50, maxHeight:340 },                   

						{ position: 'center', body: 'Bottom', gutter: '2' }                      

					]

				});	

				layout.render();

			});

		});

		panel.render();

	}



})();







</script>
wh51622 2009-10-29
  • 打赏
  • 举报
 回复
呵呵，正好学习一下。
James__Zhan 2009-10-29
  • 打赏
  • 举报
 回复
兄弟，发贴就对了。


(function() {

    var Dom = YAHOO.util.Dom,

        Event = YAHOO.util.Event,

        layout = null,

        resize = null;



    Event.onDOMReady(function() {	

		for(var i = 0; i < 20; i++){

			var div = document.createElement('div');

			div.id = 'demo' + i;

			document.body.appendChild(div);

			

			var panel = new YAHOO.widget.Panel('demo' + i, {

				draggable: true,

				close: false,

				autofillheight: "body", // default value, specified here to highlight its use in the example            

				underlay: 'none',

				width: '300px',

				height: '400px',

				xy: [100, 100 + 500 * i]

			});

			

			var id = 'layout' + i;

			

			panel.setHeader('Test Panel');

			panel.setBody('<div id="' + id + '"></div>');

			panel.renderEvent.subscribe(function() {

				Event.onAvailable(id, function() {

					layout = new YAHOO.widget.Layout(id, {

						height: (panel.body.offsetHeight - 20),                   

						height:360,

						units: [					

							{ position: 'top', height: 50, resize: true, body: 'Top', gutter: '2', minHeight: 50, maxHeight:340 },                   

							{ position: 'center', body: 'Bottom', gutter: '2' }                      

						]

					});

	

					layout.render();

				});

			});

			panel.render();

		}

		

    });

})();
money8899 2009-10-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 phoenix2121 的回复:]
用数组来做.

panel[1] panel[2] ...



[/Quote]
s
李子做IT 2009-10-29
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 beenz 的回复:]
显示不完..

for(var i=0;i <20;i++){
            eval('var panel'+i+' = new YAHOO.widget.Panel(\"demo\", {draggable: false, close: false,autofillheight: null, // default value, specified here to highlight its use in the exampleunderlay: \"none\",width: \"100px\",height: \"300px\",xy: [100, 100]})')
            eval('panel.setBody(\" <div id=\"layout'+i+'\"> </div>\")');
        }
[/Quote]

学习了.
李子做IT 2009-10-29
  • 打赏
  • 举报
 回复
用数组来做.

panel[1] panel[2] ...


BeenZ 2009-10-29
  • 打赏
  • 举报
 回复
显示不完..

for(var i=0;i<20;i++){
eval('var panel'+i+' = new YAHOO.widget.Panel(\"demo\", {draggable: false, close: false,autofillheight: null, // default value, specified here to highlight its use in the exampleunderlay: \"none\",width: \"100px\",height: \"300px\",xy: [100, 100]})')
eval('panel.setBody(\" <div id=\"layout'+i+'\"> </div>\")');
}
BeenZ 2009-10-29
  • 打赏
  • 举报
 回复 


for(var i=0;i<20;i++){

            eval('var panel'+i+' = new YAHOO.widget.Panel(\"demo\", {draggable: false, close: false,autofillheight: null, // default value, specified here to highlight its use in the exampleunderlay: \"none\",width: \"100px\",height: \"300px\",xy: [100, 100]})')

        }
LinuxShell脚本编程深入
脚本实战编程思路、企业环境脚本架构及解决思路，掌握解决问题及开发脚本解决问题的方法，最重要的是学到了技术要拿出来用，而不是简单的学个技术，一定要实用，能够自己写脚本。独立写出有质量的脚本！
[AHK]一键运行/关闭脚本的循环
;Toggle: Press once to activate, press again to turn it off #maxThreadsPerHotkey, 2 setKeyDelay, 50, 50 setMouseDelay, 50 banana:=0 $f1:: ; banana:=!banana .... This assigns banana to the value o
matlab里脚本循环语句,Matlab中while循环语句的用
Matlab 中while循环语句的用法？matlab while循环的用法。while循环的使用与for循环是类似的。但是其中还是有不少的区别，例如对于循环次数而言，...while 表达式 用来实现循环1是判断表达式 1显然永远为真 即是永远...
python循环语句输出10_10. Python脚本学习笔记十循环语句
10. Python脚本学习笔记十循环语句本篇名言：“走不完的...”上节学习了IF循环，我们来看下PYTHON下如何来实现循环。1. WHILE循环x=1while x<=100:print xx+=1上面代码实现了循环100次输出1-100的值。2. FOR循环...
10. Python脚本学习笔记十循环语句
10. Python脚本学习笔记十循环语句 本篇名言：“走不完的前程停一停从容出步，急不来的心事想一想暂且丢开，干... 上节学习了IF循环，我们来看下PYTHON下如何来实现循环。 1. WHILE循环 x=1 while x  print x  x+=1
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章