jQuery Resizeable不起作用？

$(document).ready(function() { 
    $("#box").resizable(); 
}); 

.container { 
    width: 450px; 
    height: 450px; 
    background-color: #000; 
} 

#box { 
    width: 150px; 
    height: 150px; 
    background-color: red; 
    padding: 0.5em; 
} 

<div class="container"> 
    <div id="box"> 
    </div> 
</div>

我看到的是一个红色的盒子，一个黑盒子里面，看不到调整大小的图标都喜欢在这里的例子：jQuery Resizeable不起作用？

http://jqueryui.com/resizable/#helper

我看了看他们的CSS文件，它看起来像与类.ui-widget-content它的工作原理，但为什么？

是什么使那里的大小调整图标弹出？它为什么不起作用？

有：

<html> 
<head id="html"> 
<title>Jquery project</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

</head> 

<div class="container"> 
    <div id="box"> 
    </div> 
</div> 
<style> 
.container { 
    width: 450px; 
    height: 450px; 
    background-color: #000; 
} 

#box { 
    width: 150px; 
    height: 150px; 
    background-color: red; 
    padding: 0.5em; 
} 
</style> 
<script> 
$(document).ready(function() { 
    $("#box").resizable(); 
}); 
</script> 
</html>

来源

2013-08-22 Jony Kale

你有什么错误？你确实有jQuery和jQueryUI正确链接的权利？ –

它工作正常...确保添加jquery脚本和jqueryui脚本... http://jsfiddle.net/HCZTx/ – Dom

不适合我，也没有错误。阅读我的编辑。 –

你错过了jQuery UI样式表：

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

整个jQuery UI的项目使用样式表来确定小部件的外观和感觉。可调整大小的图标位于样式表中：

.ui-icon-gripsmall-diagonal-se { 
    background-position: -64px -224px; 
} 
.ui-icon, .ui-widget-content .ui-icon { 
    background-image: url("images/ui-icons_222222_256x240.png"); 
}

元素的宽度和高度由样式控制。在jquery download page上，有一部分（位于底部）用于自定义外观。你可以自由设计自己的;我引用的是默认的。

来源

2013-08-22 19:22:50 RustyTheBoyRobot

为什么我需要使用他们的样式表？而上面的JSFiddle不使用它。 –

JSFiddle确实使用它;检查其中包含结果的iframe，您将看到脚本文件和样式表 – RustyTheBoyRobot

我需要使用哪些CSS来完成工作？我不想将他们的造型应用到我的设计中。是什么让这个图标出现？ –

-1

只要使用这个....

#box { resize:both; }

在CSS

来源

2013-08-22 19:27:15

jQuery Resizeable不起作用？

回答

相关问题