这是我尝试测试jQuery resizable是否有效的简单代码.我使用google.load就可以使用其他jQuery组件了,我尝试将google.load换成本地版本,没有任何区别.我已经在3个浏览器中测试过,我已经从几个演示/教程站点复制了代码(它可以在他们的站点上找到它们).
<!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>
我没有收到任何错误消息.我的智慧结束了.我究竟做错了什么？为什么即使这个简单的案例也不起作用？
更新:jQuery UI库包含在google.load("jqueryui","1.7.1")行中;
Mat*_*usz 11
你需要的所有CSS工作jquery ui .resizable():(不要忘记将图像保存到本地)
<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>