繁体   English   中英

使用多个JavaScript

[英]working with multiple javascripts

我有一个包含一些JavaScript的项目。 一个图像查看器,一个旋转木马,一些切换按钮,现在我需要制作一个弹出表单。 但是,当我插入JavaScript弹出窗口时...停止工作。 我该如何做所有工作? 或任何有助于我创建弹出式表单的提示(而不是现在使用的提示)。 提前致谢

这是标题中的脚本

<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css"> 
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css"> 
<script type="text/javascript">
    $( document ).ready(function() {
        $(".toggleControl").click(function(){ 
            $(this).siblings(".toggleDiv").slideToggle(1000);
            $(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
            $(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
        });
    });     //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>

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

$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});

});
</script>

这是页脚中的脚本

<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $("#owl-example").owlCarousel({
            items : 4
        })
    });
</script>    
<script type="text/javascript">
      $(document).ready(function() {
          $('#pro-img-carousel').carousel({
            interval: 10000
          })
          $('#carousel-pro-img').carousel ({
              interval:8000
          })
        });
</script>   
    <script type="text/javascript">
      $(function(){
          $('.example').okzoom({
            width: 100,
            height: 100,
            border: "1px solid black",
            shadow: "0 0 5px #000"
          });
      });   
    </script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();
        $(".fancybox-effects-d").fancybox({
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            helpers : {
                overlay : null
            }
        });
    });
    </script> 
    <script>
    $(document).ready(function() {
    function random(owlSelector){
    owlSelector.children().sort(function(){
    return Math.round(Math.random()) - 0.5;
    }).each(function(){
    $(this).appendTo(owlSelector);
    });
    }
    $("#owl-demo").owlCarousel({ 
    navigation: true,
    navigationText: [
    "<img src='images/left.png' alt='' class=''>",
    "<img src='images/right.png' alt='' class=''>"
    ],
    beforeInit : function(elem){
    random(elem);
    }
    });
    });

  </script>

首先,您将jquery包含了3次,引导程序包含了2次。 一次就足够了。

由于您使用的是Bootstrap,因此最好使用此http://getbootstrap.com/javascript/#modals

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM