我有一个页面同时使用Jquery的Fisheye和Bootstrap。现在，只要使用Bootstrap，Fisheye就无法工作。我尝试使用：noConflict（）;
但它似乎没有帮助。或者我可能错误地放错了？下面是我的完整页面代码。请建议。谢谢。
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="side_style.css" type="text/css">
<script src="menuv2.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/bootstrap-modal.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<style>
.left {
height: 100%;
//opacity: 0.5;
background: rgba(0, 0, 0, 0.3);
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
position: relative;
float: left;
width: 16%;
color: #fff;
}
.right {
height: 100%;
background: rgba(0, 0, 0, 0.3);
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
border-left: 3px solid #ccc;
position: relative;
float: right;
width: 16%;
}
.middle {
height: 100%;
background: rgba(0, 0, 0, 0.3);
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
border-left: 3px solid #ccc;
position: relative;
float: left;
margin-left: 3em;
//margin-right: 1em;
// left:20%;
width: 60%;
}
.ontop {
position: relative;
top: 2.7em;
right: 1.6em;
}
.onmiddle {
position: relative;
top: 12.7em;
right: 1.6em;
}
</style>
</head>
<body style="background-image: url(bg/6.jpg);background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;" width="100%" height="100%">
<div class="left">
<aside>
<img src="hooha_images/logo_small.png" class="expand">
</aside>
<aside style="padding-top: 20%;" class="ontop">
<?php include ( 'sidebar.php'); ?>
</aside>
<aside>
<aside>
<?php include( 'bottom_left.php');?>
</aside>
</div>
<div class="middle">
<h1>This is the Superstar page </h1>
</div>
<div class="right">
<div class="responsive"> <aside style="position: relative;float: right;">
<a data-toggle="modal" href="#responsive">Register</a> | <a data-toggle="modal" href="#responsive">Login</a>
<aside>
<div id="responsive" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Register</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span6">
<h4>Kindly fill up your details</h4>
<p>Name:
<input type="text" class="span12" />
</p>
<p>Email
<input type="text" class="span12" />
</p>
<p>Password
<input type="text" class="span12" />
</p>
</div>
<div class="span6">
<h4>More Info</h4>
<p>Detail 1
<input type="text" class="span12" />
</p>
<p>Detail 2
<input type="text" class="span12" />
</p>
<p>Detail 3
<input type="text" class="span12" />
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.noConflict();
$(document).ready(
function () {
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment: 'left',
valign: 'bottom',
halign: 'center'
}); //added semicolon
}
);
</script>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script type="text/javascript">
$(function () {
$.fn.modalmanager.defaults.resize = true;
$('[data-source]').each(function () {
var $this = $(this),
$source = $($this.data('source'));
var text = [];
$source.each(function () {
var $s = $(this);
if ($s.attr('type') === 'text/javascript') {
text.push($s.html().replace(/(\n)*/, ''));
} else {
text.push($s.clone().wrap('<div>').parent().html());
}
});
$this.text(text.join('\n\n').replace(/\t/g, ' '));
});
prettyPrint();
});
</script>
</body>
</html>
答案 0 :(得分：0)
错误部分：
（使用相同的标签......不同scripts）
<script type='text/javascript'>
var $ = jQuery.noConflict();
</script>
<script type="text/javascript">
......
</script>
在相同script标记
<script type='text/javascript'>
jQuery.noConflict(); //or $.noConflict();
jQuery(document).ready(function() {
//your code
});
</script>
使用jQuery使用多个jquery文件比$更好
另请参阅：how to use jquery.noConflict property
修改
分号缺失：）
<script type="text/javascript">
jQuery.noConflict(); $(document).ready( function() {
$('#dock2').Fisheye( { maxWidth: 60,
items: 'a', itemsText: 'span',
container: '.dock-container2', itemWidth: 40,
proximity: 80, alignment : 'left',
valign: 'bottom', halign : 'center' } );//added semicolon
});
</script>
答案 1 :(得分：0)
最后我修好了。
有两种方式：
1）我刚刚更改了js libs..like placement
的顺序 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
on top of
<script type="text/javascript" src="js/jquery.js"></script>.
-it worked!
2）我没有改变顺序，
<script type="text/javascript" src="js/jquery.js"></script>
..........
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
然后，我在第二个Jquery lib下面添加了这个：
<script>
var $old=jQuery.noConflict(true);//must set the value to true else wont work
</script>
***Key point is to set the parameter to true like above..else wont work..
信用证转到：How can I use plugins for different versions of jQuery on the same page?
Thanks again for all who answered..appreciated guys!