2012-02-05 7 views
3

このスライダはどのように機能しますか?与えられたjQueryスライダが不明です

http://jqueryui.com/demos/slider

ソースは、私はこの

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

を追加する前にjQueryを含まなかった

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

何も現れませんが、それは

SCRIPT438私に与えます:オブジェクトが」doesnのサポートプロパティまたはメソッド 'スライダー'

エラーです。

これは、全体のコードは、私が何をしないのです

<!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> 

次のようになりますか?

+0

私は私の更新の答えをチェックアウトし、あなたの問題を発見しました。 – gdoron

答えて

2

私はあなたがjQueryのを含んでいた...しかし、あなたは、UIプラグインを参照せずjQuery uiプラグインMETHOD- .slider()を使用しているこの

を追加する前にjQueryを含みませんでした。
だから方法sliderはJavaScriptに不明で、

後の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 DEMO

+0

何らかの理由でまだ動作していません... http://im.imgur.com/WkCNs.png – Nitin

+0

@ Sparky672(あなたの今削除されたコメントに返信してください)大丈夫です...これは私が思ったよりも複雑です。 http://jqueryui.com/demos/slider/には私がイメージが必要なところはありませんでした。「jQuery UI SliderプラグインはjQuery UI CSS Frameworkを使用して、色や背景のテクスチャなどのスタイルを設定します。余分な画像が必要な場合は、どこで入手できますか?それとも私は自分で作る必要がありますか? – Nitin

+0

@ニチン、私は最後のコメントを削除しました。あなたがイメージ/コンテンツスライダを作ろうと思っていたからです。それは用語の重複であり、それは私の間違いです。無視。 @ニチン。 – Sparky

1

スライダにjQuery UIを使用する必要があります。

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

+0

... facepalm x_x – Nitin

+2

彼の2番目の問題は何だったのか知らせてくれたと思っていました。彼はjuqery ui ** css **を逃していました。 – gdoron

+0

ええ、それはいつも最も簡単なことではありません!あなたの答えは+1! – Anil

1

それはjQueryのUIスライダーですので、あなたはjQueryの後に含める必要がのjQuery UIが欠落しています。

<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> 
+0

そのURLは有効です[試してください](http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js) – gdoron

+0

@gdoron:それを得ました。それは技術的に有効です。私はスキームを離れることはありませんが、それは私だけです。 – Sparky

関連する問題