Question

我有一个页面在左侧面板上使用“Mac样式弹跳菜单”，然后在页脚中再次使用。基本上它只是具有不同图像的相同插件。

任何一个只有作品，即使我尝试jQuery.noConflict(true)，也无济于事。

我的问题是，如果我们要在页面中重复相同的插件，需要做些什么来避免冲突？从我的理解，如果使用各种插件，jQuery.noConflict可以解决它，但对于相同类型的plugin？

test4.php

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test4</title>
        <link rel="stylesheet" href="css/style1.css" type="text/css">
        <link rel="stylesheet" href="css/side_style.css" type="text/css">
        <script src="js/menuv2.js" type="text/javascript"></script>
        <!--<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />-->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />

        <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" />


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
        <script src="js/bootstrap-modalmanager.js"></script>
        <script src="js/bootstrap-modal.js"></script>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/interface.js"></script>

    </head>
    <body id='superstar'>
        <div class='left'>
            <aside>
                <img src="hooha_images/logo_small.png" class="expand">
            </aside>
            <aside  class="ontop">
                <?php
                 include ('sidebar.php');

                ?>



            </aside>
            <aside>

             <aside>

                   <?php include('bottom_left.php');?>//1st Mac styled menu
             </aside>
        </div>
        <div class="wrap">
        <div class='middle'>
           <font color='#fff'><center>This is the Shop With Us Page of Indonesia</center></font>

        </div>


        <div class="footer">

            <?php
          include ('footer.php');//2nd Mac styled menu
           ?>
        </div>
        </div>
        <div class='right'>

          <?php
              include 'top-right.php';
              include 'side-ad.php';
          ?>

        </div>  


    </body>
</html>

底left.php

<div class="dock" id="dock1">
  <div class="dock-container1">
      <a class="dock-item2" href="index.php"><span>Home</span><img src="images/home.png" alt="home" /></a> 
      <a class="dock-item2" href="about-intro.php"><span>About Us</span><img src="images/portfolio.png" alt="contact" /></a> 
      <a class="dock-item2" href="contact-us.php"><span>Contact Us</span><img src="images/email.png" alt="portfolio" /></a> 

  </div>

</div>

<!--dock menu JS options -->
<script type="text/javascript">

    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>

footer.php

<div class="dock" id="dock2">
  <div class="dock-container2">
      <a class="dock-item2" href="index.php"><span>Home</span><img src="images/home.png" alt="home" /></a> 
      <a class="dock-item2" href="about-intro.php"><span>About Us</span><img src="images/portfolio.png" alt="contact" /></a> 
      <a class="dock-item2" href="contact-us.php"><span>Contact Us</span><img src="images/email.png" alt="portfolio" /></a> 
      <a class="dock-item2" href="index.php"><span>Home</span><img src="images/home.png" alt="home" /></a> 
      <a class="dock-item2" href="about-intro.php"><span>About Us</span><img src="images/portfolio.png" alt="contact" /></a> 
      <a class="dock-item2" href="contact-us.php"><span>Contact Us</span><img src="images/email.png" alt="portfolio" /></a> 

  </div>

</div>

<!--dock menu JS options -->
<script type="text/javascript">
    //var $=jQuery.noConflict(true);

    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            );
        }
    );

</script>

相同的插件可以在页面中使用两次而不会出现错误

0 个答案: