1

ブートストラップと jQueryUI に問題があります。これは実装の問題だと思います。

ブートストラップ ポップオーバーを jQueryUI Slider に追加しようとしています。次に、スライダーのサイド イベントで、ポップオーバーのテキストを変更しようとしています。

以下はこれまでの私のコードです。

<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); 
});

基本的に上記のコードは、0 から 10 まで 1 ずつ増加するスライダーを設定し、スライダー ハンドルにラベルを設定して現在の UI 値を表示し、スライド イベントでそれを変更します。私が抱えている問題は、スライダーを動かしてもブートストラップが変わらないことです

ブートストラップ ポップオーバーが初期化され、JS のデバッグ時に正しい値でページが読み込まれたときに表示されます。switch ステートメントがヒットし、値が渡されています。

4

2 に答える 2

0

まあ、ポップオーバーはあなたがオプションを変更したことを知らされません。電話してみてくださいsetContent：

var popover = jQuery("#slider1").data('popover');
popover.options.content = 'new content 10';
popover.setContent();
于 2012-11-29T20:55:25.593 に答える
0

わかりましたので、質問を投稿してからこれに取り組んでおり、実際に修正を見つけました

だから私が追加したスイッチ文の中に

                   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;

次に、値が変更されるとすぐに、アニメーションを false にすることによって、0 - 10 に対して同じことを行いました。これはまさに私が望んでいたものです。

私が持っている唯一のわずかな問題は、ポップオーバーがページ初期化にロードされると、ポップオーバーが本来あるべき場所のわずかに上に表示され、次にスライダーを動かすとポップオーバーが少し下がることですが、私はそれをいじることができると確信しています同じ場所に表示されます。

これが同じ問題を抱えている人に役立つことを願っています

乾杯ジョー。

于 2012-11-30T09:06:28.730 に答える