2010-01-04 7 views
1

J'essaie d'utiliser la boîte de dialogue jqueryui() dans ma page html.JQuery newbie - dialog

Quelqu'un a-t-il des liens sur le Web vers les bibliothèques javascript nécessaires pour utiliser le widget de dialogue?

Mon code HTML pris de (http://jqueryui.com/demos/dialog/modal-message.html) est inférieure à - je pense aux bibliothèques reliant javascript est le problème ..

S'il vous plaît aider, merci beaucoup.

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

Répondre

1

http://jqueryui.com/

Il est aussi le lien de l'interface utilisateur en haut de la page.

Vous pouvez utiliser le "générateur de téléchargement personnalisé" pour télécharger uniquement ce dont vous avez besoin. Vous aurez besoin d'UI Core et de Dialog. Je recommande également de télécharger également la version de jQuery - parfois la bibliothèque dépend de la version exacte de jQuery.

Le téléchargement contiendra des versions normale et minifiée.

0

Je suppose vous pointez le mauvais répertoire pour vos fichiers UI JavaScript:

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

Est-ce /js/ui/... ou /js/...?

En ce qui concerne les bibliothèques à utiliser, vous devez seulement besoin:

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

Vous devez télécharger les bibliothèques jQuery et jQuery UI sur votre serveur. Vous pouvez les obtenir ici:

  • http://jquery.com/ (gros bouton à droite)
  • http://jqueryui.com/download (sélectionnez noyau de l'interface utilisateur et dialogue - le cas échéant obtenir draggable et redimensionnable si vous avez besoin de cette fonctionnalité)

Selon votre code ...

... vous devrez les placer dans le dossier/js de votre site. Si vous testez le code HTML localement, supprimez le "/" de "/ js", créez un dossier "js" à côté du fichier HTML et placez vos fichiers javascript dedans.

0

J'ai utilisé l'outil de correction d'erreurs http://jqueryui.com/themeroller/ Avec cet outil, j'ai pu télécharger tous les thèmes et toutes les bibliothèques js nécessaires au bon fonctionnement du dialogue.

Les bibliothèques javascript ajax sont également hébergées sur des serveurs google.

Le code est ci-dessous pour l'exhaustivité: (en référence aux fichiers css et javascript téléchargés à partir de 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>