Question

初学者的问题。我在隐藏的div中有一些丰富的HTML，并希望将其转换为浮动，可拖动，可关闭的伪窗口，无模式对话框。 YUI和ExtJS可用。

我已经尝试了几个小时，并在网上寻找样本。窗口标题也应该从DOM节点获得，但是是纯文本。

    var helpDiv = ... DOM node
    var helpDivExt = Ext.get(helpDiv);
    var contentHTML = '<i>helpDivExt</i>';
    //var contentTitel = '###' + helpDivExt.select('h3');
    var contentTitel = '###' + Ext.query('h3:first', helpDivExt).data;
    var w = new Ext.Window({html: contentHTML, title: contentTitel,
        width: '398px', height: '400px',
        modal: false, closable: true, draggable: true,
        plain: true,
        padding: '5px 10px 10üpx 10px',
        border: '5px solid #7094b7',
        backgroundColor: '#ffffff'
    });
    w.addClass('hilfetext');
    //w.fill(helpDivExt);
    //w.add(helpDivExt);
    w.show();

Answer 1

在ExtJS Ext.Window中，有contentEl个配置，您可以在其中放入现有的HTML元素，或现有HTML元素的ID：

e.g。

new Ext.Window({contentEl: 'the_element_id'});

Further info here

Answer 2

使用YUI，您可以轻松完成。只需获取内容和标题，创建一个Panel并使其可拖动：

YUI().use('panel', 'dd-plugin', function (Y) {

  var panel = new Y.Panel({
    headerContent: Y.one('#panel-title').getData('title'),
    bodyContent: Y.one('#hidden').getHTML()
  });
  panel.render();

  panel.plug(Y.Plugin.Drag, {
    // set the handle to the header node so that the panel
    // can only be dragged from the header
    handles: ['.yui3-widget-hd']
  });

});

使用YUI或Ext JS将隐藏的DIV转换为窗口

2 个答案: