1

（首先，免责声明：我是 JavaScript / MooTools 新手，所以解决方案很可能是微不足道的失误）

在一些帮助下，我能够使用 MooTools 在 jsFiddle 上放置一个简单的滑块以正常运行。它在这里-> http://jsfiddle.net/wowenkho/uGcTx/

现在，我想在我自己的电脑上重现它。我从这里的一些线程中了解到我必须包装 jsFiddle 代码。在 Aptana 中，我有这样的代码：

<html>
    <head>
            <script type="text/javascript" src="mootools_v1_2.js"></script>

            <script type="text/javascript">
                $(function()
                {
                    window.addEvent('domready',function()
                    {
                        var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
                        {
                            onChange : function(step)
                            {
                                document.id("q1_r1").set('value',step);
                                document.id("value").set('html',step);
                            }           
                        });


                        window.onresize = function () {
                            //s.recalculate();
                        };

                    });
                });
        </script>
    </head>
    <body>
        <input name="q1_r1" id="q1_r1" type="hidden">

        <span id="value">0</span>

        <p ><div class="slider" id="slider-1" tabIndex="1">
            <input class="slider-input" id="slider-input-1" />
        </div>
    </body>
</html>

我知道我使用的 MooTools 版本并不完全相同（jsFiddle 使用的是 1.2.5，我使用的是 1.2.1）。我可以尝试在这里使用 1.2.5（我会同时使用），但这不是目的，因为我必须使用 1.2.1。我也知道 MooTools 运行良好，至少在理论上是这样，因为我之前制作了“hello world”并且它运行良好。

目前情况如何，我只看到跨度和一个文本框，而不是滑块。

我想我在这里遗漏了一些微不足道的东西。

提前感谢所有可能的帮助，贾夫

4

1 回答 1

1

您的实现有两个问题，第一个很简单，如果您在控制台中查看您的 domready 函数没有被调用，则将其从 $function 包装器中取出。

                window.addEvent('domready',function()
                {
                    var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
                    {
                        onChange : function(step)
                        {
                            document.id("q1_r1").set('value',step);
                            document.id("value").set('html',step);
                        }           
                    });


                    window.onresize = function () {
                        //s.recalculate();
                    };

                });

第二个是您实际上正在使用 mootools 的插件。如果您查看您的 js fiddle，它会说使用 mootools more 1.2.5.1。在 more 部分中，您可以找到滑块类。如果您没有，则未定义滑块。因此，请确保在下载所有插件所需的核心 mootools 时，还选中更多和滑块框。在 mootools 网站上，当您转到 1.2.5 下载核心时，转到更多构建器，您可以添加它们。

于 2012-04-19T16:44:30.937 回答