在标头中添加多个js文件 [英] Adding multiple js files in the header

问题描述

我正在尝试向标头添加两个不同的javascript函数:

1)用于灯箱(请参见下面的代码)和

2)用于本地滚动(下面的代码).当我将它们都放置在标题标签中时(如下所示)，当我去查看页面时，一个或另一个将根本不起作用-取决于我将它们放置在标签中的顺序.

问:如何获得所有这些js.我在查看页面时可以使用哪些文件?

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>

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

\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>

<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>

<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $.localScroll.defaults.axis = 'y';
            $.localScroll();
        });
</script>

解决方案

您正在使用带有jQuery的原型，请确保在jquery框架脚本和原型框架之后以及在运行任何主脚本之前具有jQuery.noConflict();. 不建议同时使用多个JavaScript框架.

<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery.localScroll.defaults.axis = 'y';
            jQuery.localScroll();
        });
</script>
</header>

尝试一下

I'm trying to add two different javascript functions to my header:

1) is for a lightbox (see code below) and the

2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.

Q: how can I get all these js. files to work when I view my page?

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>

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

\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>

<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>

<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $.localScroll.defaults.axis = 'y';
            $.localScroll();
        });
</script>

解决方案

You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.

<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery.localScroll.defaults.axis = 'y';
            jQuery.localScroll();
        });
</script>
</header>

give this a try

这篇关于在标头中添加多个js文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！