Слайдер пользовательского интерфейса jQuery с изменяющимся всплывающим окном Bootstrap при событии слайда

У меня проблема с загрузкой и jQueryUI, и я думаю, что это скорее проблема реализации.

Я пытаюсь добавить всплывающее окно начальной загрузки в слайдер jQueryUI, затем в побочном событии для ползунка я пытаюсь изменить текст всплывающего окна.

ниже мой код до сих пор.

<Script type="text/javascript">
    jQuery(function () {
    jQuery("#slider1").slider({
        value: 5,
        min: 0,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            switch(ui.value){
                case 0:
                    jQuery("#slider1").data('popover').options.content = 'new content 0';
                break;
                case 1:
                    jQuery("#slider1").data('popover').options.content = 'new content 1';
                break;
                case 2:
                    jQuery("#slider1").data('popover').options.content = 'new content 2';
                break;
                case 3:
                    jQuery("#slider1").data('popover').options.content = 'new content 3';
                break;
                case 4:
                    jQuery("#slider1").data('popover').options.content = 'new content 4';
                break;
                case 5:
                    jQuery("#slider1").data('popover').options.content = 'new content 5';
                break;
                case 6:
                    jQuery("#slider1").data('popover').options.content = 'new content 6';
                break;
                case 7:
                    jQuery("#slider1").data('popover').options.content = 'new content 7';
                break;
                case 8:
                    jQuery("#slider1").data('popover').options.content = 'new content 8';
                break;
                case 9:
                    jQuery("#slider1").data('popover').options.content = 'new content 9';
                break;
                case 10:
                    jQuery("#slider1").data('popover').options.content = 'new content 10';
                break;
            }
            jQuery("#slider1").find(".ui-slider-handle").text(ui.value);
            jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(ui.value);
        }
    });
    jQuery("#amount1").val("£" + jQuery("#slider1").slider("value"));
});
jQuery(document).ready(function() {
    var value = jQuery("#slider1").slider("option","value");
    jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(value);
    jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 5', content: "It's so simple to create a tooltop for my website!"});
    jQuery("#slider1").popover('show');
    jQuery("#slider1").find(".ui-slider-handle").text(value); 
});

So basically what the code above does, is set up a slider from 0 to 10 with an increment of 1, then i set a label on the slider handle to display the current ui value, and change that on the slide event. The problem that i am having is that the bootstrap is not changing when the slider is moved

Всплывающее окно начальной загрузки инициализируется и показывает, когда страница загружается с правильными значениями, при отладке JS выполняется нажатие оператора switch и передается значение, просто кажется, что он не меняет текст bs.


javascript twitter-bootstrap jquery-ui-slider
person jderonde    schedule 29.11.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ну, всплывающее окно не получает информацию о том, что вы меняете параметры. Попробуйте позвонить setContent:

var popover = jQuery("#slider1").data('popover');
popover.options.content = 'new content 10';
popover.setContent();
person Adrian Heine    schedule 29.11.2012
comment
Это кажется немного более элегантным, чем мое решение. - person jderonde; 30.11.2012

arrow_upward
0
arrow_downward

Итак, я работаю над этим с момента публикации вопроса, и я действительно нашел исправление.

Итак, внутри переключателя я добавил

                   case 0:
                       jQuery("#slider1").popover('destroy');
                       jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 0', content: "It's so simple to create a tooltop for my website!", animation: false});
                       jQuery("#slider1").popover('show');
                   break;

Затем я сделал то же самое для 0–10, также сделав анимацию ложной, как только значение изменится, всплывающее окно исчезнет, ​​что именно то, что я хотел.

Единственная небольшая проблема, которая у меня есть, заключается в том, что когда всплывающее окно загружается на странице инициализации, всплывающее окно появляется немного выше, чем должно, затем, когда ползунок перемещается, всплывающее окно немного опускается, но я уверен, что я могу играть с ним и заставить его появляться в том же месте.

Надеюсь, это поможет любому с такой же проблемой

Здоровья Джо.

person jderonde    schedule 30.11.2012