ImpressPages/jQuery替代标准函数库

来自站长百科
跳转至： 导航、​ 搜索

ImpressPages | 入门使用 | 定制开发

本条目旨在介绍怎样将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>


参考来源[ ]

ImpressPages使用手册导航

入门使用:

文件结构 | 安装 | 升级 | 站点迁移 | 主题 | URL结构 | 配置文件 | 区域和页面 | Cron设置 | 常用任务

定制开发:

本地化 | 区域定制 | 用户管理 | 插件开发 | Ajax使用 | jQuery替代标准函数库
取自“https://www.zzbaike.com/wiki/ImpressPages/jQuery替代标准函数库?oldid=105058”