gpt4 book ai didi

jquery - ASP.NET、CSS 和 jQuery

转载 作者:行者123 更新时间:2023-11-28 18:21:47 25 4
gpt4 key购买 nike

我有这个 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&amp;msid=208869092274662645717.0004dd2a2065f7b179e5b&amp;hl=en&amp;ie=UTF8&amp;ll=-25.401819,28.721652&amp;spn=0,0&amp;t=m&amp;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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com