overhang.js,一款頂部通知欄

雲勺發表於2017-12-31

筆者在瀏覽器頂部有彈出資訊通知的需求,來傳達全域性訊息。

剛好找到了這款專用於頂部通知欄的JS工具,overhang.js。我們首先看下它的展示效果:

Overhang.png

當然,它支援修改顏色,修改通知內容,以及修改一些樣式來達到自定義的效果。

圖片.png
圖片.png
圖片.png
圖片.png
圖片.png
圖片.png

它還支援寫入HTML:

圖片.png

可以說,上述的demo展示,已經充分體現了overhang.js的強大之處了,它的使用如下所示,可以看到它是基於Jquery的:
1、引入檔案
<link rel=”stylesheet” href=”css/overhang.min.css”>
<script src=”js/jquery.min.js”></script>
<script src=”js/jquery-ui.min.js”></script>
<script src=”js/overhang.min.js”></script>

2、HTML
<a href=”javascript:” class=”btn1″>點我</a>

3、JavaScript
$(`.btn1`).on(`click`, function() {
$(`body`).overhang({});
});

最後,這裡列出所有的參數列:

參數列.png


相關文章