2010-01-04 4 views
1

Я пытаюсь использовать диалог jqueryui (http://docs.jquery.com/UI/Dialog) на моей странице html.JQuery newbie - dialog

У кого-нибудь есть ссылки в Интернете на библиотеки javascript, необходимые для использования виджета диалога?

Моего HTML код взят из (http://jqueryui.com/demos/dialog/modal-message.html) ниже - Я думаю, что связь с яваскриптом библиотек проблема ..

Пожалуйста, помогите, большое спасибо.

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

ответ

1

http://jqueryui.com/

Это также ссылку UI в верхней части страницы.

Вы можете использовать «пользовательский загрузчик», чтобы загрузить только то, что вам нужно. Вам понадобится интерфейс и диалоговое окно. Я бы рекомендовал также загрузить версию jQuery - иногда библиотека зависит от точной версии jQuery.

Загрузка будет содержать нормальные и уменьшенные версии.

0

Моя догадка вы указывая на неправильный каталог для файлов 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
0

Вам нужно будет загрузить библиотеки jQuery и jQuery UI на свой сервер. Вы можете получить их здесь:

  • http://jquery.com/ (большая кнопка справа)
  • http://jqueryui.com/download (выбрать ядро ​​UI и диалог - возможно, получить перетаскивать и изменяемыми, если вам нужна эта функциональность)

Согласно вашим код ...

... вам нужно будет поместить их в папку/js вашего сайта.

Если вы тестируете HTML локально, удалите «/» из «/ js», создайте папку «js» вместе с файлом HTML и поместите туда файлы javascript.

0

Я использовал инструмент themeroller http://jqueryui.com/themeroller/ С помощью этого инструмента я смог загрузить все темы и библиотеки js, необходимые для работы диалога.

Библиотеки ajax javascript также размещаются на серверах google.

Код приведен ниже для полноты: (ссылка на файлы css и javascript, загруженные с themeroller).

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