2010-02-11 5 views
15

Ok, voici le problème. jQuery Redimensionnable ne fonctionne pas sur cette page: click herejQuery UI redimensionnable ne fonctionne pas du tout

Essayez-le sur la boîte grise dans le coin supérieur gauche.

Ce que je veux faire est de faire la shoutbox sur la bonne taille redimensionnable. Mais cela n'a pas fonctionné, j'ai donc essayé de copier tout ce qui se trouvait sur la page d'exemple de l'interface jQuery et de l'essayer. J'ai donc ajouté la boîte grise de la même façon, en utilisant même le même css mais ça ne marchera pas.

Voilà comment les bibliothèques sont appelées:

<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

google.load("jquery", "1.4.1"); 
google.load("jqueryui", "1.7.2"); 

google.setOnLoadCallback(function() { 

}); 

</script> 

<script type="text/javascript" src="js/thickbox.js"></script> 
<script type='text/javascript' src='js/jqueryEasingMin.js'></script> 
<script type='text/javascript' src='js/jquery.imghover-1.1rc.js'></script> 
<script type="text/javascript" src="js/shoutbox.js" ></script> 
<script type="text/javascript" src="js/bbcode.js" ></script> 
<script type='text/javascript' src='js/jqueryLoader2.js'></script> 
manuscrit

dans le document fonction prêt (comme dans l'exemple):

$('#resizable').resizable(); 

CSS de la boîte grise:

<style type="text/css"> 
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;} 
</style> 

I a dû ajouter la position et les paramètres z-index en raison de la conception de mon site, mais cela ne semble pas affecter anythi ng

Et la mise en œuvre:

<div id="resizable"></div> 

Je pense que je manque ici quelque chose de vraiment évident, mais je ne peux pas le voir. Je l'ai même essayé en reliant les bibliothèques de l'interface utilisateur jquery à un répertoire local au lieu d'utiliser celles de google.

J'apprécierais vraiment un signe de tête dans la bonne direction. Merci

Répondre

10

Il est censé être ce droit après avoir appelé ui jquery et css:

<script type="text/javascript"> 
$(function() { 
    $("#resizable").resizable(); 
}); 
</script> 

EDIT: En outre, vous devez inclure un thème pour qu'il fonctionne correctement.

+2

Oh je suis désolé, j'oublié de le mentionner. C'est là aussi. Je vais mettre à jour mon message. – Cletus

+9

Je pense que vous avez besoin d'un thème pour que cela fonctionne correctement. – tr4656

+4

Je suis d'accord avec tr4656. Le plugin redimensionnable ajoute les poignées pour le redimensionnement. Vous devez inclure le CSS pour donner la taille des poignées. – czarchaic

32

Vous devez inclure fourni par jquery css-ui lorsque vous créez votre téléchargement personnalisé. Vous pouvez trouver le fichier css dans jquery-ui-1.8.21.custom \ css \ ui-lightness \ jquery-ui-1.8.21.custom.css (si vous avez choisi le thème de légèreté). Voici le css pour redimensionnable:

.ui-resizable { position: relative;} 
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; } 
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} 
+2

Je ** déteste ** que c'était mon problème. Merci beaucoup pour cet excellent rappel! –

1

essayez d'ajouter ceci:

<div id="resizable" class="ui-widget-content"> 
Questions connexes