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 に答える