帝国cms 首页 > 帝国cms

帝国cms按照每周星期几调用信息插件的使用方法

图文分享 发布时间:2019-01-02 11:49:16 已被阅读: 10 织梦帝国微信小程序

效果展示

显示如上图,可以进行切换,使用方法:

第一步


请将如下代码放到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();

刷新页面。生成即可。


目录
友情链接:
在线客服
微信号

微信扫码加好友