Текстовые уведомления с помощью iLoad
iLoad — годная галерея изображений, написанная на javascript. Я писал о ней ранее и даже подчеркивал, что галерея имеет свой api, но ещё ни разу не приводил пример того, что можно сделать с его помощью.
В этом посте я опишу небольшой плагинчик, который я использую в связке со своей галереей для выведения пользователю различного вида сообщений на всех своих проектах.
Код плагина должен быть размещено после кода галереи. Способ вывода сообщения описан в коде ниже:
Картинки к посту не прилагаю — собственный дизайн сделать очень легко. В качестве фона для кнопки закрытия я использую маленький крестик.
В этом посте я опишу небольшой плагинчик, который я использую в связке со своей галереей для выведения пользователю различного вида сообщений на всех своих проектах.
Код плагина должен быть размещено после кода галереи. Способ вывода сообщения описан в коде ниже:
Code
<script>
L.text=(function(){
var okClassName = 'alertOk', /* класс успешного сообщения */
errorClassName = 'alertError', /* класс сообщения-ошибки */
closeClassName = 'alertClose', /* класс кнопки закрытия */
defaultClassName = 'alertMessage', /* класс обычного сообщения */
hideTime = 5000, /* время до скрытия */
errorColor = '#d31e1e', /* цвет фона ошибки */
defaultColor = '#ffffff', /* цвет фона успешного сообщения */
okColor = '#5f9b00', /* цвет фона обычного сообщения */
padding = 10, /* отступы */
corners = 10, /* углы */
hideTimer;
return function(i,g,j){
try{clearTimeout(hideTimer);}catch(e){}
var lastcolor = L.containerColor;
L.destroy();
L.contentPadding=10;
L.cornersSize=10;
var f,close = document.createElement("a");
close.className=closeClassName; // наззвание класса кнопки закрытия
close.href='javascript:L.hide();void(0);';
close.style.cssText='top:0px;right:'+L.cornersSize+'px;';
switch(g){
default:f=defaultClassName;L.containerColor=defaultColor;break;
case "error":f=errorClassName;L.containerColor=errorColor;break;
case "ok":f=okClassName;L.containerColor=okColor;break;
}
L.create();
L.panelType=0;
L.event.add("onshow",function h(){hideTimer = setTimeout(L.hide,j||hideTime);L.event.remove("onshow",h)});
L.event.add("onhide",function h(){L.panelType=2;L.contentPadding=0;L.cornersSize=18;L.containerColor=lastcolor;L.event.remove("onhide",h);});
L.content.innerHTML="";
d=document.createElement("div");
d.className=f;
if(typeof(i)=="object"){d.appendChild(i)}else{d.innerHTML=i}
q=document.createElement("div");
q.style.position="absolute";
q.style.top=q.style.left="-9999px";
document.body.appendChild(q);
q.appendChild(d);
L.scale(1+q.offsetWidth+(L.cornersSize+L.contentPadding)*2,q.offsetHeight+(L.cornersSize+L.contentPadding)*2,function(){
L.content.appendChild(d);
d.appendChild(close);
document.body.removeChild(q);
L.show(L.showContent)
})
};
})();
// как использовать:
L.text('сообщение','error' /*error/ok/пусто*/,1000 /* не обязательное время исчезновения */);
</script>
L.text=(function(){
var okClassName = 'alertOk', /* класс успешного сообщения */
errorClassName = 'alertError', /* класс сообщения-ошибки */
closeClassName = 'alertClose', /* класс кнопки закрытия */
defaultClassName = 'alertMessage', /* класс обычного сообщения */
hideTime = 5000, /* время до скрытия */
errorColor = '#d31e1e', /* цвет фона ошибки */
defaultColor = '#ffffff', /* цвет фона успешного сообщения */
okColor = '#5f9b00', /* цвет фона обычного сообщения */
padding = 10, /* отступы */
corners = 10, /* углы */
hideTimer;
return function(i,g,j){
try{clearTimeout(hideTimer);}catch(e){}
var lastcolor = L.containerColor;
L.destroy();
L.contentPadding=10;
L.cornersSize=10;
var f,close = document.createElement("a");
close.className=closeClassName; // наззвание класса кнопки закрытия
close.href='javascript:L.hide();void(0);';
close.style.cssText='top:0px;right:'+L.cornersSize+'px;';
switch(g){
default:f=defaultClassName;L.containerColor=defaultColor;break;
case "error":f=errorClassName;L.containerColor=errorColor;break;
case "ok":f=okClassName;L.containerColor=okColor;break;
}
L.create();
L.panelType=0;
L.event.add("onshow",function h(){hideTimer = setTimeout(L.hide,j||hideTime);L.event.remove("onshow",h)});
L.event.add("onhide",function h(){L.panelType=2;L.contentPadding=0;L.cornersSize=18;L.containerColor=lastcolor;L.event.remove("onhide",h);});
L.content.innerHTML="";
d=document.createElement("div");
d.className=f;
if(typeof(i)=="object"){d.appendChild(i)}else{d.innerHTML=i}
q=document.createElement("div");
q.style.position="absolute";
q.style.top=q.style.left="-9999px";
document.body.appendChild(q);
q.appendChild(d);
L.scale(1+q.offsetWidth+(L.cornersSize+L.contentPadding)*2,q.offsetHeight+(L.cornersSize+L.contentPadding)*2,function(){
L.content.appendChild(d);
d.appendChild(close);
document.body.removeChild(q);
L.show(L.showContent)
})
};
})();
// как использовать:
L.text('сообщение','error' /*error/ok/пусто*/,1000 /* не обязательное время исчезновения */);
</script>
7, 2, 3567
№1
Fergus
а можно сделать с выводом html кода
Ответ: Запросто.