Avoir de nombreux problèmes avec l'interface utilisateur Jquery 1.8.1 Dialog.js

Question

J'utilise l'interface utilisateur jquery depuis un certain temps maintenant. C'est la première fois que j'utilise le 1.8 et je ne sais pas pourquoi mais il me semble que ce plugin a fait des pas en arrière.

Je n'ai jamais eu autant de mal à utiliser l'interface utilisateur de JQuery.

D'abord, la documentation est obsolète.

dépendances

* UI Core 
* UI Draggable (Optional) 
* UI Resizable (Optional) 

Après 20 minutes de la ligne d'essayer et d'obtenir erreur après erreur (comme boîte de dialogue est pas une fonction) je réalisai que vous avez besoin d'un autre fichier javascript appelé « widget.js »

Alors maintenant, j'ai

Jquery 1.4.2.js 
UI Core.js UI 
Widget.js 
UI Dialog.js 

tout sur ma page.

J'ai alors fait quelque chose comme ça

$('#Delete').click(function() 
    { 
     var dialogId = "DeleteDialogBox"; 
     var createdDialog = MakeDialogBox(dialogId, "Delete Conformation"); 

     $('#tabConent').after(createdDialog); 
     dialogId = String.format('#{0}', dialogId); 

     $(dialogId).dialog({ 
      resizable: true, 
      height: 500, 
      width: 500, 
      modal: true, 
      buttons: { 
       'Delete all items': function() { 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 

     function MakeDialogBox(id, title) 
    { 
     var dialog = String.format('<div id="{0}" title="{1}"></div>', id, title); 
     return dialog; 
    } 

Maintenant ce que cela devrait faire est-il fait une où la boîte de dialogue devrait aller. Après cela, il devrait le mettre juste après mes onglets. Donc, lorsque vous le regardez avec firebug, il le fait. Cependant, une fois la méthode .dialog() déplace le + tout ce qu'il génère et le met après mon pied de page. Maintenant, j'ai ma boîte de dialogue sous mon pied caché dans le coin inférieur droit. Je le veux mort au centre. Dans les versions précédentes, je ne pense pas que le code de dialogue était sur votre page, il serait toujours au centre.

Alors, qu'est-ce qui me manque? Le centre.js (je ne sais pas si cela existe mais il semble que vous ayez besoin de 100 fichiers javascript maintenant pour que cela fonctionne correctement).

Answer 1

Essayez de construire une boîte de dialogue "à la volée".

$('<div>test</div>').dialog({/* your options here */}); 

pouvez également obtenir les versions non compressées de sources JQ-UI et regarder dans dialog.js - toutes les dépendances sont écrites dans son commentaire droit d'en-tête.

Answer 2

Je pense que le problème ici est manquant CSS. Cependant, vous pouvez rendre tout cela plus simple :) Tous ces fichiers de script sont combinés et minifiés lorsqu'ils font une version, par exemple here's the full version et here's the minified one (version 1.8.1 au moment de cette réponse). De cette façon, vous incluez 1 fichier de script au lieu de vous soucier des scripts de l'interface utilisateur dans quel ordre. Dans l'ensemble, vous pouvez simplifier grandement la vie en téléchargeant l'interface utilisateur jQuery via les mécanismes qu'ils fournissent, jetez un oeil à the jQuery UI download page. Vous pouvez personnaliser ce que vous voulez et télécharger un zip, puis tout ce que vous devez inclure est 3 fichiers: jQuery, jQuery UI, et le jQuery UI CSS (qui pointe vers les images dont il a besoin).Vous pouvez également utiliser un CDN pour tous les trois, comme ceci:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" /> 

Si vous êtes à l'aise avec l'un des thèmes intégré, vous pouvez utiliser un CDN pour tout comme ci-dessus, il suffit de remplacer base avec le nom du thème , you can find a full list here (il suffit de changer 1.7.2 pour la version actuelle dans l'URL)