站点浏览代码提示不显示

Question

我使用的代码最初是为早期版本的jquery编写的，我认为我已经正确地更新了它，但没有显示...我需要它与1.8.3一起工作

我设置了一个小提琴作为prob，这样可以更容易地看到它的实际效果：fiddle

这就是原始代码的来源：Tour code

有什么想法吗？

下面是jquery：

$(function() {
            /*
            the json config obj.
            name: the class given to the element where you want the tooltip to appear
            bgcolor: the background color of the tooltip
            color: the color of the tooltip text
            text: the text inside the tooltip
            time: if automatic tour, then this is the time in ms for this step
            position: the position of the tip. Possible values are
                TL  top left
                TR  top right
                BL  bottom left
                BR  bottom right
                LT  left top
                LB  left bottom
                RT  right top
                RB  right bottom
                T   top
                R   right
                B   bottom
                L   left
             */
            var config = [
                {
                    "name"      : "tut10",
                    "bgcolor"   : "black",
                    "color"     : "white",
                    "position"  : "TL",
                    "text"      : "You can create a tour to explain the functioning of your app",
                    "time"      : 5000
                },
                {
                    "name"      : "tut20",
                    "bgcolor"   : "black",
                    "color"     : "white",
                    "text"      : "Give a class to the points of your walkthrough",
                    "position"  : "BL",
                    "time"      : 5000
                }

            ],
            //define if steps should change automatically
            autoplay    = false,
            //timeout for the step
            showtime,
            //current step of the tour
            step        = 0,
            //total number of steps
            total_steps = config.length;

            //show the tour controls
            showControls();

            /*
            we can restart or stop the tour,
            and also navigate through the steps
             */
            $('#activatetour').live('click',startTour);
            $('#canceltour').live('click',endTour);
            $('#endtour').live('click',endTour);
            $('#restarttour').live('click',restartTour);
            $('#nextstep').live('click',nextStep);
            $('#prevstep').live('click',prevStep);

            function startTour(){
                $('#activatetour').remove();
                $('#endtour,#restarttour').show();
                if(!autoplay && total_steps > 1)
                    $('#nextstep').show();
                showOverlay();
                nextStep();
            }

            function nextStep(){
                if(!autoplay){
                    if(step > 0)
                        $('#prevstep').show();
                    else
                        $('#prevstep').hide();
                    if(step == total_steps-1)
                        $('#nextstep').hide();
                    else
                        $('#nextstep').show();  
                }   
                if(step >= total_steps){
                    //if last step then end tour
                    endTour();
                    return false;
                }
                ++step;
                showTooltip();
            }

            function prevStep(){
                if(!autoplay){
                    if(step > 2)
                        $('#prevstep').show();
                    else
                        $('#prevstep').hide();
                    if(step == total_steps)
                        $('#nextstep').show();
                }       
                if(step <= 1)
                    return false;
                --step;
                showTooltip();
            }

            function endTour(){
                step = 0;
                if(autoplay) clearTimeout(showtime);
                removeTooltip();
                hideControls();
                hideOverlay();
            }

            function restartTour(){
                step = 0;
                if(autoplay) clearTimeout(showtime);
                nextStep();
            }

            function showTooltip(){
                //remove current tooltip
                removeTooltip();

                var step_config     = config[step-1];
                var $elem           = $('.' + step_config.name);

                if(autoplay)
                    showtime    = setTimeout(nextStep,step_config.time);

                var bgcolor         = step_config.bgcolor;
                var color           = step_config.color;

                var $tooltip = $('',{
                    id : 'tour_tooltip',
                    class : 'tooltip',
                    html : '+step_config.text+'
                    }).css({
                    'display' : 'none',
                    'background-color' : bgcolor,
                    'color' : color
                });

                //position the tooltip correctly:

                //the css properties the tooltip should have
                var properties      = {};

                var tip_position    = step_config.position;

                //append the tooltip but hide it
                $('BODY').prepend($tooltip);

                //get some info of the element
                var e_w             = $elem.outerWidth();
                var e_h             = $elem.outerHeight();
                var e_l             = $elem.offset().left;
                var e_t             = $elem.offset().top;


                switch(tip_position){
                    case 'TL'   :
                        properties = {
                            'left'  : e_l,
                            'top'   : e_t + e_h + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_TL');
                        break;
                    case 'TR'   :
                        properties = {
                            'left'  : e_l + e_w - $tooltip.width() + 'px',
                            'top'   : e_t + e_h + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_TR');
                        break;
                    case 'BL'   :
                        properties = {
                            'left'  : e_l + 'px',
                            'top'   : e_t - $tooltip.height() + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_BL');
                        break;
                    case 'BR'   :
                        properties = {
                            'left'  : e_l + e_w - $tooltip.width() + 'px',
                            'top'   : e_t - $tooltip.height() + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_BR');
                        break;
                    case 'LT'   :
                        properties = {
                            'left'  : e_l + e_w + 'px',
                            'top'   : e_t + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_LT');
                        break;
                    case 'LB'   :
                        properties = {
                            'left'  : e_l + e_w + 'px',
                            'top'   : e_t + e_h - $tooltip.height() + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_LB');
                        break;
                    case 'RT'   :
                        properties = {
                            'left'  : e_l - $tooltip.width() + 'px',
                            'top'   : e_t + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_RT');
                        break;
                    case 'RB'   :
                        properties = {
                            'left'  : e_l - $tooltip.width() + 'px',
                            'top'   : e_t + e_h - $tooltip.height() + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_RB');
                        break;
                    case 'T'    :
                        properties = {
                            'left'  : e_l + e_w/2 - $tooltip.width()/2 + 'px',
                            'top'   : e_t + e_h + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_T');
                        break;
                    case 'R'    :
                        properties = {
                            'left'  : e_l - $tooltip.width() + 'px',
                            'top'   : e_t + e_h/2 - $tooltip.height()/2 + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_R');
                        break;
                    case 'B'    :
                        properties = {
                            'left'  : e_l + e_w/2 - $tooltip.width()/2 + 'px',
                            'top'   : e_t - $tooltip.height() + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_B');
                        break;
                    case 'L'    :
                        properties = {
                            'left'  : e_l + e_w  + 'px',
                            'top'   : e_t + e_h/2 - $tooltip.height()/2 + 'px'
                        };
                        $tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_L');
                        break;
                }


                /*
                if the element is not in the viewport
                we scroll to it before displaying the tooltip
                 */
                var w_t = $(window).scrollTop();
                var w_b = $(window).scrollTop() + $(window).height();
                //get the boundaries of the element + tooltip
                var b_t = parseFloat(properties.top,10);

                if(e_t < b_t)
                    b_t = e_t;

                var b_b = parseFloat(properties.top,10) + $tooltip.height();
                if((e_t + e_h) > b_b)
                    b_b = e_t + e_h;


                if((b_t < w_t || b_t > w_b) || (b_b < w_t || b_b > w_b)){
                    $('html, body').stop()
                    .animate({scrollTop: b_t}, 500, 'easeInOutExpo', function(){
                        //need to reset the timeout because of the animation delay
                        if(autoplay){
                            clearTimeout(showtime);
                            showtime = setTimeout(nextStep,step_config.time);
                        }
                        //show the new tooltip
                        $tooltip.css(properties).show();
                    });
                }
                else
                //show the new tooltip
                    $tooltip.css(properties).show();
            }

            function removeTooltip(){
                $('#tour_tooltip').remove();
            }

            function showControls(){
                /*
                we can restart or stop the tour,
                and also navigate through the steps
                 */
                var $tourcontrols  = '<div id="tourcontrols" class="tourcontrols">';
                $tourcontrols += '<p>First time here?</p>';
                $tourcontrols += '<span class="button" id="activatetour">Start the tour</span>';
                    if(!autoplay){
                        $tourcontrols += '<div class="nav"><span class="button" id="prevstep" style="display:none;">< Previous</span>';
                        $tourcontrols += '<span class="button" id="nextstep" style="display:none;">Next ></span></div>';
                    }
                    $tourcontrols += '<a id="restarttour" style="display:none;">Restart the tour</span>';
                    $tourcontrols += '<a id="endtour" style="display:none;">End the tour</a>';
                    $tourcontrols += '<span class="close" id="canceltour"></span>';
                $tourcontrols += '</div>';

                $('BODY').prepend($tourcontrols);
                $('#tourcontrols').animate({'right':'30px'},500);
            }

            function hideControls(){
                $('#tourcontrols').remove();
            }

            function showOverlay(){
                var $overlay    = '<div id="tour_overlay" class="overlay"></div>';
                $('BODY').prepend($overlay);
            }

            function hideOverlay(){
                $('#tour_overlay').remove();
            }

        });

Answer 1

From the documentation

从jQuery 1.7开始，不推荐使用.live()方法。使用.on()附加事件处理程序。旧版本jQuery的用户应该优先使用.delegate()而不是.live()。

你的小提琴有一个js错误：

Uncaught TypeError: Object #<Object> has no method 'easeInOutExpo'

对我来说，这表明您忘记了包含某种jQuery Easing plugin。