Terkadang ada beberapa petunjuk berita atau pesan, dan Anda dapat menggunakan posisi absolut untuk mencapai efeknya.
Apa prinsipnya?
1. Dapatkan nomor atau status.
Salin kode kode sebagai berikut:
fungsi getNewScount () {
$ waktu = tanggal ("ymd", strtoTime ("-3 hari"));
$ di mana ["news.checked =?"] = array ("val" => 1, "type" => 1);
$ where ["news.updateTime> =?"] = array ("val" => $ time, "type" => 1); // '2014-01-10'
$ news = $ this-> dao_news-> getNews ($ where);
Count Return ($ News);
}
fungsi getStatus ($ user_id) {
$ di mana ["lx_messageto.user_id =?"] = array ("val" => $ user_id, "type" => 1);
$ di mana ["lx_messageto.status =?"] = array ("val" => 1, "type" => 1);
$ message = $ this-> dao_message-> getMessageTo ($ where);
Count return ($ message);
}
2. Tampilan pemrosesan front-end. Gunakan JS untuk memproses.
Salin kode kode sebagai berikut:
<Div style = "Posisi: Absolute;">
<!-{if $ statuscount neq ""}->
<div>
<!-{$ statusCount}->
</div>
<!-{/if}->
</div>
<Div style = "Posisi: Absolute;">
<!-{jika $ newscount neq ""}->
<div>
<img src = "/gambar/common/new.png">
</div>
<!-{/if}->
</div>
CSS
Salin kode kode sebagai berikut:
.status_num {
Pose: Absolute;
Kiri: 70px;
latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 Bottom, from (rgba (234, 87, 122, 1)), ke (rgba (136, 4, 25, 1)));
Tinggi: 30px;
Vertikal-Align: tengah;
Font-Family: Verdana, Jenewa, Sans-Serif;
font-size: 14px; -webkit-border-radius: 30px;
padding: 0px 10px; margin-kiri: 20px;
-webkit-box-shadow: 1px 1px 3px #999;}
.status_icon {
Pose: Absolute;
Kiri: 70px;
}
pemrosesan JS
Salin kode kode sebagai berikut:
$ (function () {
amess = $ ("a [href ^= '/pesan']");
anews = $ ("a [href ^= '/news/index']");
status var = $ (". Status1");
var statusNews = $ (". Status2");
anews.prepend (statusNews);
Amess.prepend (status);
});
3. Atau gunakan AJAX untuk mendapatkan data dan pemrosesan AJAX
Salin kode kode sebagai berikut:
$ (function () {
if ($ ("a [href *= '/news/mgr']")! = "") {
anews = $ ("a [href *= '/news/mgr']");
$ .Ajax ({
DataType: 'html',
Ketik: "Posting",
URL: "/Default/Index/AjaxgetNewStatus",
Sukses: function (msg) {
if (msg> 0) {
var num = '<div style = "Posisi: absolute;">'
+'<div>'+msg+'</div> </div>';
anews.prepend (num);}
}
});
};
});