jQuery badge是一種常用的小型UI控件,在網頁中經常用來表示用戶狀態、新消息、未讀郵件數等信息。該控件可以通過jQuery庫中的特定函數進行快速構建和定制。
<!-- 引入jQuery庫 --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 構建一個簡單的badge --> <span class="badge">3</span> <!-- 定制badge樣式 --> <style> .badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; background-color: #007bff; border-radius: 0.25rem; } </style>
可以看到,使用jQuery badge只需要在HTML中添加一個span標簽,給它添加一個類名為“badge”,并在其中填寫需要顯示的數字即可。而定制樣式則可以通過CSS進行定義。其中,padding屬性可以控制badge的內邊距,font-size和font-weight屬性可以控制字體大小和粗細,line-height屬性可以控制行高,color和background-color屬性可以控制前景色和背景顏色,border-radius屬性可以控制邊框圓角大小。