如何使web.py和jQuery UI协同工作?

时间:2012-02-25 21:29:31

标签: jquery jquery-ui web.py

jQuery UI可以和web.py一起使用吗?使用jQuery和web.py,您可以使用jQuery或$$触发事件(因为web.py使用$表示模板变量) - 但jQuery UI似乎并非如此。

我从下面的代码中得到以下错误:jQuery("#dialog")。对话框不是一个函数。相同的代码在web.py框架之外正确执行。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/usr/local/pos/templates/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function(){

            // Dialog           
            jQuery('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function() { 
                        jQuery(this).dialog("close"); 
                    }, 
                    "Cancel": function() { 
                        jQuery(this).dialog("close"); 
                    } 
                }
            });

            // Dialog Link
            jQuery('#dialog_link').click(function(){
                jQuery('#dialog').dialog('open');
                return false;
            });             
        });

    </script>   
</head>
<body>
<h1>Hello</h1>  

    <h2>Dialog</h2>
    <a href="#" id="dialog_link">Open Dialog</a>

    <!-- ui-dialog -->
    <div id="dialog" title="Dialog Title">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您可能没有正确加载jQuery UI。

/usr/local/pos/templates/jquery-ui-1.8.18.custom.min.js

看起来应该是一个http网址 - 你不想使用本地文件系统路径。 (如果它是一个相对文件系统路径,请仔细检查它是否正确。)

确保使用正确的网址。

答案 1 :(得分:0)

我知道这是一篇很老的帖子,但我觉得这也有帮助。您说您找不到要使用的http而不是本地版本。 Google在其CDN上托管了几个java脚本库。您可以在此处查看此信息 - https://developers.google.com/speed/libraries/devguide

只需点击您想要的库。它们同时具有jquery和jquery ui以及您需要粘贴的内容。

如果您想要jquery ui的CSS文件,可以在这里找到指向这些文件的链接 - Downloading jQuery UI CSS from Google's CDN(第一个/最佳答案)