JQuery UI-thickbox.js 解決prototype.js衝突

JQuery 官網

http://jquery.com/

thickbox 官網

http://jquery.com/demo/thickbox/

prototype 官網

https://www.prototypejs.org/

很習慣使用prototype.js 不過有又需要用到jQuery UI 特效,

其實官方網站已經有把解決方式說明了,主要的衝突點在$ 這一個function,二個套件都有實作




http://docs.jquery.com/Using_jQuery_with_Other_Libraries

<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>

thickbox是一個jQuery的UI framework 主要是像lightbox一樣,把背景遮照起來,

而利用一個Div 顯示iframe src 內容,就可以不用另開視窗了

<link href="css/thickbox.css" rel="stylesheet" type="text/css">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="js/thickbox.js" type="text/javascript"></script>

</head>
<body>
text.html 網頁<br/>
height=300&amp;width=500  寬與高<br/>
<a href="test.html?keepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=500" title="測試title" class="thickbox">click me</a>

text.html 要顯示的網頁
height=300&amp;width=500  寬與高

還有要把thickbox.js裡的$全都取代成jQuery  這樣子就能排除error了

效果如下

source如下


0 comments on “JQuery UI-thickbox.js 解決prototype.js衝突

    1 Pings/Trackbacks 於 "JQuery UI-thickbox.js 解決prototype.js衝突"

    發表迴響