Текстовые уведомления с помощью iLoad

, 03.11.2011 Четверг, 13:55
    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>
Картинки к посту не прилагаю — собственный дизайн сделать очень легко. В качестве фона для кнопки закрытия я использую маленький крестик.

Жми на пятую!
7, 2, 3567
№1
а можно сделать с выводом html кода
Ответ: Запросто.
    © Блог StudioAD.ru 2024 год нашей эры. Не все права защищены... Копирование любой информации и материалов с обратной ссылкой приветствуется! Хостинг от uCoz.

    Если вам пришлись по душе материалы моего блога - подпишитесь на RSS дабы получать обновления незамедлительно! Я рад что вы читаете и комментируете мои экзерсисы, приятного времяпрепровождения.