搬箱子不工作

发布于 2024-12-21 18:53:48 字数 8460 浏览 0 评论 0原文

我的问题是插件 Moving Boxes 无法正常工作。这是整个 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>

原文

My problem is that the plugin Moving Boxes does not work as it should. Here is the entire HTML. I have a lot of jQuery here and I don't know how to isolate all the plugins that I'm using.

I've tried to separate all the plugins but it does not seem to work.

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

箹锭⒈辈孓 2024-12-28 18:53:48

“我这里有很多 jQuery，但我不知道如何隔离我正在使用的所有插件。”

仅使用一个 $(document ).ready() 调用
您想要将这些 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/

编辑以澄清答案

"I have a lot of jQuery here and I don't know how to isolate all the plugins that I'm using."

Only use one $(document).ready() call
You want to move those jQuery calls into another file, for example script.js

==script.js==

A simple way to organize your handlers coud be:

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

A better way is to use a full client-side MVC like Backbone

See a fiddle here: http://jsfiddle.net/c4urself/zaHc7/

Edited for clarification of answer

回复收藏 0 原文

~没有更多了~