html实现消息按钮上的数量角标的实例详解
May 22, 2017 am 10:12 AM
html
这篇文章主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下
html代码:
<a onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-bell-o fa-2x',size:'large',iconAlign:'top'"> 消息<span id="msgNum" class="ii">4</span> </a>
Salin selepas log masuk
css代码:
/*角标 */ .ii{ display: none; background: #f00; border-radius: 50%; width: 20px; height: 20px; top: 5px; right: 0px; position: absolute; text-align: center; color: #FFF; z-index: 99999; }
Salin selepas log masuk
js代码:
function ajaxa(){ $.ajax({ type:"POST", dataType : "json", async: false, url : "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do", data : {}, success : function(data){ if(data !=null){ if(parseInt(data)>10){ $("#msgNum").show(); $("#msgNum").text(parseInt(data)); }else if(parseInt(data)> 0){ $("#msgNum").show(); $("#msgNum").text(parseInt(data)); }else{ $("#msgNum").hide(); } } }, error:function(){ } }); }
Salin selepas log masuk
实现效果:
【相关推荐】
1. HTML免费视频教程
4. Html5 datalist标签详解以及与后台数据的动态匹配
Atas ialah kandungan terperinci html实现消息按钮上的数量角标的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu
By 王林
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌

Alat panas Tag

Artikel Panas
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu
By 王林
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
