简体   繁体   English

需要帮助以使javascript / html滑块正常工作

[英]Need help getting a javascript/html slider to work

I am trying to get the below html code to work and can't figure it out. 我正在尝试使以下html代码正常工作,并且无法弄清楚。 I do not think the domready event is being fired and can't figure out why. 我不认为domready事件已被解雇,也无法弄清原因。

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.slider {
    background: #CCC;
    height: 16px;
    width: 200px;
}

    .slider .knob {
        background: #000;
        width: 16px;
        height: 16px;
    }

​</style>
    <script type="text/javascript">

window.addEvent('domready', function(){

    var slider = $('slider');

    new Slider(slider, slider.getElement('.knob'), {
        range: [0, 100],
        initialStep: 100, steps: 11, wheel: true,
        onChange: function(value){
alert(value);
        }
    });
});

    </script>
  </head>
<body>

<div id="slider" class="slider">
    <div class="knob"></div>
</div>

</body>
</html>

I just want to have a slider on my webpage and can't use html 5 because of browser restrictions. 我只想在网页上放一个滑块,由于浏览器的限制不能使用html 5。 What is the simplest slider I can use to do this? 我可以使用的最简单的滑块是什么?

First problem that I see is in the var slider = $('slider'); 我看到的第一个问题是在var slider = $('slider'); statement. 声明。

You need to change it to var slider = $('#slider'); 您需要将其更改为var slider = $('#slider'); or var slider = $('.slider'); var slider = $('.slider'); depends on if you want to access it via ID or CLASS name. 取决于您是否要通过ID或CLASS名称访问它。

You can also use http://nivo.dev7studios.com/ as a slider which is a good jQuery plugin that I've been using. 您也可以将http://nivo.dev7studios.com/用作滑块,这是我一直在使用的一个不错的jQuery插件。

Rather than using window.addEvent(); 而不是使用window.addEvent(); , why not use ,为什么不使用

$(function(){
    // your code here.
});

That uses jQuery's on ready event, so you can be sure it will fire on document ready 它使用jQuery的on ready事件,因此您可以确定它会在文档就绪时触发

And as stated by Odinn above, you are using $('slider'), which means that jquery is looking for an element that is . 就像上面的Odinn所述,您正在使用$('slider'),这意味着jquery正在寻找的元素是。 you need to specifiy if you are searching for an ID $('#slider') or by class $('.slider'); 如果要搜索ID $('#slider')或按类$('.slider');则需要指定$('.slider');

Other than that, i would keep your console open to look for any errors and post those. 除此之外,我会让您的控制台保持打开状态以查找任何错误并将其发布。 Hope that helps. 希望能有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM