3

このスライダーはどのように機能しますか？

http://jqueryui.com/demos/slider

与えられたソースは何も表示されません

<style>
    #demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>
<div class="demo">
    <div id="slider"></div>
</div><!-- End demo -->

これを追加する前にjqueryを含めました

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

しかし、それは私に与えます

SCRIPT438：オブジェクトはプロパティまたはメソッド「スライダー」をサポートしていません

エラー。

これはコード全体がどのように見えるかです

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <style>
            #demo-frame > div.demo { padding: 10px !important; }
        </style>

        <div class="demo">
            <div id="slider"></div>
        </div><!-- End demo -->

        <script>
        $(function() {
            $( "#slider" ).slider();
            });
        </script>
    </body>
</html>

私は何が欠けていますか？

4

3 に答える 3

2

これを追加する前にjqueryを含めました

jQueryを含めましたが、uiプラグインを参照せずにjQuery uiプラグインメソッドを使用しています。 そのため、そのメソッドはjavascriptには不明です。.slider()
slider

jQueryライブラリの後に参照を追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

アップデート：

あまりにも多くの時間を費やした後、私はあなたの問題を見つけました、あなたはJQuery ui cssを逃​​しています：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

JSFiddleデモ

于 2012-02-05T23:31:36.920 に答える
1

スライダーにはjQueryUIを使用する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>

于 2012-02-05T23:29:08.107 に答える
1

これはjQueryUIスライダーであるため、jQueryの後に含める必要のあるjQueryUIがありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
于 2012-02-05T23:29:47.397 に答える