Skip to content

Instantly share code, notes, and snippets.

@kijtra

kijtra/jquery.notifyBar.js

Created October 18, 2011 05:14
Show Gist options
  • Save kijtra/1294654 to your computer and use it in GitHub Desktop.
Save kijtra/1294654 to your computer and use it in GitHub Desktop.
Download ZIP
[JavaScript] TwitterのNotification Bar風のやつです(要jQuery)。類似の良さそうなのが見つからず自作・・・。
Raw
jquery.notifyBar.js
/*
TwitterのNotification Bar風のやつ
【使い方】
<button onclick="$.notifyBar('表示したい文字');return false;">押して</button>
<a href="#" onclick="$.notifyBar('表示したい文字','warning');return false;">ここクリック</a>
など
【特徴】
[デフォルトで5種類の表示状態を用意]
第二引数に以下の文字を入れると、それに応じた色で表示
normal・・・背景白・文字黒。指定なしの場合はこれになる。
accept | success・・・背景緑・文字白。なにか処理が成功した場合などに。
notice・・・背景青・文字白。注意を呼びかけたいけどマイルドな色にしたい場合。
warning・・・背景黄・文字黒。注意を呼びかけたい場合。
important | error・・・背景赤・文字白。必ず見せたい場合。
※表示後はバー全体クリックか数秒で自動で消えるけど、
　「important」の場合のみ閉じるボタンでしか消えない。
[CookieでonLoad表示]
PHP等で setcookie('notifyBar','なにか表示したい文字');
などして(「notifyBar」の部分は固定)Cookieをセットすれば、
ページ表示時にバーが表示される。
表示後にCookieは自動削除されるため、表示は1度のみ。
*/
;(function($){
var config;
var cookieKey='notifyBar';
var defaultconf={
opacity:0.9,
padding:15,
duration:'normal',
shadow:'0 5px 20px rgba(0,0,0,.5)',
'font-size':'14px',
'line-height':'130%',
'text-align':'center',
'z-index':'10001',
delay:5,
types:{
normal:{
'font-weight':'normal',
'background-color':'#ffffff',
'color':'#333333'
},
accept:{
'font-weight':'normal',
'background-color':'#46A546',
'color':'#ffffff'
},
notice:{
'font-weight':'normal',
'background-color':'#62CFFC',
'color':'#ffffff'
},
warning:{
'font-weight':'bold',
'background-color':'#F89406',
'color':'#000000'
},
important:{
'font-weight':'bold',
'background-color':'#C43C35',
'color':'#ffffff'
}
},
onHide:function(){}
};
var type=defaultconf.types.normal;
var $wrapper=$('<div class="notifybar_wrapper"></div>').css({
'display':'none',
'width':'100%',
'position':($.browser.msie && $.browser.version<=6) ? 'absolute' : 'fixed',
'top':'-99999px',
'left':'0',
'z-index':defaultconf['z-index'],
'cursor':'pointer'
});
var $inner=$('<div class="notifybar_inner"></div>').css({
'position':'relative',
'overflow':'hidden',
'-moz-box-shadow':defaultconf.shadow,
'-webkit-box-shadow':defaultconf.shadow,
'box-shadow':defaultconf.shadow,
'cursor':'pointer'
});
var $container=$('<div class="notifybar_container"></div>').css({
'width':'100%',
'position':'absolute',
'top':'0',
'left':'0',
'margin':'0',
'padding':defaultconf.padding,
'font-size':defaultconf['font-size'],
'text-align':defaultconf['text-align'],
'color':type.color,
'line-height':defaultconf['line-height'],
'cursor':'pointer'
});
var $bg=$('<div class="notifybar_bg"></div>').css({
'width':'100%',
'margin':'0',
'padding':defaultconf.padding,
'font-size':defaultconf['font-size'],
'line-height':defaultconf['line-height'],
'background-color':type['background-color'],
'-moz-box-shadow':'inset 0 -1px 0 rgba(0,0,0,.2)',
'-webkit-box-shadow':'inset 0 -1px 0 rgba(0,0,0,.2)',
'box-shadow':'inset 0 -1px 0 rgba(0,0,0,.2)',
opacity:defaultconf.opacity,
'cursor':'pointer'
});
var $button=$('<button title="閉じる">×</button>').css({
'width':'16px',
'height':'16px',
'position':'absolute',
'top':'8px',
'right':'8px',
'margin':'0',
'padding':'0',
'font-weight':'bold',
'font-size':'12px',
'text-align':'center',
'color':type.color,
'line-height':'16px',
'cursor':'pointer',
//'border':'1px solid '+type.color,
'border':'0',
'background-color':type['background-color'],
'-moz-border-radius':'8px',
'-webkit-border-radius':'8px',
'border-radius':'8px',
'-khtml-border-radius':'8px',
'-moz-box-shadow':'0 1px 1px rgba(0,0,0,.3)',
'-webkit-box-shadow':'0 1px 1px rgba(0,0,0,.3)',
'box-shadow':'0 1px 1px rgba(0,0,0,.3)',
'cursor':'pointer'
});
var $bgtext=$('<span style="visibility:hidden;"></span>');
var openflag=false;
var _hide=function(){
if(!openflag){
return false;
}
$wrapper.unbind('click').animate({'top':-($wrapper.height()+20)},'normal',function(){
$wrapper.hide().css('top','-99999px');
if(typeof config.onHide=='function'){
config.onHide();
}
openflag=false;
});
};
var _checkCookie=function(){
var dc=document.cookie;
if(!dc || dc==''){
return;
}
c=dc.split("; ");
var type='';
var len=c.length;
for(var i=0,l=len;i<l;i++){
var s=c[i].split('=');
if(s[0].indexOf(cookieKey)==0 && s[1] && s[1]!=''){
if(s[0].indexOf('warning')!=-1){
type='warning';
}else if(s[0].indexOf('accept')!=-1 || s[0].indexOf('success')!=-1){
type='accept';
}else if(s[0].indexOf('important')!=-1 || s[0].indexOf('error')!=-1){
type='important';
}else if(s[0].indexOf('notice')!=-1){
type='notice';
}else{
type='normal';
}
if(type && type!=''){
document.cookie=s[0]+'=; path=/; domain='+document.domain+'; expires=Thu, 01 Jan 1970 00:00:00 GMT';
$.notifyBar(decodeURIComponent(s[1].replace('+',' ')),type);
}
break;
}
}
};
$.notifyBar=function(html,type,userconf){
if(openflag || !html || html=='' || typeof html!='string'){
return false;
}
if(typeof type=='object'){
config=$.extend(defaultconf,type);
}else if(typeof userconf=='object'){
config=$.extend(defaultconf,userconf);
}else{
config=defaultconf;
}
type=(type=='error') ? 'important' : (type=='success' ? 'accept' : type);
type=(typeof type=='string' && config.types[type]) ? type : 'normal';
var cursor='pointer';
if(type=='important'){
cursor='default';
}
$inner.css({
'-moz-box-shadow':config.shadow,
'-webkit-box-shadow':config.shadow,
'box-shadow':config.shadow,
'cursor':cursor
});
$container.css({
'padding':config.types[type].padding,
'font-size':config.types[type]['font-size'],
'font-weight':config.types[type]['font-weight'],
'color':config.types[type].color,
'text-align':config.types[type]['text-align'],
'line-height':config.types[type]['line-height'],
'cursor':cursor
});
$bg.css({
'padding':config.types[type].padding,
'font-size':config.types[type]['font-size'],
'line-height':config.types[type]['line-height'],
'background-color':config.types[type]['background-color'],
'cursor':cursor
});
$button.css({
'color':config.types[type].color,
//'border':'1px solid '+config.types[type].color,
'background-color':config.types[type]['background-color']
});
$bgtext.html(html);
$container.html(html);
setTimeout(function(){
var h=($wrapper.height());
$wrapper.css('top','-'+h+'px').show().animate({'top':0},config.duration,function(){
openflag=true;
if(type!='important'){
$wrapper.click(_hide);
if(config.delay>0){
setTimeout(function(){
_hide();
},config.delay*1000);
}
}
});
},100);
};
$.notifyBar.init=function(){
$('body').append($wrapper.append($inner.append($bg.append($bgtext),$container,$button.click(_hide))));
setTimeout(function(){
_checkCookie();
},300);
};
})(jQuery);
$(function(){
$.notifyBar.init();
});
Raw
jquery.notifyBar.min.js
;(function($){var config;var cookieKey='notifyBar';var defaultconf={opacity:0.9,padding:15,duration:'normal',shadow:'0 5px 20px rgba(0,0,0,.5)','font-size':'14px','line-height':'130%','text-align':'center','z-index':'10001',delay:5,types:{normal:{'font-weight':'normal','background-color':'#ffffff','color':'#333333'},accept:{'font-weight':'normal','background-color':'#46A546','color':'#ffffff'},notice:{'font-weight':'normal','background-color':'#62CFFC','color':'#ffffff'},warning:{'font-weight':'bold','background-color':'#F89406','color':'#000000'},important:{'font-weight':'bold','background-color':'#C43C35','color':'#ffffff'}},onHide:function(){}};var type=defaultconf.types.normal;var $wrapper=$('<div class="notifybar_wrapper"></div>').css({'display':'none','width':'100%','position':($.browser.msie&&$.browser.version<=6)?'absolute':'fixed','top':'-99999px','left':'0','z-index':defaultconf['z-index'],'cursor':'pointer'});var $inner=$('<div class="notifybar_inner"></div>').css({'position':'relative','overflow':'hidden','-moz-box-shadow':defaultconf.shadow,'-webkit-box-shadow':defaultconf.shadow,'box-shadow':defaultconf.shadow,'cursor':'pointer'});var $container=$('<div class="notifybar_container"></div>').css({'width':'100%','position':'absolute','top':'0','left':'0','margin':'0','padding':defaultconf.padding,'font-size':defaultconf['font-size'],'text-align':defaultconf['text-align'],'color':type.color,'line-height':defaultconf['line-height'],'cursor':'pointer'});var $bg=$('<div class="notifybar_bg"></div>').css({'width':'100%','margin':'0','padding':defaultconf.padding,'font-size':defaultconf['font-size'],'line-height':defaultconf['line-height'],'background-color':type['background-color'],'-moz-box-shadow':'inset 0 -1px 0 rgba(0,0,0,.2)','-webkit-box-shadow':'inset 0 -1px 0 rgba(0,0,0,.2)','box-shadow':'inset 0 -1px 0 rgba(0,0,0,.2)',opacity:defaultconf.opacity,'cursor':'pointer'});var $button=$('<button title="閉じる">×</button>').css({'width':'16px','height':'16px','position':'absolute','top':'8px','right':'8px','margin':'0','padding':'0','font-weight':'bold','font-size':'12px','text-align':'center','color':type.color,'line-height':'16px','cursor':'pointer','border':'0','background-color':type['background-color'],'-moz-border-radius':'8px','-webkit-border-radius':'8px','border-radius':'8px','-khtml-border-radius':'8px','-moz-box-shadow':'0 1px 1px rgba(0,0,0,.3)','-webkit-box-shadow':'0 1px 1px rgba(0,0,0,.3)','box-shadow':'0 1px 1px rgba(0,0,0,.3)','cursor':'pointer'});var $bgtext=$('<span style="visibility:hidden;"></span>');var openflag=false;var _hide=function(){if(!openflag){return false}$wrapper.unbind('click').animate({'top':-($wrapper.height()+20)},'normal',function(){$wrapper.hide().css('top','-99999px');if(typeof config.onHide=='function'){config.onHide()}openflag=false})};var _checkCookie=function(){var dc=document.cookie;if(!dc||dc==''){return}c=dc.split("; ");var type='';var len=c.length;for(var i=0,l=len;i<l;i++){var s=c[i].split('=');if(s[0].indexOf(cookieKey)==0&&s[1]&&s[1]!=''){if(s[0].indexOf('warning')!=-1){type='warning'}else if(s[0].indexOf('accept')!=-1||s[0].indexOf('success')!=-1){type='accept'}else if(s[0].indexOf('important')!=-1||s[0].indexOf('error')!=-1){type='important'}else if(s[0].indexOf('notice')!=-1){type='notice'}else{type='normal'}if(type&&type!=''){document.cookie=s[0]+'=; path=/; domain='+document.domain+'; expires=Thu, 01 Jan 1970 00:00:00 GMT';$.notifyBar(decodeURIComponent(s[1].replace('+',' ')),type)}break}}};$.notifyBar=function(html,type,userconf){if(openflag||!html||html==''||typeof html!='string'){return false}if(typeof type=='object'){config=$.extend(defaultconf,type)}else if(typeof userconf=='object'){config=$.extend(defaultconf,userconf)}else{config=defaultconf}type=(type=='error')?'important':(type=='success'?'accept':type);type=(typeof type=='string'&&config.types[type])?type:'normal';var cursor='pointer';if(type=='important'){cursor='default'}$inner.css({'-moz-box-shadow':config.shadow,'-webkit-box-shadow':config.shadow,'box-shadow':config.shadow,'cursor':cursor});$container.css({'padding':config.types[type].padding,'font-size':config.types[type]['font-size'],'font-weight':config.types[type]['font-weight'],'color':config.types[type].color,'text-align':config.types[type]['text-align'],'line-height':config.types[type]['line-height'],'cursor':cursor});$bg.css({'padding':config.types[type].padding,'font-size':config.types[type]['font-size'],'line-height':config.types[type]['line-height'],'background-color':config.types[type]['background-color'],'cursor':cursor});$button.css({'color':config.types[type].color,'background-color':config.types[type]['background-color']});$bgtext.html(html);$container.html(html);setTimeout(function(){var h=($wrapper.height());$wrapper.css('top','-'+h+'px').show().animate({'top':0},config.duration,function(){openflag=true;if(type!='important'){$wrapper.click(_hide);if(config.delay>0){setTimeout(function(){_hide()},config.delay*1000)}}})},100)};$.notifyBar.init=function(){$('body').append($wrapper.append($inner.append($bg.append($bgtext),$container,$button.click(_hide))));setTimeout(function(){_checkCookie()},300)}})(jQuery);$(function(){$.notifyBar.init()});
Raw
jquery.notifyBar.php
<?php
/*
PHPからCookieで呼び出す場合の関数例
*/
function notifyBar($message,$type='normal'){
if(empty($message)){
return NULL;
}
setcookie('notifyBar.'.$type,$message,0,'/',$_SERVER['HTTP_HOST']);
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment