站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
ImpressPages/jQuery替代标准函数库
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
{{ImpressPages top}} 本条目旨在介绍怎样将[[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'''文件的底部找到下面的代码,并且将其删除: <pre> <!-- 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 --> </pre> *'''第二步,添加jQuery和Fancybox文件''' 点击下面的链接,下载文档,然后解压至主题目录'''ip_theme/ip_default'''中。 [http://www.impresspages.org/file/jquery_lightbox.zip jQuery lightbox(.zip)] 最终的文件夹层次结构如下: **fancybox ***... ***许多其他文件 ***... **... **main.php **... **prototype.js **... '''注意:''' 在该文件夹结构中我们看到,有'''prototype.js'''文件,这个本是默认的标准函数库中使用的,在这里继续使用,是因为ImpressPages核心的功能还需要使用一些prototype库(默认的标准函数库)中的函数,而这个新的'''prototype.js'''文件已经经过修改,与jQuery不会产生冲突。 *'''第三步,在模板中包含必要的文件''' 在'''main.php'''文件的<head>部分,添加下面代码: <pre> <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> </pre> ==参考来源== *http://www.impresspages.org/docs/working-with-themes/jquery-instead-of-prototype/ {{ImpressPages}} [[category:ImpressPages]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:ImpressPages
(
编辑
)
模板:ImpressPages top
(
编辑
)