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

下面这段代码是生成了一个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>

解决方案 »

  1.   


    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]})')
            }
      

  2.   

    显示不完..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>\")');
            }
      

  3.   

    用数组来做.panel[1] panel[2] ...
      

  4.   

    兄弟，发贴就对了。(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();
    }

        });
    })();
      

  5.   

    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>