2013-01-10 56 views
0

我有這樣的問題,我使用像jquery carousel滑塊,jquery下拉菜單幾個腳本,但是當我試圖添加jqueryui對話框所有其他腳本不起作用。這裏是我的代碼:Jqueryui對話框與其他腳本創建

之前我添加jQueryUI的對話框:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script> 
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script> 
<script> 
    $(document).ready(function(){ 
     //To switch directions up/down and left/right just place a "-" in front of the top/left attribute 

     //Caption Sliding (Partially Hidden to Visible) 
     $('.boxgrid.caption').hover(function(){ 
      $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160}); 
     }, function() { 
      $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); 
     }); 
      $('.boxgrid2.caption').hover(function(){ 
      $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160}); 
     }, function() { 
      $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160}); 
     }); 
      $('.boxgrid3.caption').hover(function(){ 
      $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160}); 
     }, function() { 
      $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); 
     }); 


    }); 
</script> 
<script> 
jQuery(document).ready(function($) { 
    jQuery('#mega-menu-1').dcMegaMenu(); 

}); 
</script> 

<script> 
    function show() { 
     if(document.getElementById('benefits').style.display=='none') { 
      document.getElementById('benefits').style.display='block'; 
     } 
     return false; 
    } 
    function hide() { 
     if(document.getElementById('benefits').style.display=='block') { 
      document.getElementById('benefits').style.display='none'; 
     } 
     return false; 
    } 
</script> 
<script type="text/javascript"> 
    <!-- 
     $(document).ready(function() { 
      $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); 
     }); 
    --> 
</script> 

代碼jQueryUI的對話框:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script> 
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script> 

<!--Dialog start--> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

<script> 
// increase the default animation speed to exaggerate the effect 
$.fx.speeds._default = 1000; 
$(function() { 
$("#dialog").dialog({ 
autoOpen: false, 
show: "blind", 
hide: "fade" 

}); 
$(".log-in").click(function() { 
$("#dialog").dialog("open"); 
return false; 
}); 
}); 
</script> 
<!--Dialog end--> 


<script> 
    $(document).ready(function(){ 
     //To switch directions up/down and left/right just place a "-" in front of the top/left attribute 

     //Caption Sliding (Partially Hidden to Visible) 
     $('.boxgrid.caption').hover(function(){ 
      $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160}); 
     }, function() { 
      $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); 
     }); 
      $('.boxgrid2.caption').hover(function(){ 
      $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160}); 
     }, function() { 
      $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160}); 
     }); 
      $('.boxgrid3.caption').hover(function(){ 
      $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160}); 
     }, function() { 
      $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); 
     }); 


    }); 
</script> 



<script> 
jQuery(document).ready(function($) { 
    jQuery('#mega-menu-1').dcMegaMenu(); 

}); 
</script> 


<script> 
    function show() { 
     if(document.getElementById('benefits').style.display=='none') { 
      document.getElementById('benefits').style.display='block'; 
     } 
     return false; 
    } 
    function hide() { 
     if(document.getElementById('benefits').style.display=='block') { 
      document.getElementById('benefits').style.display='none'; 
     } 
     return false; 
    } 
</script> 
<script type="text/javascript"> 
    <!-- 
     $(document).ready(function() { 
      $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); 
     }); 
    --> 
</script> 

對我一個很奇怪的事情是,當我添加jQueryUI的對話框腳本後,所有腳本(到此代碼的末尾)它根本不起作用。

任何想法爲什麼?

Screenshot

回答

1

我已經使用noConflict();

添加到腳本$jQ = jQuery.noConflict();然後更改所有$ -> $jQ

<script> 
$jQ = jQuery.noConflict(); 
$jQ .fx.speeds._default = 1000; 
$jQ (function() { 
$jQ ("#dialog").dialog({ 
autoOpen: false, 
show: "blind", 
hide: "fade" 

}); 
$jQ (".log-in").click(function() { 
$jQ ("#dialog").dialog("open"); 
return false; 
}); 
}); 
</script>