Question

我的任务是创建一个代码段，该代码段将分发到多个网站以包含在他们的HTML中。此代码段将呈现一个按钮，按下此按钮将启动一个包含iframe的灯箱，其中包含来自中央网站的内容。

我的想法是将jQuery与Lightbox插件（例如颜色框）一起使用，但是包含此代码段的网站可能有更旧（或更新）的jQuery版本或已包含的不同框架，这很可能会导致问题。< / p>

我的问题是;如何在网站中以不干扰其他版本的jQuery或其他框架的方式包含jQuery？

此外，这是解决此问题的最佳方法吗？是否存在不使用框架的Javascript Lightbox？

非常感谢任何帮助！

Answer 1

嗯，一般来说，在页面中添加多个js库会损害性能。这也适用于添加多个版本的库。在每个页面加载JQuery（和其他库）必须运行相当多的测试只是为了知道它自己的代码的哪一部分运行（以及每个版本）。大多数时候你没有注意到它，但是在添加第二个库后它可能会成为一个问题。

也就是说，运行多个版本的jQuery很容易。将较新版本的jQuery设置为noconflict模式，同时为其指定一个不同的名称（jquery让你将它$重命名为你想要的任何名称），例如$j2或其他（只需确保它兼容）。此外，我认为它必须包含在旧版本之前，以免在进入noconflict模式之前发生冲突。然后在包含较新的jquery代码后立即将此行放在脚本标记中：

<script type='text/javascript'>
    var $j2 = jQuery.noConflict(); 
</script>

您可以正常加载第二版jQuery。对你的新jQuery的任何后续调用看起来都像：

$j2("myDiv")

就个人而言，我是彩盒的忠实粉丝。我觉得它现在是最好的。它快速，多功能，可重塑。因此，能够更改jQuery名称和颜色框名称，您可以调用colorbox，如下所示：

$ourBiz.fantasyBox({settings:etc});

当然，如果您的客户不看代码，他们就不会注意到它，但它看起来很酷，是吗？我会先尝试一下，你可能会发现第二个库的性能损失甚至都不明显。

如果您确实注意到性能损失，则可能需要尝试以下方法之一：

Lightbox JS - 其中一个原始灯箱。请注意，同一作者有一个Lightbox 2，但它使用Prototype＆amp; Scriptaculous的
HighSlide
Floatbox
TinyBox - 这个并不像大多数人那样多才多艺，但速度很快，所以对于单张图片或内嵌内容的弹出窗口来说，这是一个不错的选择

Answer 2

只需包含jQuery并使用noConflict()方法。 Example

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<link rel="stylesheet" href="http://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css">

<script>
jQuery.noConflict()(function($){
  $('a').lightBox();
});
</script>

如果客户要求进行优化，这是另一个故事。

Javascript Lightbox作为分布式代码段的一部分

2 个答案: