帝国cms按照每周星期几调用信息插件的使用方法
显示如上图,可以进行切换,使用方法:第一步,请将如下代码放到e/class/userfun.php中。function format_weeklist_tab(){//周几Tab输出 //生成一个7天的数组 $wlist=array(&
效果展示
显示如上图,可以进行切换,使用方法:
第一步
请将如下代码放到e/class/userfun.php中。
function format_weeklist_tab(){//周几Tab输出 //生成一个7天的数组 $wlist=array('日','一','二','三','四','五','六'); foreach($wlist as $kk=>$vv){ echo '<a href="javascript:;">周'.$vv.'</a>'; } } function format_weeklist_tabc(){ $ta=range(0,6); $str=''; foreach($ta as $tk=>$tv){ $str.=today_news_list($tv); } echo $str; } //查询当前日期的信息 function today_news_list($today=0)//其中today代表当前的日期 { global $empire,$dbtbpre; $tbname='ecms_news';//从不同的表中读取不同的记录 $sqlstr='select * from '.$dbtbpre.$tbname.' where FROM_UNIXTIME(newstime,"%w")='.$today.' order by newstime desc limit 0,9'; $query=$empire->query($sqlstr); $str='<div class="tabc_item"><ul>'; while($row=$empire->fetch($query)) { $str.='<li><a href="'.sys_ReturnBqTitleLink($row).'" target="_blank">'.esub($row['title'],60).'</a></li>'; } $str.='</ul></div>'; return $str; }
第二步、
将所用到的css,放到合适的位置,并引用,这个可以根据个人喜好来做。可以单独放,也可以内连放进来,下面是css代码:
/*index tab style start*/ .weeklist_tablist{display: flex;align-items: center;justify-content: space-around;text-align: center;margin-bottom:16px;} .weeklist_tablist a{height:26px;line-height:26px;font-size:13px;display:inline-block;flex:1;color:#666666;} .weeklist_tablist a.current{color:#780000;background-color: #f1f1f1;} .tabc_item{display: none;} .tabc_item ul li{text-align: left;height:32px;line-height:32px;overflow: hidden;} .tabc_item ul li a{font-size:14px;line-height:32px;height:32px;display: inline;color:#454545;} /*index tab style end*/
没有做过多的修饰。样式好不好看自己怎么操作即可。
第三步、
在需要使用的地方,调用如下代码:
<!-- 调用每周的信息开始--> <div class="weeklist_container"> <div class="weeklist_tablist"> <?=format_weeklist_tab()?> </div> <div class="weeklist_clist"> <?=format_weeklist_tabc()?> </div> </div> <!-- 调用每周的信息结束-->
第四步
、书写js特效。写上如下代码:
$(".weeklist_tablist a").bind({ "mouseenter": function () { $(".weeklist_tablist a").removeClass("current"); $(this).addClass("current"); var index=$(this).index(); $(".weeklist_clist .tabc_item").hide(); $(".weeklist_clist .tabc_item").eq(index).show(); }, "mouseout": function () { } }); //tab 切换结束 var today=new Date().getDay();//得到今天是周几, $(".weeklist_tablist a").eq(today).addClass("current"); $(".weeklist_clist .tabc_item").eq(today).show();
刷新页面。生成即可。