0

このような問題があります.jqueryカルーセルスライダー、jqueryドロップダウンメニューなどのスクリプトをいくつか使用していますが、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>

私にとってもう1つの非常に奇妙なことは、すべてのスクリプトの後に（このコードの最後に）JqueryUiダイアログスクリプトを追加すると、まったく機能しないことです。

理由はありますか？

スクリーンショット

4

1 に答える 1

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>
于 2013-01-11T15:50:29.477 に答える