Блог

Я работаю над веб-приложением и использую jQuery UI с вкладками и аккордеонами и qTip2 (с всплывающими подсказками).

Я пытаюсь создать функцию «справка», которая переключала бы отображение всех видимых всплывающих подсказок — и когда пользователь меняет вкладку или аккордеон, всплывающие подсказки должны обновляться в зависимости от того, какие всплывающие подсказки должны быть видны.

Я создал простой пример js-скрипки, который довольно хорошо иллюстрирует проблему.

http://jsfiddle.net/Z3My2/8/

HTML:

 <div id="mainDiv">
    <div id="mapContainer">
        <div id="simple_map" style="display: inline-block">
            <p title='MapTitle' data-qtip2Enabled>Place map here</p>
        </div>
    </div>
    <button type="button" id="ShowHelp">Show all help messages</button>
    <div id="tabs">
        <ul>
            <li><a href="#queryTab">Search</a>

            </li>
            <li><a href="#parametersTab">Search results</a>

            </li>
        </ul>
        <div id="queryTab">
            <div id='search'>
                <p>Options</p>
                <div id='queryOptions'>
                        <h3>
                        <span id='option1' title='This is option 1' data-qtip2Enabled>Option 1</span>
                    </h3>

                    <div id='option1Div'> <a title="another title" data-qtip2Enabled>Some text</a>

                    </div>
                        <h3>
                        <span id='option2' title='This is option 2' data-qtip2Enabled>Option 2</span>
                    </h3>

                    <div id='option2Div' title="Some Title" style="display: inline-block" data-qtip2Enabled>LaLaLaLALA</div>
                </div>
            </div>
        </div>
        <div id="parametersTab">
            <div id="parametersTabText">Text.
                <br>
                <p title='lorum ipsum' data-qtip2Enabled>More text with tooltip.</p>
            </div>
        </div>
    </div>
    <!-- this div is a pop, and don't actually appear -->
    <div id="errorMessageDialog" title="Warning" hidden>this is not a qtip-title (with tag data-qtip2Enabled)</div>
</div>
 

Javascript:

 $(document).ready(function () {
    $("#tabs").tabs();
    $('#ShowHelp').click(toggleHelp);
    $("#queryOptions").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
    $('[data-qtip2Enabled]').qtip();
});
var helpEnabled = false;

function enableHelp() {
    unbindHelp();
    $("DIV#tabs li").on("click", function () {
        showHelp();
    });
    $("DIV#search span").on("click", function () {
        showHelp();
    });
    helpEnabled = true;
}

function unbindHelp() {
    $("DIV#tabs li").unbind("click");
    $("DIV#search span").unbind("click");
}

function toggleHelp() {
    if (!helpEnabled) showHelp();
    else {
        helpEnabled = false;
        unbindHelp();
        //$('[data-qtip2Enabled]').qtip('destroy');
        $(".qtip-content").hide();
        $('[data-qtip2Enabled]').qtip({
            show: 'mouseenter',
            hide: 'mouseleave',
        });
    }
}

function showHelp() {
    if (!helpEnabled) enableHelp();
    $(".qtip-content").hide();
    $('[data-qtip2Enabled]').each(function () {
        $(this).qtip({
            show: true,
            hide: false,
            events: {
                focus: function (event, api) {
                    api.set('position.adjust.y', -5);
                },
                blur: function (event, api) {
                    api.set('position.adjust.y', 0);
                },
            },
        });
    });
}
 

Любая помощь или указания будут с благодарностью приняты 🙂

Редактировать: обновлен код и скрипка на основе некоторых экспериментов и ответа Ракеша Сингха.

Мне все еще интересно, как не отображать всплывающие подсказки, которые должны быть скрыты — все всплывающие подсказки отображаются сейчас, но они обновляются в нужных местах при изменении пользовательского интерфейса.

Просто поместите

 $("DIV#tabs li").on("click",function(){
    showHelp();
});
 

в функции jquery ready.

я надеюсь, что это поможет.

Я решил остальную часть своей проблемы, и это было довольно простое решение, поэтому я отмечаю ответ Ракеша как принятый, поскольку он мне очень помог в решении этой проблемы

Решение отфильтровать, какие всплывающие подсказки показывать или нет, заключалось в добавлении простого if-предложения:

 $('#tabs [data-qtip2Enabled]').each(function() {
    if ($(this).is(':visible')) {
        $(this).qtip({
            show : true,
            hide : false,
            events : {
                focus : function(event, api) {
                    api.set('position.adjust.y', -5);
                },
                blur : function(event, api) {
                    api.set('position.adjust.y', 0);
                },
            },
        });
    }
});
 

И привяжите это (с помощью hide()) к изменению $ («DIV #tabs li») и $ («DIV #tabs h3»)