0

一个初学者的问题。我在一个隐藏的 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();
4

2 回答 2

3

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

例如

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

更多信息在这里

于 2012-08-27T07:11:14.740 回答
1

使用 YUI 你可以很容易地做到这一点。只需获取内容和标题，创建一个面板并使其可拖动：

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

});
于 2012-08-27T14:52:02.840 回答