官方首页 | 无图版 | BBS首页
PJBlog2最新版本下载|升级包(2007.12.23) Bo-Blog V2.1.0 到 PJBlog 2.7 的转换程序 WP 2.3 到 PJ 2.6/2.7 的转换程序 手把手教您在PJForum上传图片
PJBlog技术支持论坛使用问题总索引 手术式讲解视频教程如何制作 PJblog2.7.05终极资源包电驴免费下载 风格使用区-HOT! 凤凰行动开始！
‹‹ 上一主题 | 下一主题 ››
 23 123
发新话题
打印

许多人想要的【日志选项卡】修改方法（ 文章信息、相关日志用CSS效果显示）

本主题由 thomas 于 2007-7-28 23:32 移动
xudong1987

会员

Rank: 3Rank: 3Rank: 3

UID
34245 
帖子
177 
精华
0 
积分
2307 
PJ币
119 元 
阅读权限
10 
在线时间
213 小时 
1# 大 中 小 发表于 2007-6-23 20:38 只看该作者

许多人想要的【日志选项卡】修改方法（ 文章信息、相关日志用CSS效果显示）

效果显示:

这里首先感谢帮我修改代码的 http://www.eternity3.com.cn JAY  里面有更多精彩的内容

这个代码是我找了很久的 但没有相关的文章   感谢JAY白忙中帮我修改了这个代码

实例演示：http://www.eternity3.com.cn/blog/article.asp?id=207  （JAY这么够意思就用他的链接吧）

http://www.jiangnan.ln.cn/blog/ 是我自己的博客~~ 大家有空可以过来踩踩 呵呵

6月24号更新静态模式的修改方法 ~

刚考完A级~~  祈祷我能过吧~~  


看了眼Template目录下article.asp的静态模板文件  果然都差不多 修改方法基本是一致的 这个应该是比动态的好修改
内容少了不少  动态的看下面的cls_article

我把我整个的文件帖出来吧 大家只要做相应的修改覆盖就可以了  上面还有在文章内显示GOOGLE的广告 把广告代码粘贴到里面就可以了
复制内容到剪贴板
代码:
        <%ST(A)%>
  <div id="Content_ContentList" class="content-width"><a name="body" accesskey="B" href="#body"></a>
   <div class="pageContent">
     <div style="float:right;width:180px !important;width:auto">
        <a href="feed.asp?cateID=<$log_CateID$>" target="_blank" title="订阅所有<$Cate_Title$>的日志" accesskey="F"><img border="0" src="images/rss.png" alt="订阅所有<$Cate_Title$>的日志" style="margin-bottom:-1px"/> 订阅</a>
        <$log_Navigation$>
     </div>
         <img src="<$Cate_icon$>" style="margin:0px 2px -4px 0px" alt=""/> <strong><a href="default.asp?cateID=<$log_CateID$>" title="查看所有<$Cate_Title$>的日志"><$Cate_Title$></a></strong> </div>
         <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-Info">
         <div class="InfoOther">字体大小: <a href="javascript:SetFont('12px')" accesskey="1">小</a> <a href="javascript:SetFont('14px')" accesskey="2">中</a> <a href="javascript:SetFont('16px')" accesskey="3">大</a></div>
         <div class="InfoAuthor"><img src="images/weather/hn2_<$log_weather$>.gif" style="margin:0px 2px -6px 0px" alt=""/><img src="images/weather/hn2_t_<$log_weather$>.gif" alt=""/> <img src="images/<$log_level$>.gif" style="margin:0px 2px -1px 0px" alt=""/>
                   <$EditAndDel$>
         </div>
       </div>
        <div id="logPanel" class="Content-body">
            <!-- Google广告代码开始 -->
<!-- Google广告代码结束 -->
                  <$ArticleContent$>
       <br/><br/>
         <br/>
         </div>
         <div class="Content-body">
                             <script type="text/javascript" language="javascript">
        var displayContent = null;
        var displayItem = null;  
        function ShowArticleInfo(id){
          if (displayContent != null){
        displayContent.style.display = "none";
        displayItem.className = "unselected";
       }
       displayContent = document.getElementById("articleInfoItem" + id);
       displayContent.style.display = "block";
       displayItem = document.getElementById("articleInfoMenu" + id);
       displayItem.className = "selected";   
        }
        </script>
        <style type="text/css">
        .tab{
        list-style:none;
        margin:0px;
        padding:0px;
        float:left;
        padding-top:2px;
        }
        .tab li{
        float:left;
        margin-left:3px;        
        padding:0px 5px;
        border:1px solid #CCCCCC;
        border-bottom:none;
        line-height:20px;
        text-align:center;
        }
        .tab .unselected{
        background:#EEEDEA;
        height:20px;
        }
        .tab .selected{
        background:#EFF9D0;
        height:23px;
        line-height:23px;
        margin-top:-2px;
        margin-bottom:-1px;        
        }
        .articleInfoItem{
        padding:5px;
        background:#EFF9D0;
        clear:both;
        display:none;
        border:1px solid #CCCCCC;
        }
        </style>
        
         <div id="articleInfoMenu">
      <ul class="tab">
        <li id="articleInfoMenu1" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(1)">日志信息</a></li>
        <li id="articleInfoMenu2" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(2)">标签2</a></li>
        <li id="articleInfoMenu3" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(3)">标签3</a></li>
        <li id="articleInfoMenu4" class="unselected">
                       <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(4)">标签4</a></li>
        <li id="articleInfoMenu5" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(5)">标签5</a></li>
        <li id="articleInfoMenu6" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(6)">标签6</a></li>
        </ul>
        <div id="articleInfoItem1" class="articleInfoItem">
     <$log_Modify$>
       <img src="images/From.gif" style="margin:0px 2px -4px 0px" alt=""/><strong>文章来自:</strong> <a href="<$log_FromUrl$>" target="_blank"><$log_From$></a><br/>
       <img src="images/icon_trackback.gif" style="margin:0px 2px -4px 0px" alt=""/><strong>引用通告地址:</strong> <a href="<$trackback$>" target="_blank"><$trackback$></a><br/>
          <img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>Tags:</strong> <$log_tag$><br/>
<!--Add By WBC -->
<img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>相关日志:</strong><br/>
<div class="Content-body" id="wbc_tag"></div><br/>
<!--End  By WBC -->
        </div>
         <div id="articleInfoItem2" class="articleInfoItem"></div>
                        <div id="articleInfoItem3" class="articleInfoItem"></div>
                        <div id="articleInfoItem4" class="articleInfoItem"></div>
                        <div id="articleInfoItem5" class="articleInfoItem"></div>
                        <div id="articleInfoItem6" class="articleInfoItem"></div>
      </div>
   
                         <script type="text/javascript">
        ShowArticleInfo(1);
        </script>
         </div>
         <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div>评论: <$log_CommNums$></a> | <a href="<$trackback$>" target="_blank">引用: <$log_QuoteNums$></a> | 查看次数: <$log_ViewNums$>
   </div></div></div>













以下的修改是动态的修改：修改class 目录下的cls_article.asp的文件   

修改代码部分：{{{{{

从这段代码的下面开始
复制内容到剪贴板
代码:
<%
         keyword=CheckStr(Request.QueryString("keyword"))
      if log_ViewArr(10,0)=1 then
       response.write (highlight(UnCheckStr(UBBCode(HtmlEncode(log_ViewArr(8,0)),mid(log_ViewArr(11,0),1,1),mid(log_ViewArr(11,0),2,1),mid(log_ViewArr(11,0),3,1),mid(log_ViewArr(11,0),4,1),mid(log_ViewArr(11,0),5,1))),keyword))
      else
       response.write (highlight(UnCheckStr(log_ViewArr(8,0)),keyword))
      end if %>
        <br/><br/>
一直到
复制内容到剪贴板
代码:
'*******************************************
'  显示日志评论内容
'*******************************************
结束

修改中间部分的代码即可实现

我自己的中间部分由于加了WBC的插件  需要修改部分都贴出来吧 大家可以参考
复制内容到剪贴板
代码:
        
        <div class="Content-body">
         <%if len(log_ViewArr(16,0))>0 then response.write (log_ViewArr(16,0)&"<br/>")%>
      <img src="images/From.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>文章来自:</strong> <a href="<%=log_ViewArr(17,0)%>" target="_blank"><%=log_ViewArr(18,0)%></a><br/>
      <img src="images/icon_trackback.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>引用通告地址:</strong> <a href="<%=(SiteURL&"trackback.asp?tbID="&id)%>" target="_blank"><%=(SiteURL&"trackback.asp?tbID="&id)%></a><br/>
         <%dim getTag
      set getTag=new tag
      %>
       <img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>Tags:</strong> <%=getTag.filterHTML(log_ViewArr(19,0))%><br/>
<!--Add By WBC -->
<img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>相关日志:</strong><br/>
<div class="Content-body" id="wbc_tag"></div><br/>
<!--End  By WBC -->
        </div>
        <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div>评论: <%=log_ViewArr(12,0)%> | 引用: <%=log_ViewArr(13,0)%> | 查看次数: <%=log_ViewArr(4,0)%>
        </div></div>
        </div>
<%                    set getTag=nothing
    ShowComm LogID,comDesc,log_ViewArr(7,0) '显示评论内容
end sub
}}}}}}}


以下是修改后的部分即可实现所需效果：
复制内容到剪贴板
代码:
        <div class="Content-body">
        
        
                <script type="text/javascript" language="javascript">
        var displayContent = null;
        var displayItem = null;  
        function ShowArticleInfo(id){
          if (displayContent != null){
        displayContent.style.display = "none";
        displayItem.className = "unselected";
       }
       displayContent = document.getElementById("articleInfoItem" + id);
       displayContent.style.display = "block";
       displayItem = document.getElementById("articleInfoMenu" + id);
       displayItem.className = "selected";   
        }
        </script>
        <style type="text/css">
        .tab{
        list-style:none;
        margin:0px;
        padding:0px;
        float:left;
        padding-top:2px;
        }
        .tab li{
        float:left;
        margin-left:3px;        
        padding:0px 5px;
        border:1px solid #CCCCCC;
        border-bottom:none;
        line-height:20px;
        text-align:center;
        }
        .tab .unselected{
        background:#EEEDEA;
        height:20px;
        }
        .tab .selected{
        background:#EFF9D0;
        height:23px;
        line-height:23px;
        margin-top:-2px;
        margin-bottom:-1px;        
        }
        .articleInfoItem{
        padding:5px;
        background:#EFF9D0;
        clear:both;
        display:none;
        border:1px solid #CCCCCC;
        }
        </style>
        
         <div id="articleInfoMenu">
      <ul class="tab">
        <li id="articleInfoMenu1" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(1)">日志信息</a></li>
        <li id="articleInfoMenu2" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(2)">标签2</a></li>
        <li id="articleInfoMenu3" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(3)">标签3</a></li>
        <li id="articleInfoMenu4" class="unselected">
                       <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(4)">标签4</a></li>
        <li id="articleInfoMenu5" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(5)">标签5</a></li>
        <li id="articleInfoMenu6" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(6)">标签6</a></li>
        </ul>
        <div id="articleInfoItem1" class="articleInfoItem">
        <%if len(log_ViewArr(16,0))>0 then response.write (log_ViewArr(16,0)&"<br/>")%>
      <img src="images/From.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>文章来自:</strong> <a href="<%=log_ViewArr(17,0)%>" target="_blank"><%=log_ViewArr(18,0)%></a><br/>
      <img src="images/icon_trackback.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>引用通告地址:</strong> <a href="<%=(SiteURL&"trackback.asp?tbID="&id)%>" target="_blank"><%=(SiteURL&"trackback.asp?tbID="&id)%></a><br/>
         <%dim getTag
      set getTag=new tag
      %>
       <img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>Tags:</strong> <%=getTag.filterHTML(log_ViewArr(19,0))%><br/>
       <!--Add By WBC -->
<img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>相关日志:</strong><br/>
<div class="Content-body" id="wbc_tag"></div><br/>
<!--End  By WBC -->
        </div>
         <div id="articleInfoItem2" class="articleInfoItem"></div>
                        <div id="articleInfoItem3" class="articleInfoItem"></div>
                        <div id="articleInfoItem4" class="articleInfoItem"></div>
                        <div id="articleInfoItem5" class="articleInfoItem"></div>
                        <div id="articleInfoItem6" class="articleInfoItem"></div>
      </div>
   
                         <script type="text/javascript">
        ShowArticleInfo(1);
        </script>      
        
         
        </div>
        <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div>评论: <%=log_ViewArr(12,0)%> | 引用: <%=log_ViewArr(13,0)%> | 查看次数: <%=log_ViewArr(4,0)%>
        </div></div>
        </div>
<%                    set getTag=nothing
    ShowComm LogID,comDesc,log_ViewArr(7,0) '显示评论内容
end sub
最后说明以下各个部分的作用：
复制内容到剪贴板
代码:
<script type="text/javascript" language="javascript">
        var displayContent = null;
        var displayItem = null;  
        function ShowArticleInfo(id){
          if (displayContent != null){
        displayContent.style.display = "none";
        displayItem.className = "unselected";
       }
       displayContent = document.getElementById("articleInfoItem" + id);
       displayContent.style.display = "block";
       displayItem = document.getElementById("articleInfoMenu" + id);
       displayItem.className = "selected";   
        }
        </script>
        <style type="text/css">
        .tab{
        list-style:none;
        margin:0px;
        padding:0px;
        float:left;
        padding-top:2px;
        }
        .tab li{
        float:left;
        margin-left:3px;        
        padding:0px 5px;
        border:1px solid #CCCCCC;
        border-bottom:none;
        line-height:20px;
        text-align:center;
        }
        .tab .unselected{
        background:#EEEDEA;
        height:20px;
        }
        .tab .selected{
        background:#EFF9D0;
        height:23px;
        line-height:23px;
        margin-top:-2px;
        margin-bottom:-1px;        
        }
        .articleInfoItem{
        padding:5px;
        background:#EFF9D0;
        clear:both;
        display:none;
        border:1px solid #CCCCCC;
        }
        </style>

上面是实现css+js部分 css样式可以根据自己的需要修改

复制内容到剪贴板
代码:
<div id="articleInfoMenu">
      <ul class="tab">
        <li id="articleInfoMenu1" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(1)">日志信息</a></li>
        <li id="articleInfoMenu2" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(2)">标签2</a></li>
        <li id="articleInfoMenu3" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(3)">标签3</a></li>
        <li id="articleInfoMenu4" class="unselected">
                       <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(4)">标签4</a></li>
        <li id="articleInfoMenu5" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(5)">标签5</a></li>
        <li id="articleInfoMenu6" class="unselected">
        <a href="javascript:void(0);" onmouseover="javascript:ShowArticleInfo(6)">标签6</a></li>
        </ul>
以上部分为标题列表
复制内容到剪贴板
代码:
<div id="articleInfoItem1" class="articleInfoItem">
        <%if len(log_ViewArr(16,0))>0 then response.write (log_ViewArr(16,0)&"<br/>")%>
      <img src="images/From.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>文章来自:</strong> <a href="<%=log_ViewArr(17,0)%>" target="_blank"><%=log_ViewArr(18,0)%></a><br/>
      <img src="images/icon_trackback.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>引用通告地址:</strong> <a href="<%=(SiteURL&"trackback.asp?tbID="&id)%>" target="_blank"><%=(SiteURL&"trackback.asp?tbID="&id)%></a><br/>
         <%dim getTag
      set getTag=new tag
      %>
       <img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>Tags:</strong> <%=getTag.filterHTML(log_ViewArr(19,0))%><br/>
       <!--Add By WBC -->
<img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>相关日志:</strong><br/>
<div class="Content-body" id="wbc_tag"></div><br/>
<!--End  By WBC -->
        </div>
         <div id="articleInfoItem2" class="articleInfoItem"></div>
                        <div id="articleInfoItem3" class="articleInfoItem"></div>
                        <div id="articleInfoItem4" class="articleInfoItem"></div>
                        <div id="articleInfoItem5" class="articleInfoItem"></div>
                        <div id="articleInfoItem6" class="articleInfoItem"></div>
      </div>


以上代码在<div>标签里的对应的是主题的内容  需要实现的内容删剪进去即可


复制内容到剪贴板
代码:
                        


<script type="text/javascript">
        ShowArticleInfo(1);
        </script>      
最后这个JS代码的作用是默认显示为第一个标签



调试代码的时候记得先备份~
A级考完了··  代码修改完毕~~

[ 本帖最后由 xudong1987 于 2007-6-24 12:01 编辑 ]
附件: 您所在的用户组无法下载或查看附件

TOP

lostindream

会员

Rank: 3Rank: 3Rank: 3

迷失于一场幻梦......

UID
34987 
帖子
913 
精华
0 
积分
6734 
PJ币
1592 元 
阅读权限
10 
在线时间
582 小时 
2# 大 中 小 发表于 2007-6-23 20:45 只看该作者
呵呵，日志信息选项卡。说清楚些。沙发支持。
进涅槃之畔

TOP

lostindream

会员

Rank: 3Rank: 3Rank: 3

迷失于一场幻梦......

UID
34987 
帖子
913 
精华
0 
积分
6734 
PJ币
1592 元 
阅读权限
10 
在线时间
582 小时 
3# 大 中 小 发表于 2007-6-23 20:47 只看该作者
是JAY帮改的啊，呵呵，JAY就是够意思

你给个你的演示地址啊，多好的AD机会不会利用

[ 本帖最后由 iversolo 于 2007-6-23 20:50 编辑 ]
进涅槃之畔

TOP

xudong1987

会员

Rank: 3Rank: 3Rank: 3

UID
34245 
帖子
177 
精华
0 
积分
2307 
PJ币
119 元 
阅读权限
10 
在线时间
213 小时 
4# 大 中 小 发表于 2007-6-23 20:54 只看该作者
恩~~  多谢了~~   这就改改

TOP

zhy0493

会员

Rank: 3Rank: 3Rank: 3

UID
22117 
帖子
294 
精华
0 
积分
2654 
PJ币
409 元 
阅读权限
10 
在线时间
236 小时 
5# 大 中 小 发表于 2007-6-23 21:21 只看该作者
挺好，就是改的太多了
http://ord.hk

TOP

host01

会员

Rank: 3Rank: 3Rank: 3

www.okvery.cn

UID
41068 
帖子
678 
精华
0 
积分
1878 
PJ币
1280 元 
阅读权限
10 
在线时间
120 小时 
6# 大 中 小 发表于 2007-6-23 21:25 只看该作者
头都看晕了哦 还是不改！出问题了麻烦哦
随心生活
我的博客我做主!
live30.cn Google提供的广告

TOP

ice428

会员

Rank: 3Rank: 3Rank: 3

UID
22939 
帖子
149 
精华
0 
积分
1679 
PJ币
33 元 
阅读权限
10 
在线时间
153 小时 
7# 大 中 小 发表于 2007-6-23 21:57 只看该作者
你不能把字搞小点吗？
本来代码就多。。还搞那么大。。。
不过还是谢谢你带来的好东西
http://www.is28.cn
PJ交流群：16936782
网络博客，域名+500M空间只要200RMB。
联系QQ105871875

TOP

moto137

会员

Rank: 3Rank: 3Rank: 3

UID
44533 
帖子
43 
精华
0 
积分
303 
PJ币
59 元 
阅读权限
10 
在线时间
26 小时 
8# 大 中 小 发表于 2007-6-23 22:23 只看该作者
好多代码啊。。。。
找友情连接

TOP

xudong1987

会员

Rank: 3Rank: 3Rank: 3

UID
34245 
帖子
177 
精华
0 
积分
2307 
PJ币
119 元 
阅读权限
10 
在线时间
213 小时 
9# 大 中 小 发表于 2007-6-23 23:40 只看该作者
引用:
原帖由 ice428 于 2007-6-23 21:57 发表
你不能把字搞小点吗？
本来代码就多。。还搞那么大。。。
不过还是谢谢你带来的好东西

恩 知道了~~   新手没经验~~  谢谢啦

TOP

xudong1987

会员

Rank: 3Rank: 3Rank: 3

UID
34245 
帖子
177 
精华
0 
积分
2307 
PJ币
119 元 
阅读权限
10 
在线时间
213 小时 
10# 大 中 小 发表于 2007-6-24 19:35 只看该作者
哦了 静态的也更新了

TOP

‹‹ 上一主题 | 下一主题 ››
 23 123
发新话题