이동 상자가 작동하지 않습니다.

-1

제 문제는 플러그인 이동 상자가 제대로 작동하지 않는다는 것입니다. 다음은 전체 HTML입니다. 여기 jQuery가 많이 있으며 사용중인 모든 플러그인을 분리하는 방법을 알지 못합니다.이동 상자가 작동하지 않습니다.

모든 플러그인을 분리하려고했지만 작동하지 않는 것 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Mobila</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> 
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="default.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="jquery-ui-1.8.16.custom.css" type="text/css" media="screen"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script src="jquery.nivo.slider.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.core.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.widget.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.accordion.js" type="text/javascript"></script> 
<script src="cufon-yui.js" type="text/javascript"></script> 
<script src="jquery.floatobject-1.0.js" type="text/javascript"></script> 
<script src="CaractereDoublet_Limited_Version_400.font.js" type="text/javascript"></script> 

<script src="jquery.easing.1.2.js" type="text/javascript"></script> 
<script src="jquery.movingboxes.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="movingboxes.css" type="text/css" media="screen">  

     <script type="text/javascript"> 
      $(document).ready(function() { 
      Cufon.replace('.ui-accordion-header a', { 
    hover: true, 
    textShadow: '#555555 -1px 1px, #555555 2px 2px' 
});}); 



     </script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $(function() { 
     $("#accordion").accordion({ autoHeight: true, 
            collapsible: true}); 
    });}); 
    </script> 

<script type="text/javascript"> 
$(document).ready(function() { 
$(function(){ 

$('#xxx').movingBoxes({ 

width : 800 // overall width of movingBoxes (not including navigation arrows) 
}); 

}); 
}); 
</script> 


<script type="text/javascript"> 
$(document).ready(function() { 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     effect: 'random', // Specify sets like: 'fold,fade,sliceDown' 
     slices: 10, // For slice animations 
     boxCols: 8, // For box animations 
     boxRows: 4, // For box animations 
     animSpeed: 500, // Slide transition speed 
     pauseTime: 3000, // How long each slide will show 
     startSlide: 0, // Set starting Slide (0 index) 
     pauseOnHover: true 

    }); 
});}); 

</script> 


</head> 

<body> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(document).ready(main); 

     function main() 

     { 

      $("#first").makeFloat({x:"current",y:"current",}); 

     }  
}); 
    </script> 





<div id="first"> 


<a class="social" href="#"><img src="1728669589.png" width="64" height="64" /></a> 
<a class="social" href="#"><img src="Google-Plus-Logo-Icon.png" width="64" height="64" /></a> 


</div><!--end first--> 


<div id="wrapper"> 
    <div id="logo"> 
    <h1>Logo</h1> 
    </div><!--logo end--> 
    <div id="slider1"> 


<div class="slider-wrapper theme-default"> 

    <div id="slider" class="nivoSlider"> 
    <img src="http://i01.i.aliimg.com/photo/v0/106535379/Kitchens_Furniture_Cabinets.jpg" alt="" /> 
    <img src="http://i00.i.aliimg.com/photo/v0/106535388/Kitchens_Furniture_Cabinets.jpg" alt="" /> 
    <img src="http://www.floridamarkt.com/wp-content/uploads/2011/11/Modern-Daybed-Design-for-Home-Outdoor-Furniture-Sculptural-Collection-by-Neoteric-Luxury-Twin.jpg" alt="" /> 
    <img src="http://sunshineinteriors.net/images/content/pf/fur5_large.jpg" alt="" /> 
    </div> 
</div> 


</div><!--slider1 end--> 
<br /> 
<div id="content"> 

<div id="demo"> 

<div id="accordion"> 
    <h3><a href="#">Despre noi!</a></h3> 
    <div> 
     <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
     </p> 
    </div> 
    <h3><a href="#">Produse</a></h3> 



    <div> 
     <ul id="xxx"> 

<li> 
<img src="http://www.flickr.com/photos/justbcuz/112479862g" alt="picture"> 
<h2>News Heading</h2> 
<p>Add a short exerpt here... <a href="http://www.flickr.com/photos/justbcuz/112479862">more</a></p> 
</li> 

<li> 
<img src="2698975899_430bd38aa6_o.jpg" alt="picture"> 
<h2>News Heading</h2> 
<p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899">more</a> and a whole lot more text goes here, so we can see the height adjust.</p> 
</li> 

<li> 
<img src="http://flickr.com/photos/ruudvanleeuwen/468309897" alt="picture"> 
<h2>News Heading</h2> 
<p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897">more</a></p> 
</li> 

<li> 
<img src="http://flickr.com/photos/emikohime/294092478" alt="picture"> 
<h2>News Heading</h2> 
<p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478">more</a></p> 
</li> 

<li> 
<img src="http://www.flickr.com/photos/fensterbme/499006584" alt="picture"> 
<h2>News Heading</h2> 
<p>Add a short exerpt here... <a href="http://www.flickr.com/photos/fensterbme/499006584">more</a></p> 
</li> 

<li> 
<img src="demo/6.jpg" alt="picture"> 
<h2>News Heading</h2> 
<p>Add a short exerpt here... <a href="#">more</a></p> 
</li> 

</ul> <!-- end Slider #1 --> 
    </div> 



    <h3><a href="#">Proiecte</a></h3> 
    <div> 
     <p> 
     Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
     Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
     ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
     lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
     </p> 
     <ul> 
      <li>List item one</li> 
      <li>List item two</li> 
      <li>List item three</li> 
     </ul> 
    </div> 
    <h3><a href="#">Contact</a></h3> 
    <div> 
     <p> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
     et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
     faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
     mauris vel est. 
     </p> 
     <p> 
     Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
     Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
     inceptos himenaeos. 
     </p> 
    </div> 
</div><!--end demo--> 
</div><!--end content--> 

<!--<div id="grafic"></div>--> 



</div><!--wrapper end--> 
</div> 
<!--[if IE]> 
<script type="text/javascript"> Cufon.now(); </script> 
<![endif]--> 
<!--<script type="text/javascript"> 
$('.first li').mouseenter(function() { 
    $(this).animate({rotate: '+45deg'}); 

$('.first li').mouseenter(function() { 
    $(this).animate({rotate: '0deg'});}); 

});</script>--> 



</body> 
</html>

출처

2011-12-15 John the horn

_ "그것이해야하는 것처럼 작동하지 않는다"는 것을 설명하는 더 나은 직업은 의미한다고 생각합니다. 독자가 추측하지 못하게하십시오. http://tinyurl.com/so-hints – Sparky

"나는 여기에 jQuery를 많이하고 난 내가 사용하는 모든 플러그인을 분리하는 방법을 모르겠어요."

만 예는

을 script.js 당신은 그 jQuery를 다른 파일를 호출 이동하려는

전화) (.ready 한 $ (문서)를 사용 == script.js ==

핸들러를 구성하는 간단한 방법은 다음과 같습니다.

window.mynamespace = window.mynamespace || { doMoveHandler: function() { $("#movingdiv").click(function() { // code moving div }); }, doJumpHandler: function() { // code here }, doCufonHandler: function() { Cufon.replace('.ui-accordion-header a', { hover: true, textShadow: '#555555 -1px 1px, #555555 2px 2px' }); } }; $(document).ready(function() { // If something doesn't work comment out // other functions rest to debug that specific plugin! // mynamespace.doMoveHandler(); mynamespace.doJumpHandler(); mynamespace.doCufonHandler(); }

더 좋은 방법은 여기에 바이올린을 참조하십시오 Backbone

처럼 전체 클라이언트 측 MVC를 사용하는 것입니다 대답의 해명 http://jsfiddle.net/c4urself/zaHc7/

편집을
당신은해야 할 것이다

출처

2011-12-15 17:09:50 c4urself

깨끗한 코드와 효율성을위한 모범 사례 일 수도 있지만 문제 # 1은 문제가되지 않으며 문제가 발생하지도 않습니다. 상품 # 2도 중요하지 않습니다. 그것은 전혀 관련성이없는 대답입니다. – Sparky

"나는 여기에 jQuery가 많이 있으며 사용중인 모든 플러그인을 분리하는 방법을 알지 못합니다."라는 질문에 대한 나의 대답이있었습니다. 거기에서 코드를 디버그하는 것이 더 쉬울 수도 있습니다. – c4urself

아래 표를 피하기 위해 답안에서 언급하는 것이 가장 좋습니다. 마치 두 개 이상의'document.ready' 또는 페이지 내에 코드를 넣는 것이 실제로 문제를 일으킬 것이라고 말하는 것처럼 보입니다. – Sparky

이동 상자가 작동하지 않습니다.

답변

관련 문제