Kann jQuery resizable nicht funktionieren: Was mache ich falsch?

Hier ist mein einfacher Code zu versuchen und zu testen, ob jQuery resizable funktioniert. Ich benutze andere jQuery-Komponenten mit google.load, und ich habe versucht, google.load für eine lokale Version ohne Unterschied auszuwechseln. Ich habe in 3 Browsern getestet, dass ich Code von mehreren Demo/Tutorial-Seiten kopiert habe (wo es funktioniert, finde sie auf ihrer Seite).Kann jQuery resizable nicht funktionieren: Was mache ich falsch?

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

Ich bekomme keine Fehlermeldungen. Ich bin mit meinem Latein am Ende. Was mache ich falsch? Warum funktioniert nicht einmal dieser einfache Fall?

UPDATE: Die jQuery UI-Bibliotheken sind in der Zeile google.load ("jqueryui", "1.7.1") enthalten;

Quelle

2009-03-29 MECU

Ich hasse jQuery und ihre skizzenhafte Beispiele! Es ist wie hier, du hast Glück, wenn du das herausfinden kannst: P –

jQuery UI fein in Ihrer Probe arbeitet, das Problem, das Sie haben, weil Sie in Ihrem last test enthalten nicht jede CSS Theme haben, und die „Größe veränderbar handle "Symbol wird nicht angezeigt.

Fügen Sie Ihren own theme oder den Standard ein:

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

Ihre Probe here.

Quelle

2009-03-29 04:34:13 CMS

Das Hinzufügen dieses Stylesheet-Links hat es gelöst. Vielen Dank! – MECU

genial! Danke! – rilar

Haben Sie versucht:

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

Es ist erwähnenswert, dass google.load Bemerken() ist ein asynchroner Aufruf und Sie rufen können, um die jQuery-Funktionen nicht, bis sie daher den Rückruf geladen sind.

Ok, hatte einen Blick auf Ihrem Beispiel und Sie haben ein paar Probleme bekommen:

Dies ist die größte: Sie keine jQuery UI Sheet haben;
Sie sind doppelt mit jQuery, jQuery UI und SWFObject von Google und lokal;
Das letzte Div in Ihrem resizable Div blockiert die Größenänderung. Nicht sicher, warum genau, aber ich habe es auskommentiert und es funktioniert gut; und
Sie benötigen keinen API-Schlüssel für Google AJAX Libraries API. Dies verursacht kein Problem. Es ist nur FYI.

Arbeitsversion von Ihnen:

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

Quelle

2009-03-29 03:36:59 cletus

Das hat nicht funktioniert. Um zu beweisen, dass ich es ausprobiert habe und das funktioniert nicht für mich, gehe zu: http://www.bcsfanpoll.com/test/test.php – MECU

Das Hinzufügen des Stylesheet-Links hat es gelöst. Ich sehe nicht, wie ich die Bibliotheken zweimal einschließe. Das letzte Div wird von jQuery (oder Firefox) hinzugefügt, es ist nicht Teil meines Basiscodes. Das '

' ist, was Teil meines Codes ist, nichts darin. Danke für den No-API-Tipp. – MECU

Alle CSS Sie arbeiten jquery ui .resizable erhalten müssen(): (nicht vergessen Bild lokal zu speichern)

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

Quelle

2011-04-27 12:22:37 Mateusz

Kann jQuery resizable nicht funktionieren: Was mache ich falsch?

Antwort

Verwandte Themen