0

動的に作成された div のサイズ変更可能およびその他の ui 機能を実験している html ページがあります。ローカル ディレクトリにあり、[IE ファイル] > [開く] でアクセスすると、ページが正しく表示されます。ファイルをWebサーバーに転送し、http://localhost/file.htmlでアクセスすると。サイズ変更可能なグリップ アイコンは表示されません。また、適用されていない CSS スタイルもあります。

divが定義されています

       var index = getCookie("divindex");
       if (index == "" || index == null) index = 1;
       var divid = "compage"+index;
       $("#page").append('<div id="'+divid+'" class="comdiv ui-widget-content"></div>');
       $('#'+divid).append('<p class="comhdr editableText ui-widget-header">Sample'+index+'</p>');
       $('#'+divid).css('top',50);
       $('#'+divid).css('left',50);
       $('#'+divid).css('width',150);
       $('#'+divid).css('height',150);
       $('#'+divid).resizable();
       $('#'+divid).draggable();
       $('#'+divid).draggable("option", "handle", '.comhdr');
       $( '#'+divid+' p').editableText();

これは静的 div でも発生します。

 <div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px; 

height:250px; border:1px solid grey;">
    <p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>

ファイル内のライブラリは

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script>
<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">

<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<style>
.comdiv { position:absolute; padding: 0.5em; border: 1px solid black}
.comhdr { text-align: center; margin: 0; cursor:move; font: 14px bold Georgia; border 1px solid grey; background: grey;}
</style>
<script>
$(function() {
    $( "#editdiv" ).resizable();
    $( "#editdiv" ).draggable();
    $( "#editdiv" ).draggable("option", "handle", '#heading');
});
</script>

ローカル ファイルと Web サーバーで動作が異なるのはなぜですか?

http://jsbin.com/awosup

4

2 に答える 2

0

サイズ変更可能なグリップが適用されていない他のスタイルと一緒に表示されないという問題もありました。私の場合、いくつかの jquery-ui スタイルを上書きする css が定義されていることがわかりました。そのようなことは、たとえば Firebug で見ることができます。私の場合、「.ui-icon-gripsmall-diagonal-se」および「.ui-icon」クラス スタイル定義よりも重い div タグの背景を定義しました。

Web サーバーに jquery のローカル コピーをインストールする必要はありませんでした。CDN バージョンは正常に動作します。

于 2011-08-29T19:37:17.773 に答える
0

jquery/jquery-ui のコピーを Web サーバーにダウンロードすると、問題が解決します。http://jqueryui.com/downloadから安定したバージョン 1.8.15 UI lightness テーマをダウンロードしました。

于 2011-08-12T01:41:48.277 に答える