官方首页 | 无图版 | BBS首页
PJBlog3 2.8.4.136 新版发布 下载|升级(2008.7.26) 大话PJ3 | PJ3评测反馈 | PJ3发展建议 PJ纪念版T-shirt设计大赛投票结束大奖揭晓! PJ3内测团队主创人员身份,性格,特点吐血大曝光
PJBlog技术支持论坛使用问题总索引 PJ-Blog 3 斑竹日志 【独家】我使用过的三种空间,与客服的精彩故事 Z-Blog,Wordpress,Bo-Blog转换到PJBlog
发新话题
打印

[已解决] 添加一个"显示/隐藏侧边栏"的开关

本主题由 无心 于 2008-3-25 10:09 关闭

添加一个"显示/隐藏侧边栏"的开关

如题。
首先声明,我不是原创,我也是在论坛上看了大家的帖子,综合了一下,找到的最终解决方法:




主要修改四个文件:
common\common.js
Temblate\Article.asp
class\cls_article.asp
class\cls_default.asp


演示地址: http://www.yangjun.cn


主要添加的代码:
复制内容到剪贴板
代码:
<a href="#" onclick="hide(sidebar,mainContent);" id="a1">关闭侧边栏</a><a href="#" onclick="show(sidebar,mainContent);" id="a2" style="display:none;">显示侧边栏</a>
具体修改过程:

一、common\common.js

在文件的开始处添加如下代码:
复制内容到剪贴板
代码:
//侧边栏开关显示
//Author:iiduce
function hide(id1,id2)
{
    id1.style.display = "none";
    id2.style.width = "auto";
    a1.style.display = "none";
    a2.style.display = "";
}
function show(id1,id2)
{
    id1.style.display = "";
    id2.style.width = "100%";
    a1.style.display = "";
    a2.style.display = "none";
}
二、Temblate\Article.asp
找到如下代码:
复制内容到剪贴板
代码:
<div class="Content">
<div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div>
<h1 class="ContentTitle"><strong><$log_Title$></strong><$log_hiddenIcon$></h1>
<h2 class="ContentAuthor">作者:<$log_Author$> 日期:<$log_PostTime$></h2></div>
替换成:
复制内容到剪贴板
代码:
<div class="Content">
<div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div><div style="float:left;width:auto"><h1 class="ContentTitle"><strong><$log_Title$></strong><$log_hiddenIcon$></h1>
<h2 class="ContentAuthor">作者:<$log_Author$> 日期:<$log_PostTime$></div><div style="float:right;width:auto"><a href="#" onclick="hide(sidebar,mainContent);" id="a1">关闭侧边栏<a href="#" onclick="show(sidebar,mainContent);" id="a2" style="display:none;">显示侧边栏</a></div></h2></div>
三、class\cls_article.asp
找到如下代码:
复制内容到剪贴板
代码:
<div class="Content">
<div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div>
<h1 class="ContentTitle"><strong><%=HtmlEncode(log_ViewArr(2,0))%></strong></h1>
<h2 class="ContentAuthor">作者:<%=log_ViewArr(5,0)%> 日期:<%=DateToStr(log_ViewArr(9,0),"Y-m-d H:I:S")%></h2></div>
替换成:
复制内容到剪贴板
代码:
<div class="Content">
<div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div>
<div style="float:left;width:auto"><h1 class="ContentTitle"><strong><%=HtmlEncode(log_ViewArr(2,0))%></strong></h1>
<h2 class="ContentAuthor">作者:<%=log_ViewArr(5,0)%> 日期:<%=DateToStr(log_ViewArr(9,0),"Y-m-d H:I:S")%></div><div style="float:right;width:auto"><a href="#" onclick="hide(sidebar,mainContent);" id="a1">关闭侧边栏<a href="#" onclick="show(sidebar,mainContent);" id="a2" style="display:none;">显示侧边栏</a></div></h2></div>
四、class\cls_default.asp

找到如下代码:
复制内容到剪贴板
代码:
<div class="pageContent" style="text-align:Right;overflow:hidden;height:18px;line-height:140%"><span style="float:left"><%=CT%></span><%=MultiPage(Log_Num,blogPerPage,CurPage,Url_Add,"","floateft")%> 预览模式: <a href="<%=Url_Add%>distype=normal" accesskey="1">普通</a> | <a href="<%=Url_Add%>distype=list" accesskey="2">列表</a></div>
替换成:
复制内容到剪贴板
代码:
<div class="pageContent" style="text-align:Right;overflow:hidden;height:18px;line-height:140%"><span style="float:left"><%=CT%></span><%=MultiPage(Log_Num,blogPerPage,CurPage,Url_Add,"","floateft")%> 预览模式: <a href="<%=Url_Add%>distype=normal" accesskey="1">普通</a> | <a href="<%=Url_Add%>distype=list" accesskey="2">列表</a> | <a href="#" onclick="hide(sidebar,mainContent);" id="a1">关闭侧边栏<a href="#" onclick="show(sidebar,mainContent);" id="a2" style="display:none;">显示侧边栏</a></div>
PS:
1. 如果在后台站点基本设置中选中静态日志模式,则只有日志页可显示侧边栏开关,首页不能显示。如果未选中则二者皆可。
2. 侧边栏开关的显示位置可以根据你自己的喜好在程序代码的相应位置中添加

最后还是把修改过的文件打包送上,老规矩,还是提醒您,事先备份。我提供的文件只是做个参考。


PS:

如果按上述步骤添加完侧边栏后,发现有些模板不适合,比如隐藏侧边栏后,主内容框居中了。
则应该修改相应模板文件夹下的layout.css文件



把“/*---主内容--*/”代码的最后一行换成:
复制内容到剪贴板
代码:
.content-width{margin:auto;width:100%;}/*--主内容元素的全局宽度--*/
[ 本帖最后由 yangjun 于 2007-12-11 02:50 编辑 ]
附件: 您所在的用户组无法下载或查看附件
靠近我温暖你
http://www.yangjun.cn

TOP

顺便再问一下:

为什么我有的模板在隐藏了侧边栏以后,日志的主体内容框都移到中间了呢?而其他的模板都是两端对齐的,我觉得应该是修改 layout.css ,但不知道具体修改哪些代码,有人懂吗?
靠近我温暖你
http://www.yangjun.cn

TOP

Oh,yeah,搞定!

修改相应模板文件夹下的layout.css文件

把“/*---主内容--*/”代码的最后一行换成:
复制内容到剪贴板
代码:
.content-width{margin:auto;width:100%;}/*--主内容元素的全局宽度--*/
靠近我温暖你
http://www.yangjun.cn

TOP

支持你研究~
但是在PJ里这种方法不能应对所有的皮
很多皮内容部分都限定死了 达不到最好的效果
给你个精华
欢迎你继续研究

[ 本帖最后由 52077 于 2007-12-11 13:20 编辑 ]

TOP

嘿嘿,谢谢版主。
我现在装了6张皮肤,有两张在添加了这个开关后,出现不适应的情况,但按照我后来说的方法都可以解决,而且很完美
靠近我温暖你
http://www.yangjun.cn

TOP

我那个皮就不行~
我的内容部分限定死了
隐藏侧边的时候内容不能被拉大~
而且用你的不能完美恢复侧边

我一直在用很早以前自己弄的~
相对于我来说算OK的了

TOP

看来不错 试一下

TOP

显示在那?
福儿工作室:WWW.FVLL.CN
★亿信网络:WWW.IDC19.COM   推荐虚拟主机 100M 25元/年 1G 88元/年

TOP

发新话题