Question

我使用两种不同的JS库，但显然，使用两者时都会出错。

我使用的两件事是Mootools和JQuery UI

<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>

当我使用此代码段时，Agenda slider无效。但是，当我删除这一行

<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>

Agenda slider再次有效，但Datepicker拒绝投放......

如何组合两个脚本并最终使用两个基于javascript的元素？

修改
.php文件中包含的唯一JS是那三个小片段

 <script language="javascript">
    $(document).ready(function() {
            $.featureList(
        $("#tabs li a"),
        $("#output li"), {
            start_item  :   1
        }
    );

    // Alternative
    $('#tabs li a').featureList({
        output          :   '#output li',
        start_item      :   1
    });
    });
  </script>
  <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
  </script>
  <script type="text/javascript">
    var _lofmain =  $('lofslidecontent45');
    var _lofscmain = _lofmain.getElement('.lof-main-wapper');
    var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
    var object = new LofFlashContent( _lofscmain, 
                                      _lofnavigator,
                                      _lofmain.getElement('.lof-navigator-outer'),
                                      { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
                                         interval:3000,
                                         direction :'hrleft' } );
        object.start( true, _lofmain.getElement('.preload') );
    </script>

Answer 1

这里是some jQuery documentation，解释了如何将其他库与jQuery结合使用。

来自文档：

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

因此，对于您的特定情况，请尝试：

<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
 var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>

然后，当您尝试使用jQuery而不是MooTools时，不要忘记将所有引用从$更改为$j。

组合JS库

1 个答案: