MD,想这个标题想了我十几分钟,最后还是写了这傻不拉唧的标题,哎,谁让我没文学细胞呢。

Box.net 这个网盘大家应该不是很陌生,曾经风靡一时的网盘,它漂亮的 WEB2.0 界面非常吸引我,只可惜好景不常,就被伟大的“功夫王”给XXOO了。后来 Box 也重新注册了一个新的域名 boxcn.net ,专门给国人使用,但是用着boxcn心里总感觉和 box 原版的有点区别,于是很长一段时间都没有再去box。直到前段时间,在林木木的博客中看到了一篇文章,用jQuery读取 Box 文件的外链,于是我好奇的输入 box.net ,发现可以访问了,“功夫王”居然把 box 给释放了。

前话就这些了,下面进入主题,首先大家看看这个页面,这个就是读取 box 文件外链做的展示页面,其制作方法大家请看林木木写的《制作 Box.net 文件外链展示页面》,我这里要做的就是把这个页面嵌套到博客中来,效果大家点击导航栏中的“网盘”。是不是很炫啊?呵呵,下面开始教大家做这个效果。

第一步

添加Highslide JS如果你博客安装了Highslide4WPAuto Highslide的话,那么就不需要再添加Highslide JS了,只需要修改一下这个插件的代码即可。

分别编辑插件下的highslide4wp.phpauto-highslide.php文件,找到:hs.outlineType = "rounded-white";在下面加入一行:hs.wrapperClassName = "draggable-header";再找到:highslide/highslide-with-html.packed.js修改成:highslide/highslide-full.packed.js再把highslide-full.packed.js上传至插件中的highslide目录下,highslide-with-html.packed.js文件可以删除了。

以上是安装了Highslide4WPAuto Highslide的修改方法,没有安装这两个插件的朋友可以按照如下方法进行。

首先下载Highslide JS,把highslide文件夹中除了highslide.cssgraphics文件夹highslide-full.packed.js三个,其他的都删除,然后把highslide上传至某处地方,一般是wp-content/plugins下。

再打开主题中的头部文件header.php,插入如下代码:<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />其中那三个路径的地方,一定要写正确。

还是建议使用上面两个插件,推荐Auto Highslide

第二步

导航栏中添加网盘的超链接 不同主题的添加方法不同,下面以我的主题iNove为例,打开主题下templates/header.php文件,找到: <ul id="menus"></ul>在这个idmenus的无序列表中,插入一个 li :<li class="page-item-box"><a class="mybox" title="<?php _e('网盘', 'inove'); ?>" href="/box"><php _e('网盘', 'inove'); ?></a></li>`这样,你的导航栏中就多了一个“网盘”的选项。

第三步

添加iframe效果,在你的Query应用js文件中,添加如下代码:

$("#navigation .mybox").click(function() {
    return hs.htmlExpand(this, {
        objectType: 'iframe',//打开类型,这个不管
        align: 'center',//打开位置,默认居中就可以了
        headingText: '网盘',//窗口标题
        width: 670,//打开时的宽度
        height: 460,//打开时的高度
        minWidth: 680//最小宽度
    })
});

PS:其他的参数大家可以参考Highslide JS API Reference,比如最小高度等等。怎么应用jQuery就不说了,已经讲过很多次,实在不会的可以去问Google老师。

到这里这个效果就做完了,有什么不懂的大家回复交流。