Question

我正在尝试在lightSlider项目中放置一个jQuery UI日期选择器。但是，我似乎无法弄清楚如何根据其内容实际让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()会使调用等待灯光滑块运行。

对于我出错的地方提供任何帮助或建议将不胜感激。

Answer 1

请包含jquery-ui库。

从错误中可以明显看出，datepicker函数没有定义为缺少js库

快乐的Jquerying !! ：）

在lightSlider中运行Javascript

1 个答案: