Impossible de mettre jQuery redimensionnable au travail: Qu'est-ce que je fais mal?

Voici mon code simple pour essayer et tester si jQuery redimensionnable fonctionne. J'utilise d'autres composants jQuery très bien avec google.load, et j'ai essayé de changer le google.load pour une version locale sans différence. J'ai testé dans 3 navigateurs, j'ai copié le code de plusieurs sites de démonstration/tutoriel (où cela fonctionne trouver sur leur site).Impossible de mettre jQuery redimensionnable au travail: Qu'est-ce que je fais mal?

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://www.google.com/jsapi?key=blahblah_obviously changed_blahblah-blahblah_blah_blahblahblah"></script> 
<script type="text/javascript">google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script> 
<style type="text/css"> 
    #resizable { width: 100px; height: 100px; background: silver; } 
</style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#resizable").resizable(); 
}); 
</script> 
</head> 
<body> 
<div id="resizable"></div> 
</body> 
</html>

Je ne reçois aucun message d'erreur. Je suis à la fin de mon esprit. Qu'est-ce que je fais mal? Pourquoi même ce cas simple ne fonctionne pas? MISE À JOUR: les bibliothèques de l'interface utilisateur jQuery sont incluses par la ligne google.load ("jqueryui", "1.7.1");

Source

2009-03-29 MECU

Je déteste jQuery et leurs exemples peu précis! C'est comme si vous y étiez, vous êtes chanceux si vous pouvez comprendre celui-ci: P –

jQuery UI fonctionne bien dans votre échantillon, la question que vous avez est parce que vous n'avez pas Thème CSS inclus dans votre last test, et le « redimensionnable handle "L'icône n'est pas affichée.

Ajoutez votre own theme ou par défaut:

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

Consultez votre échantillon here.

Source

2009-03-29 04:34:13 CMS

Ajout de ce lien de feuille de style résolu. Merci! – MECU

génial! Je vous remercie! – rilar

Avez-vous essayé:

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

Il convient de noter que google.load() est un appel asynchrone et vous ne pourrez pas appeler les fonctions jQuery jusqu'à ce qu'ils soient chargés d'où le rappel.

Ok, avait un oeil à votre exemple et que vous avez quelques problèmes:

C'est le plus grand: vous n'avez pas stylesheet jQuery UI;
Vous êtes double, y compris jQuery, jQuery UI et SWFObject de Google et localement;
La dernière div à l'intérieur de votre div redimensionnable bloque le redimensionnement. Je ne sais pas exactement pourquoi mais je l'ai commenté et ça fonctionne bien; et
Vous n'avez pas besoin d'une clé API pour l'API AJAX Libraries de Google. Cela ne cause pas de problème. C'est juste pour info.

version de travail de la vôtre:

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css"> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1.3.2"); 
google.load("jqueryui", "1.7.1"); 
google.load("swfobject", "2.1"); 
google.setOnLoadCallback(function() { 
    $(function() { 
    $("#resizable").resizable(); 
    }); 
}); 
</script> 
<style type="text/css"> 
    #resizable { width: 100px; height: 100px; background: silver; } 
</style> 
</head> 
<body> 
<div id="resizable"> 
    <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div> 
    <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div> 
    <!--<div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>--> 
</div> 
</body> 
</html>

Source

2009-03-29 03:36:59 cletus

Cela n'a pas fonctionné. Pour prouver que je l'ai essayé et cela ne fonctionne pas pour moi, allez: http://www.bcsfanpoll.com/test/test.php – MECU

Ajout du lien de la feuille de style résolu. Je ne vois pas comment j'inclus les bibliothèques deux fois? Ce dernier div est ajouté par jQuery (ou Firefox), il ne fait pas partie de mon code de base. Le '

' est ce qui fait partie de mon code, rien à l'intérieur. Merci pour le conseil sans API. – MECU

Toutes les CSS dont vous avez besoin pour faire fonctionner jquery ui .resizable(): (ne pas oublier d'enregistrer l'image au niveau local)

<style type="text/css"> 
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 
.ui-resizable { position: relative;} 
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; 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: 0px; } 
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; } 
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; } 
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; 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;} 
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } 
</style>

Source

2011-04-27 12:22:37 Mateusz

Impossible de mettre jQuery redimensionnable au travail: Qu'est-ce que je fais mal?

Répondre

Questions connexes