我有这个 aspx 页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Some Title</title>
<link href="css/home.css" rel="stylesheet" />
<script src="js/jQuery.js"></script>
<script src="js/dragBar.js"></script>
</head>
<body>
<div id="content">
<div id="map">
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.za/maps/ms?msa=0&msid=208869092274662645717.0004dd2a2065f7b179e5b&hl=en&ie=UTF8&ll=-25.401819,28.721652&spn=0,0&t=m&output=embed">
</iframe>
<div id="dragbar"></div>
</div>
<div id="main">
<asp:Label ID="lblError" runat="server" Text="Label"></asp:Label>
</div>
</div>
这是我的 CSS:
#content {
position: relative;
height: auto;
width: 1000px;
margin: auto;
padding-top: 150px;
z-index: 2;
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
}
#content iframe {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
min-height: 200px;
border-bottom: 1px solid black;
box-shadow: 0px 0px 10px black;
}
#content #main {
background-color: BurlyWood;
position: relative;
width: 1000px;
height: 200px;
right: 0;
left: 0px;
z-index: 0;
}
#content #map {
background-color: IndianRed;
width: 1000px;
height: auto;
position: relative;
top: 0px;
bottom: 38px;
overflow-y: hidden;
z-index: 1;
}
#content #dragbar {
background-color: black;
position: absolute;
bottom: 0px;
width: 100%;
height: 3px;
cursor: row-resize;
z-index: 1000;
}
这是我的 jQuery:
$('#dragbar').mousedown(function (e) {
e.preventDefault();
$(document).mousemove(function (e) {
$('#main').css("top", e.pageY);
$('#dragbar').css("bottom", 0);
$('iframe').css("height", e.pageY - 10);
});
});
$(document).mouseup(function (e) {
$(document).unbind('mousemove');
});
我的问题是，当我键入代码时，这在 jsFiddle 上有效，但在 Visual Studio 2012 中无效。我是否遗漏了什么？
对不起，忘记了这个问题。 我的问题是，当我拖动 dragbar div 时，它应该调整 map div 和其中的 iframe 的大小。
我的 JFiddle 位置:http://jsfiddle.net/Bebbie7/QGK5N/
最佳答案
jsFiddle 和 VisualStudio 之间的主要区别在于脚本的包含方式。首先，通过运行脚本调试器或添加警报确保 jquery 被正确加载(路径正确等)。其次，尝试将您的脚本包装在 OnReady 处理程序中，以确保在执行之前一切都已完成加载:
$( document ).ready(function() {
alert("jQuery is working");
$('#dragbar').mousedown(function (e) {
e.preventDefault();
$(document).mousemove(function (e) {
$('#main').css("top", e.pageY);
$('#dragbar').css("bottom", 0);
$('iframe').css("height", e.pageY - 10);
});
});
$(document).mouseup(function (e) {
$(document).unbind('mousemove');
});
});
关于jquery - ASP.NET、CSS 和 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16669339/