Question

我有一个html页面，我正在尝试动态创建的div的resizable和其他ui功能。页面在本地目录中正确显示并由IE文件访问＆gt;打开。当我将文件传输到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

Answer 1

如果我将jquery / jquery-ui的副本下载到我的Web服务器，这可以解决问题。从http://jqueryui.com/download我下载了稳定版1.8.15 UI亮度主题。

Answer 2

我还有一个问题，即可调整尺寸的手柄没有出现以及其他一些未应用的样式。在我的情况下，我发现我有一个css定义，它覆盖了一些jquery-ui样式。你可以看到这样的事情在Firebug中。在我的例子中，我已经定义了div标签的背景，它比“.ui-icon-gripsmall-diagonal-se”和“.ui-icon”类样式定义更重。

我不需要在我的网络服务器上安装jquery的本地副本。 CDN版本现在运行良好。

动态创建的div缺少可调整大小的抓握图标

2 个答案: