动态创建的 div 缺少可调整大小的抓握图标
我有一个 html 页面，我正在其中尝试动态创建的 div 的可调整大小和其他 ui 功能。当位于本地目录并通过 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 服务器之间的行为会有所不同？
I have an html page where I am experimenting with resizable and other ui features for divs created dynamically. The page shows correctly when in a local directory and accessed by IE File > Open. When I tranfer the file to the web server and access by http://localhost/file.html. The resizable grip icons aren't shown. Also, there are css styles that aren't applied.
The div is defined
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();
This also happens for a static 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>
The libraries in the file are
<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>
Why would the behavior be different between the local file and the web server?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我将 jquery/jquery-ui 的副本下载到我的网络服务器，则可以解决问题。从 http://jqueryui.com/download 我下载了稳定版本 1.8.15 UI lightness 主题。
If I download a copy of jquery/jquery-ui to my web server this fixes the problem. From http://jqueryui.com/download I downloaded stable version 1.8.15 UI lightness theme.
我还遇到了一个问题，即可调整大小的握把没有与未应用的其他一些样式一起显示。就我而言，我发现我定义了一个 css，它覆盖了一些 jquery-ui 样式。你可以在 Firebug 中看到这样的东西。就我而言，我定义了 div 标签的背景，它比“.ui-icon-gripsmall-diagonal-se”和“.ui-icon”类样式定义更重。
我不需要需要在我的网络服务器上安装 jquery 的本地副本。 CDN版本现在工作正常。
I also had the probelm that the resizable grip isn't showing up along with some other styles not applied. In my case, I found out that I had a css defined which overrode some jquery-ui styles. You can see such things e.g. in Firebug. In my case, I had defined the background for div tags which weighed heavier than the ".ui-icon-gripsmall-diagonal-se" and ".ui-icon" class style definitions.
I did not need to install a local copy of jquery on my web server. CDN version works fine now.