我有一個html頁面,我正在嘗試動態創建div的可調整大小和其他ui功能。該頁面在本地目錄中正確顯示,並通過IE文件>打開訪問。當我將文件傳輸到網絡服務器並通過http://localhost/file.html訪問時。可調整的手柄圖標未顯示。此外,還有沒有應用的CSS樣式。動態創建div時可調整的手柄圖標丟失
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服務器之間有什麼不同?