Question

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

我看到的只是一个红色的盒子，在黑盒子里面，根本无法看到调整大小的图标，如下例所示：

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>

Answer 1

你错过了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上，有一个部分（在底部）来自定义外观。你可以自由设计自己的;我引用的是默认值。

Answer 2

请使用此....

#box { resize:both; }

在css中

jQuery Resizable不起作用？

2 个答案: