kABar - 알림 표시줄용 jQuery 플러그인
10762 단어 phpjqueryjquerypluginsjavascript
이 게시물에서는 고정 알림 표시줄을 위한 peekABar Simple Customizable jQuery 플러그인을 구현하는 방법을 공유하고 있습니다. 이는 요청이 성공적으로 처리되었을 때 알림이 필요한 제품에서 구현하는 데 유용합니다. 그리고 원하는 디자인으로 커스터마이징이 가능합니다.
설치 및 다운로드
아래의 다음 명령을 실행합니다.
npm install jquery-peek-a-bar --save
샘플 peekABar 작업 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic on TinyMCE with Custom Dialog Box</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.peekabar.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/jquery.peekabar.min.css">
<style type="text/css">
.custom-bar {
color: white;
}
</style>
<script>
$(document).ready(function() {
// Default
var defaultBar = new $.peekABar();
$('.btn-default-show').click(function () {
$('.peek-a-bar').hide();
defaultBar.show();
});
$('.btn-default-hide').click(function () {
defaultBar.hide();
});
/**
* Autohide Bar
*/
var autohideBar = new $.peekABar({
autohide: true,
});
$('.btn-autohide-show').click(function () {
$('.peek-a-bar').hide();
autohideBar.show();
});
$('.btn-autohide-hide').click(function () {
autohideBar.hide();
});
/**
* Custom bar
*/
var customBar = new $.peekABar({
autohide: true,
backgroundColor: '#5892fc',
color: '#fff',
padding: '2em',
cssClass: 'custom-bar',
html: '<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Test message with custom bar style.'
});
$('.btn-custom-show').click(function() {
$('.peek-a-bar').hide();
customBar.show();
});
$('.btn-custom-hide').click(function() {
customBar.hide();
});
});
</script>
</head>
<body>
<div class="container" style="margin-top:250px; text-align:center">
<button class="btn btn-success btn-default-show">Default Bar</button>
<button class="btn btn-danger btn-default-hide">Hide the Default Bar</button>
<button class="btn btn-success btn-autohide-show">Auto Hide Bar</button>
<button class="btn btn-success btn-custom-show">Custom Bar</button>
</div>
</body>
</html>
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery-plugins/peekabar-jquery-plugin-for-a-notification-bar를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(kABar - 알림 표시줄용 jQuery 플러그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/peekabar-jquery-plugin-for-a-notification-bar-p26텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
