Подсказка YUI не отображается в верхней части панели - PullRequest
Новая
       29

Подсказка YUI не отображается в верхней части панели

0 голосов
/ 01 марта 2011

В настоящее время возникла проблема при попытке отобразить всплывающие подсказки YUI в верхней части панели YUI после того, как показано, что они были созданы ранее.Проблема в том, что Panel не может быть зарегистрирована в оверлейном менеджере, потому что для этого потребуется изменить TON кода и протестировать его, что продлит жесткий срок.Единственный способ заставить до заставить это работать - это настроить всплывающие подсказки после , когда отображается панель.Проблема заключается в количестве изменений кода, которые необходимо выполнить, чтобы присоединить другой вызов функции.Моя проблема в том, что я надеялся, что смогу использовать обработку событий для использования "showEvent", но я не могу заставить его работать (извиняюсь за количество слов): 

var panel_obj = new YAHOO.widget.Panel('someID', {
    width: "700px",
    height: "500px",
    close: true,
    draggable: false,
    modal: true,
    constraintoviewport: true,
    visible: false,
    fixedcenter: true 
});
panel_obj.render();

var tooltip_name = 'newTooltip1';
var element_id = 'htmlElementIDToBecomeTooltip';

function createTooltip() {
    window[tooltip_name] = new YAHOO.widget.Tooltip(tooltip_name, {
        context: element_id,
        xyoffset: [15, -15],
        zIndex: 999
    });
}

function successfulScenario() {
    panel_obj.show();
    createTooltip();
}

function failedScenario1() {
    YAHOO.util.Event.addListener(
        'someID',
        "showEvent",
        createTooltip
    );
}

function failedScenario2() {
    createTooltip();
    panel_obj.show();
}

Единственный способ, которым я имеюпохоже, он работает, запустив что-то вроде successfulScenario().Я пришел из jQuery, поэтому я все еще изучаю YUI.Я хотел бы иметь возможность просто расширять (подкласс) функцию YAHOO.widget.Panel show(), чтобы вызывать createTooltip, но я не такой уж гуру, или мне, возможно, потребуется изменить очень большую кодовую базу, чтобы сделать это.

Ответы [ 3 ]

2 голосов
/ 01 марта 2011

попробуйте использовать свойство «container» для конфигурации всплывающей подсказки (чтобы контейнер был элементом панели): 

function createTooltip() {
    window[tooltip_name] = new YAHOO.widget.Tooltip(tooltip_name, {
        container: panel_obj.element,
        context: element_id,
        xyoffset: [15, -15]
    });
}

Это быстрое решение с использованием события show и / или расширения классабыло бы неплохо, но надо бежать, если вам все еще нужна помощь, я проверю еще раз (также проверим пример, который я сделал с вашим кодом http://jsfiddle.net/3GWaM/2/).

0 голосов
/ 01 марта 2011 
function getPanelIDFromElementID (element_id) {
    var parent_panel = YAHOO.util.Dom.getAncestorByClassName(element_id, 'yui-panel');
    var parent_id = null;
    if (parent_panel) {
        parent_id = parent_panel.id;
    }
    return parent_id;
}
function createTooltips() {
    var tooltip_elements = YAHOO.util.Dom.getElementsByClassName('tooltip');

    for (var i = 0; i < tooltip_elements.length; i++) {
        var ele_id = tooltip_elements[i].getAttribute('id');
        var name = ele_id.charAt(0).toLowerCase() + ele_id.slice(1);
        var nameArray = name.split("_");

        for (var x=1; x < nameArray.length; x++) {
            nameArray[x] = nameArray[x].charAt(0).toUpperCase() + nameArray[x].slice(1);
        }

        var elementName = nameArray.join('');

        window[elementName] = new YAHOO.widget.Tooltip(elementName, {
            context: escape(ele_id),
            xyoffset: [15, -15],
            zIndex: 999,
            container: getPanelIDFromElementID(ele_id)
        });
    }
}
0 голосов
/ 01 марта 2011 
function createTooltip() {
    var tooltipEl = document.createElement('DIV');
    panel_obj.get('element').appendChild(tooltipEl);
    window[tooltip_name] = new YAHOO.widget.Tooltip(tooltipEl, {
        context: element_id,
        xyoffset: [15, -15],
        zIndex: 999
    });
}

Это обеспечит то, что div подсказки инструмента создается внутри диалогового окна, а не в теле документа, гарантируя, что он не появится под диалоговым окном.

Кроме того, если вы хотите расширить класс панели, просто сделайте следующее 

function MyPanel(el, config) {
   MyPanel.superclass.constructor.apply(this, arguments);
   this.createToolTip();
}

YAHOO.lang.extend(MyPanel, YAHOO.widget.Panel , {
   createToolTip: function () {
       // create tool tip here
       this.on('show', this.showTooltip, this, true);
   },
   showToolTip: function () {this.toolTip.show();}
});
...