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

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>
...全文
141 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]})')

        }
FAST FWR310 无线固件包
源码直接下载地址： https://pan.quark.cn/s/a4b39357ea24 【FAST FWR310 无线路由更新程序】是一个专门为FAST FWR310型号无线路由设备设计的固件升级方案，其主要目的在于改善设备的工作表现、纠正已知的系统缺陷或引入全新的操作特性。对无线路由器进行固件更新，实质上是指替换或升级其核心操作系统（即固件），从而使其运行状态得到进一步优化。 在无线路由器的持续使用阶段，用户有时会遭遇若干操作难题，例如网络连接的频繁中断、数据传输速率不高、无线信号覆盖范围有限等情况。针对此类挑战，通过安装新的固件（即刷机包），能够有效应对上述问题，因为新固件或许已经针对这些普遍存在的问题进行了优化处理。不仅如此，固件升级还能开启一些隐藏的功能选项，或者兼容第三方固件，例如OpenWRT，从而让用户能够进行更深入的系统自定义配置及管理。 FWR310 V5.0升级软件20160301是该刷机包的明确版本标识，显示出这是针对FAST FWR310路由器推出的第五代固件，并且发布日期为2016年3月1日。此版本的更新内容可能涵盖以下几个方面： 1. 运行效能的调优：借助于对路由器处理流程与内存分配的改善，能够加快数据交换速率，减少响应时间，从而全面提升网络的工作效能。 2. 安全防护的强化：更新内容中可能融入了对新兴网络安全风险的防御机制，用以保障用户的资料安全。 3. 互操作性的扩展：可能增强了与更多设备及协议的适配能力，比如最新的无线通信标准或设备连接模式。 4. 运行稳定性的提升：修复了可能引发路由器系统崩溃或意外重启的已知故障，延长了设备的稳定运行周期。 5. 新特性集成：或许增添了提升用户体验的功能，例如远程操作控制、家长监管功能、服务质...
Install_Win11_Win10_10080_DMAROFF_08252026.zip
Realtek PCIe GbE Family Controller 网卡驱动
【2026年华为杯B题】​ 氢燃料电池低温冷启动建模与控制策略研究（思路、代码、论文，持续更新）
内容概要：本文围绕基于混沌系统与DNA编码的彩色图像加密解密体系展开研究，旨在解决传统图像加密算法密钥空间小、抗干扰能力弱等问题。通过结合混沌系统的伪随机性与DNA编码的高维组合特性，构建了多层级、高复杂度的加密框架，实现了对彩色图像RGB三通道的混淆与扩散操作。研究重点包括加密算法的设计与实现、密钥敏感性分析以及抗噪声和抗裁剪性能的系统性测试。实验结果表明，该算法在面对高斯噪声、椒盐噪声及不同面积、位置的图像裁剪攻击时，仍能较好地恢复图像主体结构与核心信息，展现出优良的鲁棒性和实用性。文章还总结了当前研究的不足，并对未来优化方向进行了展望。; 适合人群：具备一定信息安全、图像处理或密码学基础知识的科研人员、研究生及工程技术人员。; 使用场景及目标：①用于高安全性需求下的图像传输与存储场景，如军事通信、医疗影像保护等；②为复合型图像加密技术的研究提供理论支持与实验依据，推动加密算法向高鲁棒性、强抗攻击能力方向发展； 阅读建议：建议读者结合文中提供的理论基础与实验分析，深入理解混沌与DNA编码的融合机制，并可通过复现实验进一步掌握算法细节与性能边界，重点关注抗干扰测试部分以评估其在实际应用中的可靠性。
如何提升高校科研院所科技成果转化效率？.docx
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
引导槽.prt_UG四五轴CNC编程练习图档.rar
引导槽.prt_UG四五轴CNC编程练习图档.rar
JavaScript

87,984

社区成员

224,681

社区内容

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

加载中

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

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

+ 用AI写文章