2012-03-20 29 views
0

jQuery UIスライダがインストールされていますが、コードに表示されません。私は何が間違っているのか分かりません。jQuery UIスライダが表示されない

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Home Page</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery-ui-1.8.18.min.js" type="text/javascript"></script> 
    <script src="/Scripts/modernizr-2.5.3.js" type="text/javascript"></script> 

</head> 
<body> 
    <div class="page"> 
     <section id="main"> 
      <link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript"> 



    $(function() { 
      ... 
      $("#bwvolume").slider({ 
       value: 0, 
       min: 0, 
       max: 2500, 
       step: 100, 
       slide: function (event, ui) { 
        $("#spanbwvolume").val("$" + ui.value); 
       } 
      }); 
      $("#spanbwvolume").val("$" + $("#bwvolume").slider("value")); 
     }); 
    </script> 
    ... 
     <tr class="format"> 
      <td width="150" valign="top" class="tdlabelNoSize">Volumes monochrome:</td> 
      <td> 
       <div id="bwvolume"></div>(<span id="spanbwvolume"></span>) 
      </td> 
     </tr> 

    ... 
</body> 
</html> 

ブラウザにはスペースが割り当てられています。しかし、スライダは表示されません。私のコードはhttp://jqueryui.com/demos/slider/#stepsに基づいています。

これは私が放火犯で見るものです:

<tr class="format"> 
<td class="tdlabelNoSize" width="150" valign="top">Volumes monochrome:</td> 
<td> 
<div id="bwvolume" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">slider=Object { element={...}, options={...}, _keySliding=false, meer...} 
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>index.uiSliderHandle=0 
</div> 
(
<span id="spanbwvolume"></span> 
) 
</td> 
</tr> 

Firebugのは、すべてのエラーを報告しません。

画像など何かが欠けていますか?同じページで、jQuery UI Selectable(コードでは表示されていません)を使用していますが、これは問題なく動作しています。

答えて

2

JQuery UIのCSSファイルをリンクしましたか?私はjqueryの-ui.cssを追加して、わずかにスライダーが

登場あなたのjsのコードを変更した後

は私http://jsfiddle.net/LGMHP/2/

+0

OK、愚か参照してください。解決済み:-) – JurgenStillaert

+1

jsfiddleのhtmlセクションにあるタグの間にのみhtmlを含めることになっています。 –

関連する問題