Emlog热门随机文章Tab选项卡切换

X-PcMobi主题的热门文章/随机文章Tab选项卡切换基本完成,热门文章是现在emlog常用的来自蓝叶博客的30天按点击率排行文章,随机文章是emlog自带的,两者分别起着推荐热门吸引读者的文章,增加旧文章的曝光率的作用。利用选项卡的方式,可以把两者结合起来。

实现代码主要参考自tab选项卡新闻列表切换效果代码,有兴趣可以进去下载测试。这里博主笑忘书写下如何用在emlog文章各种榜单的切换。

1.首先打开模板的module.php文件,在后面加入整合后的热门文章和随机文章代码:
<?php
//30天按点击率排行文章
function hotlog(){
$db = MySql::getInstance();
$time = time();
$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 30*24*60*60 ORDER BY `views` DESC LIMIT 0,8";
$list = $db->query($sql);
$i = 0;
?>

<div id="sidelog">

<h3 class="up" id="lognav1" onclick="tab('log',1,2);">热门文章</h3>
<div id="log1" class="block"><ul>
<?php while($row = $db->fetch_array($list)){ 
$i++;
?>
<li><a href="http://eps.gs/go.php?url=<?php echo BLOG_URL; ?>?post=<?php echo $row['gid']; ?>" title="<?php echo $row['title']; ?>">
<?php if($i==1){?><em class="one"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="two"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="three"><?php echo $i;?></em>
<?php }else{ ?><em class="SoSo"><?php echo $i;?></em>
<?php }?>
<?php echo $row['title']; ?></a></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php
//widget:随机文章
function random_log(){
	$Log_Model = new Log_Model();
	$randLogs = $Log_Model->getRandLog(8);$i=1;
?>
<h3 id="lognav2" onclick="tab('log',2,2);">随机文章</h3>
<div class="clear"></div>
<div id="log2"><ul>
<?php foreach($randLogs as $value): ?>
<li><a href="http://eps.gs/go.php?url=<?php echo Url::log($value['gid']); ?>">
<?php if($i==1){?><em class="one"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="two"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="three"><?php echo $i;?></em>
<?php }else{ ?><em class="SoSo"><?php echo $i;?></em>
<?php }?>
<?php echo $value['title']; ?></a></li>
<?php $i++; endforeach; ?>
</ul>
</div></div>
<?php }?>

修改显示文章数(代码中的8),$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 30*24*60*60 ORDER BY `views` DESC LIMIT 0,8"和$randLogs = $Log_Model->getRandLog(8);。

2.接着在side.php里加入调用代码:
<?php hotlog();?><!--热门文章-->
<?php random_log();?><!--随机文章-->

3.在footer.php接入相应的JS:
<script>
function tab(name,num,n){
for(i = 1;i <= n;i++){
var menu = document.getElementById(name+"nav"+i);
var cont = document.getElementById(name+i);

menu.className = i == num ? "up" : "";
if(i == num){
cont.style.display = "block";
} 
else{
cont.style.display = "none";
}
}}
</script>

原理是给每个选项卡设定一个含1到n的数字的ID,逐一检索,将选择的列表打开,将未选择的关闭。

Emlog热门随机文章Tab选项卡切换

4.本站使用的CSS,还不够完善,请自行修改:
#sidelog{
width:100%;height:23.0em; position:relative;margin:0.5em 0;padding:0;
}
#sidelog ul{
list-style:none;margin:0;padding:0;
}
#sidelog li{
margin:0;
}
#sidelog div {
position:absolute;top:2.8em; left:0; width:100%;height:20em;
}
#sidelog div {
display:none;
}
#sidelog h3{
float:left;width:50%;cursor:pointer; text-align:center;font-family:Microsoft YaHei;
margin:0;display:inline-block
}
#sidelog .up {
background:#f5f5f5;color:#000;box-shadow:1px 0 5px #bbb 
}
#sidelog .block{
display:block;
}
#sidelog li a{
display:block;padding:;border-bottom:1px solid #ccc;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#sidelog li em{
padding:0.3em 0.5em;border-radius:5px;
color:#fff;margin-right:0.5em;border-radius:2px;box-shadow:1px 1px 5px #ccc;
}
#sidelog .one{background-color:#e04620}
#sidelog .two{background-color:#00ccff}
#sidelog .three{background-color:#03bf03}
#sidelog .SoSo{background-color:#aaaaaa}

放在main.css文件里即可


感谢作者:笑忘书的投稿,欢迎大家投稿: http://likinming.com/post-87.html


版权所有:《博客之家
文章标题:《Emlog热门随机文章Tab选项卡切换
除非注明,文章均为 《博客之家》 原创
转载请注明本文短网址:https://bk.likinming.com/post-546.html  [生成短网址]

日期:2015年07月15日 星期三   分类:好文分享   浏览(19118)   评论(10)
本文已经被百度收录,点击查看详情
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。免费发布信息

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

自动获取QQ

昵称

邮箱

网址

7楼、太原SEO [回复该留言]
2016-01-28 15:59
没事转转
6楼、北京seo [回复该留言]
2015-07-15 20:45
前来拜读,有些日子没来了。
5楼、淘米纪 [回复该留言]
2015-07-15 18:19
技术性很强,值得学习
4楼、IT疯狂女 [回复该留言]
2015-07-15 10:08
从来都没有整过这东东
3楼、笑忘书 [回复该留言]
2015-07-15 08:48
终于上头条了(诶,这话不应该是汪峰说的吗)
不过李明兄很少写了
2楼、姜辰 [回复该留言]
2015-07-15 07:37
emlog这就一个海洋,笑忘书就是海洋的挖掘者···李明就是海洋的搬运工,我们就是海岸的菜鸟····
李明 [回复该留言]
2015-07-15 07:58
@姜辰:李明是个苦迫的搬运工。
姜辰 [回复该留言]
2015-07-15 08:05
@李明:这样说真的合适吗?
笑忘书 [回复该留言]
2015-07-15 08:50
@姜辰:开挖掘机的小菜鸟
1楼、wys [回复该留言]
2015-07-15 06:32
EMLOG就是一个海洋,值得折腾的东西蛮多的。

网站收录提交

  • 名称:
  • 网址:

网址统计

  • 收录网址:993 个
  • 发布文章:2532 条
  • 本站运行:5年7月26天
Copyright © 2012 - 2018 by 李明关于本站免责声明本站下载站点地图sitemap广告联系