Как написать обыкновенную функцию jquery для отображения всплывающей подсказки

Question

Как написать обыкновенную функцию jquery для отображения всплывающей подсказки

0

Я использую плагин jQuery стиля кода, чтобы показать всплывающую подсказку всплывающего окна. Вот ссылка: http://www.uhleeka.com/blog/2009/11/bubbletip/

Я написал этот jquery, чтобы отобразить всплывающую подсказку ballon на клике элемента.

Это то, что я делаю это по id, но как это сделать, используя имя класса. Как я могу настроить функцию bubbletip для каждого id, как я могу написать единую (общую) функцию jquery для применения bubbletip.

<script type="text/javascript">
    $(document).ready(function() {
            $('#fee').bubbletip($('#tip1_focusblur'), {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });



            $('#price').bubbletip($('#tip2_focusblur'), {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });

    });
</script>

<p>Input box 1<input type="text" id="fee" value="focus me!" /></p>

<div id="tip1_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

<p>Input box 2<input type="text" id="price" value="focus me!" /></p>

<div id="tip2_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

Редактирование: я нашел soloution: по мнению JofryHS, я пробовал это решение.

Это хорошее решение?

Javascript:

$(document).ready(function() {
    var count = 0;
        $('[data-bubble]').each(function() {    
            count++;
            var data = $(this).attr('data-bubble');
            $(this).parent().append($('<div class="bubble" id="bubble_'+ count+ '">' + data + '</div>'));
            $(this).bubbletip('#bubble_'+count, {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });
        });
});

HTML:

<input type="text"  data-bubble="This is Test text 1"  value="focus me!" />

<input type="text"  data-bubble="This is Test text 2"  value="focus me!" />

Kango 24 сен. 2013, в 07:38

Источник

Теги:

jquery

html

2 ответа

Ещё вопросы

bipen · Answer 1 · 2013-09-24T03-21-00.000Z

одним из способов является создание глобальной функции и вызов ее каждый раз, когда вам это нужно

 function bubbleTip(obj1,obj2){
    $('#'+obj1).bubbletip($('#'+obj2), {
            deltaDirection: 'right',
            bindShow: 'click',
            bindHide: 'blur'
        });
}

и вызовите функцию с аргументами, в которых вы хотите показать всплывающую подсказку.

$(function(){ //shorthand for document.ready
   bubbleTip('fee','tip1_focusblur');
   bubbleTip('price','tip2_focusblur');
});

JofryHS · Answer 2 · 2013-09-24T03-02-00.000Z

Вы можете использовать атрибут HTML data- для автоматического вызова bubbletip.

HTML + Script (UNTESTED):

<script type="text/javascript">
    $(document).ready(function() {
            $('[data-bubble!=""]').each(function() {
                var target = $(this).data('bubble');
                $(this).bubbletip($('#' + target), {
                    deltaDirection: 'right',
                    bindShow: 'click',
                    bindHide: 'blur'
                })
            });
    });
</script>

<p>Input box 1<input type="text" id="fee" data-bubble="tip1_focusblur" value="focus me!" /></p>

<div id="tip1_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

<p>Input box 2<input type="text" id="price" data-bubble="tip2_focusblur" value="focus me!" /></p>

<div id="tip2_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

Пока вы data-bubble фрагмент сценария выше, где-нибудь в вашем теге HTML вы можете поставить data-bubble с целью, и он должен автоматически привязываться к вашему пузырьку.

Аналогичный вопрос: JQuery выбрать все элементы, которые имеют $ jquery.data()

Данные jQuery

Я нашел решение. смотри мое редактирование