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()
將使呼叫等待光滑塊執行日期選擇器之前運行。
任何幫助或建議我要去哪裏錯將不勝感激。
你有沒有包含jquery-ui庫 – thegeekajay 2014-08-30 12:33:26
我覺得很愚蠢 – 2014-08-30 12:51:26