Sometimes there are several news or message prompts, and you can use absolute positioning to achieve the effect.
What is the principle?
1. Get the number or status.
Copy code code as follows:
function getnewscount(){
$time = date("Ymd",strtotime("-3 day"));
$where["News.checked = ?"] = array("val"=>1 , "type"=>1);
$where["News.UpdateTime >= ?"] = array("val"=>$time,"type"=>1);//'2014-01-10'
$news = $this->dao_news->getNews($where);
return count($news);
}
function getstatus($user_id){
$where["lx_messageto.user_id = ?"] = array("val"=>$user_id , "type"=>1);
$where["lx_messageto.status = ?"] = array("val"=>1,"type"=>1);
$message = $this->dao_message->getMessageTo($where);
return count($message);
}
2. Front-end processing display. Use js to process.
Copy code code as follows:
<div style="position:absolute;">
<!--{if $statusCount neq ""}-->
<div>
<!--{$statusCount}-->
</div>
<!--{/if}-->
</div>
<div style="position:absolute;">
<!--{if $newsCount neq ""}-->
<div>
<img src="/images/common/new.png">
</div>
<!--{/if}-->
</div>
css
Copy code code as follows:
.status_num{
pose: absolute;
left:70px; top:0px;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(234, 87, 122, 1)), to(rgba(136, 4, 25, 1)));
height:30px; line-height:30px;
vertical-align:middle;
font-family:Verdana, Geneva, sans-serif; color:#ffff;
font-size:14px;-webkit-border-radius:30px;
padding:0px 10px; margin-left:20px;
-webkit-box-shadow:1px 1px 3px #999;}
.status_icon{
pose: absolute;
left:70px; top:0px;
}
js processing
Copy code code as follows:
$(function() {
aMess = $("a[href ^= '/message']");
aNews = $("a[href ^= '/news/index']");
var status = $(".status1");
var statusnews = $(".status2");
aNews.prepend(statusnews);
aMess.prepend(status); //process the message
});
3. Or use ajax to get data and ajax processing
Copy code code as follows:
$(function() {
if( $("a[href *= '/news/mgr']") != " " ){
aNews = $("a[href *= '/news/mgr']") ;
$.ajax({
dataType:'html',
type:"POST",
url:"/default/index/ajaxgetnewstatus",
success:function(msg){
if(msg > 0){
var num = '<div style="position:absolute;">'
+'<div>'+msg+'</div></div>';
aNews.prepend(num);}
}
});
};
});