在同一页面中使用JQuery和Prototype；需要更多解释！
当我使用 jquery lightbox （运行原型）和 jquery news slider 时，我不断遇到问题。
我尝试了“无冲突”方法。
问题是我不知道放置代码的确切位置。
所以，在这里，我将我的脚本放入 .
因此，请对其进行故障排除并解释我将补丁放在哪里。
非常感谢。
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jquery</title>
<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>
<style>
html
{ background-color: #FFA928;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
color:black;
}
a { text-decoration: none; font-weight: bold; }
.news_style{
display:none;
}
.news_show
{
background-color: white;
color:black;
width:350px;
height:150px;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
overflow: auto;
}
.news_border
{
background-color: white;
width:350px;
height:150px;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 1px solid gray;
padding: 5px 5px 5px 5px;
overflow: auto;
}
.news_mark{
background-color:white ;
font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
width:361px;
height:35px;
color:black;
text-align:center;
}
.news_title{
font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
padding: 5px 0px 9px 5px;
color:black;
}
.news_show img{
margin-left: 5px;
margin-right: 5px;
}
.buttondiv
{
position: absolute;
/*float: left;*/
/*top: 169px;*/
padding: 5px 5px 5px 5px;
background-color:white ;
border: 1px solid gray;
/*border-top-color: white;*/
border-top:none;
height:20px;
}
</style>
<script>
$(document).ready(function(){
var newsoption1 = {
firstname: "mynews",
secondname: "showhere",
thirdname:"news_display",
fourthname:"news_button",
newsspeed:'6000'
}
$.init_news(newsoption1);
var myoffset=$('#news_button').offset();
var mytop=myoffset.top-1;
$('#news_button').css({top:mytop});
});
</script>
</head>
I'm continuously having the problem when i use jquery lightbox (which runs prototype) and jquery news slider.
I tried the "noconflict" method.
The problem is I don't know the exact place to put the code.
So, here, i'm putting my scripts within .
So, please troubleshoot it and explain me where to put the patch.
thank you very much.
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jquery</title>
<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>
<style>
html
{ background-color: #FFA928;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
color:black;
}
a { text-decoration: none; font-weight: bold; }
.news_style{
display:none;
}
.news_show
{
background-color: white;
color:black;
width:350px;
height:150px;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
overflow: auto;
}
.news_border
{
background-color: white;
width:350px;
height:150px;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 1px solid gray;
padding: 5px 5px 5px 5px;
overflow: auto;
}
.news_mark{
background-color:white ;
font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
width:361px;
height:35px;
color:black;
text-align:center;
}
.news_title{
font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
padding: 5px 0px 9px 5px;
color:black;
}
.news_show img{
margin-left: 5px;
margin-right: 5px;
}
.buttondiv
{
position: absolute;
/*float: left;*/
/*top: 169px;*/
padding: 5px 5px 5px 5px;
background-color:white ;
border: 1px solid gray;
/*border-top-color: white;*/
border-top:none;
height:20px;
}
</style>
<script>
$(document).ready(function(){
var newsoption1 = {
firstname: "mynews",
secondname: "showhere",
thirdname:"news_display",
fourthname:"news_button",
newsspeed:'6000'
}
$.init_news(newsoption1);
var myoffset=$('#news_button').offset();
var mytop=myoffset.top-1;
$('#news_button').css({top:mytop});
});
</script>
</head>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我不知道你能比这里的解释更清楚
本质上，调用
jQuery.noConflict将$变量放弃为加载 jQuery 之前定义的任何内容。之后需要调用jQuery才能直接使用。就我而言，我像这样重新定义它：
您还可以在就绪函数中使用 $，如下所示：
非常简单......您对什么感到困惑？
I don't know how much clearer you can get then the explanation here
In essence, calling
jQuery.noConflictrelinquishes the$variable to whatever it was defined as before you loaded jQuery.After that you need to call jQuery to use it directly. In my case I redefine it like so:
You can also use the $ inside a ready function, like so:
Pretty straightforward... what are you confused about?
呃？ jQuery lightbox 不使用原型。你到底在用什么？
试试这个 http://leandrovieira.com/projects/jquery/lightbox/
并转储原型如果可以的话，一起。最好避免两个庞大的框架。
Eh? jQuery lightbox doesn't use prototype. What exactly are you using?
Try this http://leandrovieira.com/projects/jquery/lightbox/
And dump prototype all together if you can. Better to avoid two bulky frameworks.
在包含 jquery 库后立即调用 $.noConflict() 。请参阅此处。
Put the $.noConflict() call immediately after you include the jquery lib. See here.