在获取我的第一个 jquery 小部件时遇到问题

发布于 2024-12-17 10:55:21 字数 1665 浏览 0 评论 0原文

我想使用以下滑块 http://jqueryui.com/demos/slider/#range 我希望将所有文件保存在本地，以便可以离线工作。现在我想做的就是获得一个演示页面，除了这个滑块之外什么都不显示。我相信我的挣扎是：我需要下载/包含哪些 js、css 文件？一旦我得到了第一个，我就应该开始跑步了。

感谢您的帮助。

编辑：

所以我下载了代码，将我的 html 文件放在其余文件夹所在的目录中，但我什么也没得到。需要特别说明的是。我有一个文件夹，其中包含 HTML 文件、css、development-bundle 和 js 文件夹。这是我的代码：该脚本是从 jquery 演示中获取的。我确信我让这件事变得比它需要的更复杂。谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css">
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>
</head>

<body>

<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

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

</div>

</body>
</html>

原文

I want to use the following slider
http://jqueryui.com/demos/slider/#range
I want to have all of the files local so I can work offline.
Right now all I'm trying to do is get a demo page that displays nothing but this slider.
I believe my struggle is: which js, css files do I need to download/include? Once I get this first one under my belt I should be off and running.

Thanks for the help.

edit:

So I downloaded the code, put my html file in the directory the rest of the folders are in and I get nothing. To be extra clear. I have a folder with my HTML file, css, development-bundle and js folder in it. Here's my code: The script was grabbed from the jquery demo. I'm sure I'm making this WAYYYY more complicated than it needs to be. Thanks.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css">
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>
</head>

<body>

<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

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

</div>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

茶底世界 2024-12-24 10:55:21

script 标签中的 JavaScript 在 body 标签中的 html 之前执行，因此 jQuery 无法解析这些选择器。尝试在执行 JS 之前等待 DOM 加载。

$(document).ready(function(){
    //  $( "#slider-range" ) ...
    // $( "#amount" )...
});

Fwiw，对于像这样的小项目，我几乎总是从这个文档就绪函数中的警报（“测试”）或console.log（“测试”）开始。这是一种快速、简单的方法来判断您的库是否正在加载以及您的 JS 从一开始就正确执行。

The JavaScript in your script tag is executing before the html in your body tag, so jQuery can't resolve those selectors. Try waiting for the DOM to load before executing your JS.

$(document).ready(function(){
    //  $( "#slider-range" ) ...
    // $( "#amount" )...
});

Fwiw, for small projects like this I almost always start with an alert("test") or console.log("test") inside this document ready function. It's a quick and easy way to tell if your libraries are loading and your JS is executing properly from the start.

回复收藏 0 原文

~没有更多了~