2014-08-30 49 views
0

我試圖在lightSlider項目中放置jQuery UI日期選擇器。然而,我似乎無法弄清楚如何實際上可以讓Javascript在滑塊內執行基於其內容。日期選擇器只是我試圖實現的一個例子。在lightSlider中運行Javascript

我到目前爲止的代碼如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>HTML5/CSS3 Modal</title> 
    <!-- Demo Styles --> 
    <link href="css/demo.css" rel="stylesheet"> 
    <!-- Modal Styles --> 
    <link href="css/modal.css" rel="stylesheet"> 
    <link type="text/css" rel="stylesheet" href="css/lightSlider.css"/> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="js/jquery.lightSlider.js"></script> 
</head> 

<body> 
    <div class="container"> 
     <p><a href="#modal" class="btn go">Date Range</a></p> 
    </div> 
    <div id="modal"> 
     <div class="modal-content"> 
      <div class="header"> 
       <h2>Select Date Range</h2> 
      </div> 
      <div> 
       <ul id="lightSlider"> 
        <li> 
         <h3>Start Date</h3> 
         Date: <div id="datepicker"></div> 
        </li> 
        <li> 
         <h3>End Date</h3> 
         <script>document.write("Calendar in here");</script> 
        </li> 
       </ul> 
      </div> 
      <div class="cf footer"> 
       <a href="#" class="btn">Close</a> 
      </div> 
     </div> 
     <div class="overlay"></div> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function Slide() { 
      slider = $("#lightSlider").lightSlider({ 
       mode:'fade', 
       minSlide:1, 
       pager:true, 
      }); 

      //Go to 1st Slide 
      slider.goToSlide(0); 
     }); 
     $(lightSlider).ready(function() { 
      $("#datepicker").datepicker(); 
     }); 
    </script> 

</body> 
</html> 

這個代碼不顯示日期選擇器,並返回在控制檯下面。

[Error] TypeError: 'undefined' is not a function (evaluating '$("#datepicker").datepicker()') 
    (anonymous function) (localhost, line 64) 
    j (jquery.min.js, line 2) 
    fireWith (jquery.min.js, line 2) 
    ready (jquery.min.js, line 2) 
    K (jquery.min.js, line 2) 

我想用$(lightSlider).ready(function()將使呼叫等待光滑塊執行日期選擇器之前運行。

任何幫助或建議我要去哪裏錯將不勝感激。

+1

你有沒有包含jquery-ui庫 – thegeekajay 2014-08-30 12:33:26

+0

我覺得很愚蠢 – 2014-08-30 12:51:26

回答

5

請包括jquery-ui庫。

從錯誤中,其明顯的是,日期選擇器的功能沒有被定義爲JS庫丟失

快樂Jquerying! :)