2010-02-11 16 views
15

Ok aquí está el problema. jQuery Redimensionable simplemente no funciona en esta página: click herejQuery UI redimensionable no funciona en absoluto

Pruébelo en el cuadro gris en la esquina superior izquierda.

Lo que quiero hacer es cambiar el tamaño del shoutbox en el tamaño correcto. Pero no funcionó, así que intenté simplemente copiar todo, desde la página de ejemplo de la interfaz de usuario de jQuery a la mía y probarlo. Así que agregué el cuadro gris de la misma manera que ellos, usando incluso el mismo CSS, pero no funcionará.

Así es como se llaman las bibliotecas:

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

la escritura dentro de la función de lista de documentos (como en el ejemplo):

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

CSS de la caja gris:

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

I tuve que agregar los parámetros de posición e índice Z debido al diseño de mi sitio, pero eso parece no afectar a ningún ng.

e implementación:

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

creo que me estoy perdiendo algo muy obvio aquí, pero no puede verlo. Incluso lo intenté al vincular las bibliotecas de la IU de jquery a un directorio local en lugar de usar las de Google.

Realmente agradecería un guiño en la dirección correcta. Gracias

Respuesta

10

No se supone que este derecho después de llamar a la interfaz de usuario jQuery y CSS:

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

EDIT: Además, es necesario incluir un tema para que funcione correctamente.

+2

Oh lo siento, se me olvidó mencionar que. Está ahí, también. Actualizaré mi publicación. – Cletus

+9

Creo que necesitas un tema para que funcione correctamente. – tr4656

+4

Estoy de acuerdo con tr4656. El complemento redimensionable agrega las asas para cambiar el tamaño. Debe incluir el CSS para dar el tamaño de las manijas. – czarchaic

32

Tiene que incluir css proporcionado por jquery-ui cuando crea su descarga personalizada. Puede encontrar el archivo css en jquery-ui-1.8.21.custom \ css \ ui-lightness \ jquery-ui-1.8.21.custom.css (si eligió el tema de ligereza). Aquí está la CSS para cambiar de tamaño:

.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

Odio ** que este sea mi problema. Muchas gracias por el excelente recordatorio! –

1

intento de añadir esto:

<div id="resizable" class="ui-widget-content"> 
Cuestiones relacionadas