2012-06-25 439 views
3

假设我想使用lightbox jquery插件将图像库添加到页面。Orchard CMS 1.4:将javascript添加到特定内容,例如页面

问题:

如何添加灯箱脚本?当然,我可以将它添加到我的主题的layout.cshtml文件中,但是即使不使用它,每个页面也都需要lightbox脚本。

然后我需要将下面的脚本添加到页面:

<script type="text/javascript"> 

     $(function() { 

      $('#photoGallery a').lightBox({ fixedNavigation: true }); 

     }); 

</script> 

同样,我可以把它添加到layout.cshtml文件,但它会更好,只是将其添加到页面。好的,我可以为该页面创建一个图层并将一个html小部件添加到页脚区域,但是肯定有更好的方法吗?

回答

3

您可以使用模块库中提供的众多图像库模块中的一个,并完成它。但是,如果你想手动完成,恐怕你必须手动完成它);但是即使使用特殊的图层和小部件似乎也很复杂:如果你要沿着这条路线走下去,为什么不这样做你只需将该脚本放入页面标记(来自编辑器)?

+0

好的,谢谢,我会看看模块库。但是如果我想要一个页面的标签中的脚本呢?我不能在head标签中设置一个区域作为目标,那么还有其他方法吗? – awrigley

+0

从本质上说,这一次很好,因为有一个现成的模块来解决我的问题。但是在我的页面中需要使用JS的任何其他问题呢? – awrigley

+3

使用(Script.Head()){...把你的脚本标记在这里...} –

1

如果你需要基于一个元素的存在或元素集我会做到这一点的只有加载脚本:

function LazyLoadScripts() { 
    if ($('#photogallery').length > 0) { 
     $('<script src="path-to-script" type="text/javascript"></script>').appendTo('body'); 
     window.setTimeout("$('#photoGallery a').lightBox({ fixedNavigation: true });", 1); 
    } 
    /* load any other scripts here in the same way */ 
} 
$(document).ready(function() { LazyLoadScripts(); }); 

现在,你可以插入到你的布局或者如果你的代码倾斜,你可以为BodyPart创建一个新的驱动程序,并插入一个新的形状的脚本。您还需要将该形状放置到头部或尾部区域。

相关问题