1

我试图在单击按钮时显示一个 jquery 对话框（来自一些示例代码），但由于某种原因它不会。希望您能提供帮助：

<html>      
<head>
    <script type="text/javascript" src="jquery.js"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    autoOpen: true,
                    title: 'Pick A Time Period:'
                });

            $('#reports').click(function() {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        })
    </script>
</head>
<body>
    <button id="reports">Hi</button>
</body>
</html>

编辑：对不起，没有意识到 JQueryUI 是一个单独的文件。今天才学习 JQuery，所以对我来说都是新的

我现在为 JQueryUI 文件添加了正确的脚本行，但由于某种原因它仍然无法正常工作：

<html>      
<head>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    autoOpen: true,
                    title: 'Pick A Time Period:'
                });

            $('#reports').click(function() {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        })
    </script>
</head>

<body>
    <button id="reports">Hi</button>
</body>
</html>
4

2 回答 2

1

应该：

<script type="text/javascript" src="jquery.js"></script>
于 2012-06-22T18:32:03.660 回答
1

在 jquery 对话框脚本之前的 head 标记之间包含这一行，看看你得到了什么！

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
于 2012-06-22T19:01:09.443 回答