使jQuery UI Slider值作为链接工作

时间:2013-12-26 12:04:30

标签: javascript jquery user-interface hyperlink slider

如何使jQuery滑块值作为链接工作。就像有人滚动到例如1920年一样,它会将它们重定向到另一个页面。

我已将代码插入小提琴:http://jsfiddle.net/up6Bx/

希望你能帮助我。

提前致谢。

HTML:

<div id="slider-range-max"></div>

jquery的:

$(function() {
    var araObj = new Array( 1900, 1920, 1960, 1975, 1976 );

    $("#slider-range-max").slider({
            min: 0,
            max: araObj.length,
            value: 0,
            create: function() {

                for (i=0;i<=araObj.length;i++)
                {
                    $(this).append($('<span></span>').css("left",((i+0.85)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
                };
            }
        });

    console.log(araObj);
});

1 个答案:

答案 0 :(得分:1)

试试这个

$(function() {
    var araObj = new Array( 1900, 1920, 1960, 1975, 1976 );

    $("#slider-range-max").slider({
            min: 0,
            max: araObj.length,
            value: 0,
            create: function() {

                for (i=0;i<=araObj.length;i++)
                {
                    $(this).append($('<span></span>').css("left",((i+0.85)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
                };
            },
        change: function(event, ui) { 
             var val=ui.value;
         if(val == 1)
         {
         window.location.href='http://www.amazon.com';    //same tab
         }
         else if(val == 2)
         {
         window.open('http://www.yahoo.com');//new tab
         }   
          } 
        });

    console.log(araObj);
});

DEMO