내 벨트 아래에 첫 번째 jquery 위젯을 가져 오는 데 어려움이 있습니다.

다음 슬라이더를 사용하고 싶습니다. http://jqueryui.com/demos/slider/#range 오프라인으로 작업 할 수 있도록 모든 파일을 로컬로 유지하려고합니다. 지금 내가하려는 것은이 슬라이더 만 표시하는 데모 페이지를 만드는 것입니다. 나는 내 투쟁이 있다고 생각한다 : 어떤 js, css 파일을 다운로드/포함해야 하는가? 일단 내 벨트 아래에서 첫 번째를 얻으면 나는 벗어나야합니다.내 벨트 아래에 첫 번째 jquery 위젯을 가져 오는 데 어려움이 있습니다.

도움 주셔서 감사합니다.

편집 :

그래서 내가 코드를 다운로드 한 폴더의 나머지에 내가 아무것도 얻을 디렉토리에 내 HTML 파일을 넣습니다. 명확한 것. 내 HTML 파일, CSS, 개발 번들 및 js 폴더가있는 폴더가 있습니다. 여기 내 코드가 있습니다 : 스크립트는 jquery 데모에서 움켜 잡혔습니다. 나는이 WAYYYY를 필요 이상으로 복잡하게 만들고 있다고 확신합니다. 감사.

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

출처

2011-11-21 Dale

웹 콘솔에 오류가 있습니까? – Leo

Fyi, 최근의 jQuery 버전은'1.6.4'와'1.7'입니다. – ThiefMaster

script 태그의 JavaScript가 body 태그의 html보다 먼저 실행되므로 jQuery는 해당 선택자를 해결할 수 없습니다. JS를 실행하기 전에 DOM이로드 될 때까지 기다리십시오.

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

FWIW,이 같은 작은 프로젝트에 나는 거의 항상이 문서 준비 함수 내 경고 ("테스트") 또는을 console.log ("테스트")로 시작합니다. 라이브러리가로드되고 JS가 처음부터 올바르게 실행되는지 여부를 알려주는 빠르고 쉬운 방법입니다.

출처

2011-11-21 23:50:25 Thomas

이거 보이지 않습니까? '$ (function() {' –

내 벨트 아래에 첫 번째 jquery 위젯을 가져 오는 데 어려움이 있습니다.

답변

관련 문제