移動盒子不能正常工作

-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 2011-12-15 17:34:33

「我在這裏有很多的jQuery的，我不知道怎麼說我使用的所有插件隔離。」

僅使用一個 $（文件）。就緒（）調用
你要移到那些jQuery的調用到另一個文件，例如的script.js

== 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(); 
}

一個更好的方法是使用一個完整的客戶端MVC像Backbone

在這裏看到一個小提琴：http://jsfiddle.net/c4urself/zaHc7/

編輯澄清回答的

來源

2011-12-15 17:09:50 c4urself

雖然這可能是最好的做法，看起來乾淨的代碼和效率......你的項目＃1沒有問題，也沒有導致任何問題。您的物品＃2也無關緊要或造成任何問題。這根本不是一個相關的答案。 – Sparky 2011-12-15 17:31:29

移動盒子不能正常工作

回答

相關問題