web-dev-qa-db-ja.com

サイズ変更可能なjQueryUIがまったく機能しない

ここに問題があります。 jQuery Resizableは、このページでは機能しません： ここをクリック

左上隅の灰色のボックスで試してみてください。

私がやりたいのは、適切なサイズのシャウトボックスをサイズ変更可能にすることです。しかし、それは機能しなかったので、jQueryUIのサンプルページからすべてを自分のページにコピーして試してみました。そこで、同じcssを使用して、同じ方法で灰色のボックスを追加しましたが、機能しません。

ライブラリの呼び出し方法は次のとおりです。

 <script src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">

 google.load("jquery", "1.4.1");
 google.load("jqueryui", "1.7.2");

google.setOnLoadCallback(function() {

});

</script>

<script type="text/javascript" src="js/thickbox.js"></script>
<script type='text/javascript' src='js/jqueryEasingMin.js'></script>
<script type='text/javascript' src='js/jquery.imghover-1.1rc.js'></script>
<script type="text/javascript" src="js/shoutbox.js" ></script>
<script type="text/javascript" src="js/bbcode.js" ></script>
<script type='text/javascript' src='js/jqueryLoader2.js'></script>

ドキュメントレディ関数内のスクリプト（例のように）：

 $('#resizable').resizable();

灰色のボックスのCSS：

<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>

サイトのデザインのために位置とz-indexパラメータを追加する必要がありましたが、それは何にも影響を与えないようです。

そして実装：

  <div id="resizable"></div>

私はここで本当に明白な何かが欠けていると思いますが、私はそれを見ることができません。私は、グーグルのものを使用する代わりに、jqueryUIライブラリをローカルディレクトリにリンクすることでそれを試しました。

私は本当に正しい方向にうなずいていただければ幸いです。ありがとうございました

jqueryuser-interfaceresizable
18
Cletus

Jquery uiとcssを呼び出した直後にこれがあるはずです：

<script type="text/javascript"> 
$(function() {
    $("#resizable").resizable();
});
</script>

EDIT：また、正しく機能させるにはテーマを含める必要があります。

10
tr4656

カスタムダウンロードをビルドするときは、jquery-uiによって提供されるcssを含める必要があります。 cssファイルはjquery-ui-1.8.21.custom\css\ui-lightness\jquery-ui-1.8.21.custom.cssにあります（明度テーマを選択した場合）。サイズ変更可能なCSSは次のとおりです。

.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; 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: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; 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;}
33
Tomasz Sikora

これを追加してみてください：

<div id="resizable" class="ui-widget-content">
1
Dedan