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不起作用？

回答

相關問題