JQuery Qtip наследование - PullRequest
       7

JQuery Qtip наследование

0 голосов
/ 28 июля 2011

Я использовал плагин jQuery Qtip для создания некоторых всплывающих подсказок, используя следующий код:

$('*[title]').each(function() {
        //if ($(this).attr('title') != "") {
        $(this).qtip({
            content: $(this).attr('title'),
            position: {
                target: 'mouse',
                adjust: {
                    screen: true,
                    x: 5,
                    y: 15
                },
                corner: {
                    target: 'rightMiddle',
                    tooltip: 'leftMiddle'
                }
            },
            style: {
                fontSize: 11,
                padding: '2px 6px',
                textAlign: 'left',
                lineHeight: 1.5,
                fontWeight: 'bold',
                color: '#444',
                border: {
                    width: 1,
                    radius: 2
                },
                name: 'cream'
            }
        })
           .attr('title', '');
        // }
    });


    $('span.help').each(function () {
        $(this).qtip({
            /*content: {
            text: $(this).html()
            },*/
            content: $(this).attr('title'),
            position: {
                adjust: {
                    screen: false,
                    x: 0,
                    y: 0
                },
                corner: {
                    target: 'topRight',
                    tooltip: 'bottomRight'
                }
            },
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                title: { 'font-size': 11, padding: '6px 6px', lineHeight: 1.5 },
                fontSize: 11,
                padding: '6px 6px',
                textAlign: 'left',
                lineHeight: 1.5,
                fontWeight: '600',
                border: {
                    width: 3,
                    radius: 3
                },
                tip: 'bottomRight',
                name: 'cream'
            }
        })
   .attr('title', '');
    });

В основном все элементы с заголовком имеют всплывающую подсказку, НО я хочу, чтобы элементы с классом help имели специальную подсказку. Что происходит, я получаю ДВА подсказки для элемента справки. Можно ли полностью переопределить первый со вторым?

Возможно, используя какое-то выражение if, чтобы сначала проверить, что это НЕ класс справки, если нет, то выполнить первую функцию, а если так, то выполнить вторую функцию.

Спасибо

Ответы [ 3 ]

1 голос
/ 29 июля 2011

Вы пытались просто добавить предложение: not () к своему первому выбору, чтобы исключить диапазоны помощи?:

 $('*[title]:not(span.help)').each(function() {
0 голосов
/ 28 июля 2011

У вас может быть селектор типа $("[title], .help"), который выбирает все элементы, которые вы хотите дать всплывающей подсказке. Затем внутри каждой анонимной функции используйте $(this).hasClass("help"), чтобы определить, какую подсказку вы хотите передать этому элементу.

0 голосов
/ 28 июля 2011

РЕДАКТИРОВАТЬ:

var title = $(this).attr('title'),
    help = $(this).attr('class'),
    isHelp = undefined;

if(help !== undefined){
    var isHelp = help.search('help');
}


if(title !== undefined){


    if((title.length !== 0)&&((isHelp == -1)||(isHelp == undefined))){

        alert('do title tiptool function');

    }

}

Пример: http://jsfiddle.net/ZqLH6/6/

...