jQuery UI 슬라이더가 작동하지 않는 이유는 무엇입니까?

무언가를 추가하는 것을 잊었거나 슬라이더가 보이지 않는 이유는 무엇입니까?jQuery UI 슬라이더가 작동하지 않는 이유는 무엇입니까?

HTML을

<div class="demo"> 
    <p> 
     <label for="amount"> 
      Maximum price:</label> 
     <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="@ViewData.Model" /> 
    </p> 
    <div id="slider-range-min"> 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Fix the minimum value of the range slider so that the user can only select a maximum. 
     Set the <code>range</code> option to "min."</p> 
</div> 
<!-- End demo-description -->

스타일

#demo-frame > div.demo { 
    padding: 10px !important; 
};

스크립트

$(function() { 
    $("#slider-range-min").slider({ 
     range: "min", 
     value: 37, 
     min: 1, 
     max: 700, 
     slide: function (event, ui) { 
      $("#amount").val("$" + ui.value); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range-min").slider("value")); 
});

전체 HTML 소스

<!DOCTYPE html> 
<html> 
<head> 
    <link href="/Content/Stylesheet/Site.css" rel="stylesheet" type="text/css" /> 

    <link rel="stylesheet" href="/Content/themes/base/jquery.ui.all.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="/Content/themes/base/jquery.ui.theme.css" type="text/css" media="all" /> 


    <script src="/Content/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery-ui-i18n.min.js" type="text/javascript"></script> 

    <link href="favicon.ico" rel="icon" /> 

</head> 
<body> 

     <div class="editor-field"> 
      <div class="demo"> 
    <p> 
     <label for="amount"> 
      Maximum price:</label> 
     <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="50" /> 
    </p> 
    <div id="slider-range-min"> 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Fix the minimum value of the range slider so that the user can only select a maximum. 
     Set the <code>range</code> option to "min."</p> 
</div> 
<!-- End demo-description --> 



<style type="text/css"> 
    #demo-frame > div.demo { padding: 10px !important; }; 
    </style> 
<script type="text/javascript"> 
    $(function() { 
     $("#slider-range-min").slider({ 
      range: "min", 
      value: 37, 
      min: 1, 
      max: 700, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider-range-min").slider("value")); 
    }); 
</script> 

      <span class="field-validation-valid" data-valmsg-for="Discount" data-valmsg-replace="true"></span> 
     </div> 
</body> 
</html>

출처

2012-06-23 Mediator

CSS 중 일부가 누락되었을 수 있습니다. CSS를 모두 다운로드했는데 로컬 콘텐츠를 사용하고 있습니까? – AvkashChauhan

은 브라우저 콘솔에서 발생하는 오류입니까? 다운로드 데모를 사용하고있는 것처럼 보입니다. 가장 좋은 추측은 js 또는 css의 경로 문제입니다. 'Net' 또는'Network' 탭을보고로드되는 모든 리소스의 상태를 확인하십시오. – charlietfl

예, AvkashChauhan이 맞습니다. 포함 된 항목이 누락되었습니다. 여기에 jsbin [link] (http : // jsbin. co.kr/ixenew) 잘 작동합니다. – Ravi

확인 경로와 CSS 코드

#demo-frame > div.demo { 
padding: 10px !important; 
} 
//instead of 

#demo-frame > div.demo { 
padding: 10px !important; 
};

의 끝에 세미콜론을 제거 나는 그것이 작동 것 같아요.

출처

2012-06-23 17:24:20 Medona

문제는 'div'에 높이가 없으므로 보이지 않는 채로 클릭 할 수 없다는 점에서 차이가 없습니다. (jsFiddle 어쨌든 사용하는 크롬에서) - 여기를 참조하십시오 : http://jsfiddle.net/yeScN/1/ – Nope

당신이 맞습니다 ...하지만 충분한 두 파일을 포함하는 경우 명시 적으로 패딩과 색상을 정의하지 않아도됩니다. – Medona

1.themes/basejquery.ui.all.css 2.jquery-ui-1.8.21-min.js 최신 jquery UI 버전 1.8.21에 대한 글을 쓰고 있습니다. – Medona

jQuery UI 슬라이더가 작동하지 않는 이유는 무엇입니까?

답변

관련 문제