JQuery 新手 - 对话框答案

【问题标题】：JQuery newbie - dialogJQuery 新手 - 对话框
【发布时间】：2010-01-04 18:19:26
【问题描述】：

我正在尝试在我的 html 页面中使用 jqueryui 对话框 (http://docs.jquery.com/UI/Dialog)。

有没有人在网络上获得任何指向使用对话框小部件所需的 javascript 库的链接？

我从 (http://jqueryui.com/demos/dialog/modal-message.html) 获取的 HTML 代码如下 - 我认为链接到 javascript 库是问题..

请帮忙，非常感谢。

<html lang="en">
<head>
    <title>jQuery UI Dialog - Modal message</title>
    <link type="text/css" href="/css/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="/js/ui/ui.core.js"></script>
    <script type="text/javascript" src="/js/ui.draggable.js"></script>

    <script type="text/javascript" src="/js/ui.resizable.js"></script>
    <script type="text/javascript" src="/js/ui.dialog.js"></script>
    <script type="text/javascript" src="/js/external/bgiframe/jquery.bgiframe.js"></script>
    <link type="text/css" href="/css/demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div id="dialog" title="Download complete">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p>
        Currently using <b>36% of your storage space</b>.
    </p>

</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
    <form>
        <input value="text input" /><br />
        <input type="checkbox" />checkbox<br />
        <input type="radio" />radio<br />

        <select>
            <option>select</option>
        </select><br /><br />
        <textarea>textarea</textarea><br />
    </form>
</div><!-- End sample page content -->

</div><!-- End demo -->

<div class="demo-description">

<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work.  Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>

</div><!-- End demo-description -->

</body>
</html>

【问题讨论】：

标签： jquery html ajax jquery-ui

【解决方案1】：

http://jqueryui.com/

也是页面顶部的 UI 链接。

您可以使用“自定义下载构建器”仅下载您需要的内容。您将需要 UI Core 和 Dialog。我建议也下载 jQuery 版本 - 有时该库取决于确切的 jQuery 版本。

下载将包含正常和缩小版本。

【讨论】：

【解决方案2】：

我猜你的 JavaScript UI 文件指向了错误的目录：

<script type="text/javascript" src="/js/ui/ui.core.js"></script>
<script type="text/javascript" src="/js/ui.draggable.js"></script>

是/js/ui/... 还是/js/...？

至于使用哪些库，你应该只需要：

jquery-1.3.2.js
ui.core.js
ui.dialog.js

【讨论】：

【解决方案3】：

您需要将 jQuery 和 jQuery UI 库下载到您的服务器上。你可以在这里得到它们：

http://jquery.com/（右侧大按钮）
http://jqueryui.com/download（选择 UI 核心和对话框 - 如果您需要该功能，可以选择可拖动和调整大小）

根据你的代码...

...您需要将它们放入您网站的 /js 文件夹中。

如果您在本地测试 HTML，请从“/js”中删除“/”，在 HTML 文件旁边创建一个“js”文件夹，然后将您的 javascript 文件放在那里。

【讨论】：

【解决方案4】：

我使用了主题滚轮工具http://jqueryui.com/themeroller/ 使用这个工具，我能够下载使对话框工作所需的所有主题和 js 库。

javascript ajax 库也托管在 Google 服务器上。

为了完整起见，代码如下：（参考从themeroller下载的css和javascript文件）。

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>jQuery UI Example Page</title>
  <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript">
   $(function(){


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

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

    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
     function() { $(this).addClass('ui-state-hover'); }, 
     function() { $(this).removeClass('ui-state-hover'); }
    );

   });
  </script>
  <style type="text/css">
   /*demo page css*/
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
   .demoHeaders { margin-top: 2em; }
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
   ul#icons {margin: 0; padding: 0;}
   ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
   ul#icons span.ui-icon {float: left; margin: 0 4px;}
  </style> 
 </head>
 <body>
 <h1>Welcome to jQuery UI!</h1>
 <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of <a href="js/jquery-1.3.2.min.js">jQuery</a>, your personalized copy of <a href="js/jquery-ui-1.7.2.custom.min.js">jQuery UI (js/jquery-ui-1.7.2.custom.min.js)</a>, and <a href="css/smoothness/jquery-ui-1.7.2.custom.css">css/smoothness/jquery-ui-1.7.2.custom.css</a> which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p>
 <p style="font-size: 1.2em; line-height: 1.5; margin: 1em 0; width: 50%;">You've downloaded components and a theme that are compatible with jQuery 1.3+. Please make sure you are using jQuery 1.3+ in your production environment. <em>If you need jQuery UI components that work with an earlier version of jQuery, you can choose an older version in the <a href="http://jqueryui.com/download">jQuery UI download builder</a>.</em></p> 

 <p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;">YOUR COMPONENTS:</p>

  <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
  <h2 class="demoHeaders">Dialog</h2>
  <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>


  <!-- 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>

【讨论】：