ImpressPages/jQuery替代标准函数库

本条目旨在介绍怎样将ImpressPages CMS中默认使用的标准函数库替换成jQuery库，然后举例说明将默认的光箱效果更改成ColorBox。

如果你打算将jQuery运用到菜单显示或者其他功能上的话，你也许需要事先阅读以下本条目。

第一步，移除默认的标准函数库

在主题文件中main.php头部中找到下行代码，将其删除：

<link rel="stylesheet" href="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/css/lightbox.css" type="text/css" 
media="screen" />

再在main.php文件的底部找到下面的代码，并且将其删除：

<!-- popups -->
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/prototype.js"></script> 
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/scriptaculous.js?
 load=effects,builder"></script> 
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/lightbox.js"></script> 
<script type="text/javascript">   
// <![CDATA[   
LightboxOptions.fileLoadingImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>' + 'js/lightbox/images/loading.gif';   
LightboxOptions.fileBottomNavCloseImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>'
+ 'js/lightbox/images/closelabel.gif';   //]]>
</script> 
<!-- popups -->

第二步，添加jQuery和Fancybox文件

点击下面的链接，下载文档，然后解压至主题目录ip_theme/ip_default中。

jQuery lightbox(.zip)

最终的文件夹层次结构如下：

- fancybox
  - ...
  - 许多其他文件
  - ...
- ...
- main.php
- ...
- prototype.js
- ...

注意： 在该文件夹结构中我们看到，有prototype.js文件，这个本是默认的标准函数库中使用的，在这里继续使用，是因为ImpressPages核心的功能还需要使用一些prototype库（默认的标准函数库）中的函数，而这个新的prototype.js文件已经经过修改，与jQuery不会产生冲突。

第三步，在模板中包含必要的文件

在main.php文件的<head>部分，添加下面代码：

<link href="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> 
<script src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/jquery/jquery.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/prototype.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.fancybox-1.3.4.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.easing-1.3.pack.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {   
  $("a[rel^=lightbox]").addClass('jquery-lightbox'); //为jQuery添加类  
  $("a[rel^=lightbox]").attr('rel', ''); //移除无关的属性   
  $("a.jquery-lightbox").fancybox({     
      'titlePosition' : 'over',     
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {       
        return '<span id="fancybox-title-over">' + (currentIndex + 1)           
          + ' / ' + currentArray.length + ' ' + title + '</span>';     
      }   
   }); 
}); 
</script>

参考来源[ ]

http://www.impresspages.org/docs/working-with-themes/jquery-instead-of-prototype/

ImpressPages使用手册导航

入门使用:	文件结构 \| 安装 \| 升级 \| 站点迁移 \| 主题 \| URL结构 \| 配置文件 \| 区域和页面 \| Cron设置 \| 常用任务
定制开发:	本地化 \| 区域定制 \| 用户管理 \| 插件开发 \| Ajax使用 \| jQuery替代标准函数库

WIKI使用导航

站长百科导航

站长专题

ImpressPages/jQuery替代标准函数库

参考来源[ ]

ImpressPages使用手册导航