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

2 に答える 2

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 ダウンロード ページには、ルック アンド フィールをカスタマイズするためのセクション (下部) があります。自分で自由にデザインできます。私が参照したものがデフォルトです。

于 2013-08-22T19:22:50.257 に答える
-1

これだけ使って……。

#box { resize:both; }

CSSで

于 2013-08-22T19:27:15.320 に答える