Question

YUI().use('node-event-delegate', 'panel', function(Y){

  (function createNewMetadataPanel() {
    console.log('creating');
    var panelContent = Y.Node.create('<div/>').set('id', 'newMetadataPanelContent');
    var widget = Y.Node.create('<div/>').addClass('yui3-widget-bd');
    var form = Y.Node.create('<form/>');
    var set = Y.Node.create('<fieldset/>');

    form.append(set);
    widget.append(form);
    panelContent.append(widget);

    var metaDataName = Y.Node.create('<input type="text"name="metadataName"id="metadataName"placeholder="Please enter a new metadata field">');
    var metaDataValue = Y.Node.create('<input type="text"name="metadataValue"id="metadataValue"placeholder="Please enter a new metadata value">');
    set.append(metaDataName);
    set.append(metaDataValue);

    panel2 = new Y.Panel({
        srcNode      : '#newMetadataPanelContent',
        headerContent: 'Add A New Member',
        width        : 250,
        zIndex       : 5,
        centered     : true,
        modal        : true,
        visible      : false,
        render       : false
  });

  panel2.addButton({
    value:   'Create Member',
    section: Y.WidgetStdMod.FOOTER,
    action : function (e) {
        e.preventDefault();
        addMetaData();
    }
  });
});

当此代码运行时，一旦页面加载，屏幕底部就会出现面板。它甚至没有居中。 render : false不应该阻止它被添加到DOM中，并且visible : false阻止它被显示？

Answer 1

为#newMetadataPanelContent元素提供CSS属性display:none。当您展示面板时，Y.Panel将取消隐藏它。

为什么我的面板渲染才告诉它？

1 个答案: