Non riesco a ridimensionare jQuery per funzionare: cosa sto facendo male?

Ecco il mio semplice codice per provare e verificare se jQuery ridimensionabile funziona. Io uso altri componenti di jQuery bene usando google.load, e ho provato a sostituire google.load per una versione locale senza alcuna differenza. Ho provato in 3 browser, ho copiato il codice da diversi siti demo/tutorial (dove funziona sul loro sito).Non riesco a ridimensionare jQuery per funzionare: cosa sto facendo male?

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

Non ricevo alcun messaggio di errore. Sono alla fine del mio spirito. Che cosa sto facendo di sbagliato? Perché anche questo semplice caso non funziona?

AGGIORNAMENTO: le librerie UI jQuery sono incluse dalla riga google.load ("jqueryui", "1.7.1");

fonte

2009-03-29 MECU

Odio jQuery e loro esempi abbozzato! È come se fossi qui, sei fortunato se riesci a capirlo: P –

jQuery UI sta lavorando bene nel campione, il problema che hai è perché non si dispone di alcun CSS Theme inclusa nella last test, e la "ridimensionabile handle "l'icona non viene mostrata.

Aggiungi la tua own theme o quello di default:

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

vedere il tuo campione here.

fonte

2009-03-29 04:34:13 CMS

L'aggiunta di questo collegamento al foglio di stile l'ha risolto. Grazie! – MECU

fantastico! grazie! – rilar

Hai provato:

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

Vale la pena notare che google.load() è una chiamata asincrona e non sarà in grado di richiamare le funzioni jQuery finché non vengono caricati da qui il callback.

Ok, aveva uno sguardo al vostro esempio e hai qualche problema:

Questo è il più grande: non avete jQuery UI foglio di stile;
Stai raddoppiando jQuery, jQuery UI e SWFObject da Google e localmente;
L'ultimo div all'interno del div ridimensionabile sta bloccando il ridimensionamento. Non so esattamente perché, ma ho commentato e funziona bene; e
Non è necessaria una chiave API per l'API di librerie AJAX di Google. Questo odes non causa problemi. È solo FYI.

versione funzionante del tuo:

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

fonte

2009-03-29 03:36:59 cletus

Che non ha funzionato. Per provare l'ho provato e questo non funziona per me, goto: http://www.bcsfanpoll.com/test/test.php – MECU

L'aggiunta del collegamento del foglio di stile l'ha risolto. Non vedo come sto includendo le librerie due volte? L'ultimo div è stato aggiunto da jQuery (o Firefox), non fa parte del mio codice base. Il '

' è ciò che fa parte del mio codice, niente dentro. Grazie per il suggerimento no-API. – MECU

Tutto CSS è necessario per ottenere lavoro jQuery UI .resizable(): (non dimenticate di salvare l'immagine al locale)

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

fonte

2011-04-27 12:22:37 Mateusz

Non riesco a ridimensionare jQuery per funzionare: cosa sto facendo male?

risposta

Problemi correlati