Главная » Файлы » Прочие скрипты » jQuery
Простая выдвижная фиксированная панель 1.0 by Apocalypse для uCoz
23.06.14, 14:36:54



Сегодня со скуки решил написать небольшой jQuery плагин - выдвигающуюся снизу панельку, в которой можно разместить любую информацию. Панель очень легко настраивается и вы сможете без особого труда адаптировать её под свои нужды

Установка:

В любой глобальный блок или на тех страницах, где должна быть панель, вставляйте:
Код
<style>  
  #acont {background:#bababa; border: 10px solid #888; width:700px; height:100px; position:fixed; bottom:-140px; left:50%; margin-left:-350px;opacity:0;border-radius: 20 20 0 0;-moz-border-radius:20 20 0 0;padding:10px;color:#000;font-weight:bold;}  
  #abtn {position:fixed; bottom:0px; left:50%; margin-left:-75px;width:150px;}  
  </style>  

  <input id="abtn" value="Открыть панель" type="button" />  
  <div id="acont">Здесь любой ваш контент</div>  

  <script>  
  // Easy Panel 1.0 by Apocalypse  
  var b = $('#abtn');  
  var c = $('#acont');  
  b.toggle(function() {  
  b.animate({bottom: '+=100px',opacity: 0.7}, 1000).attr('value' , 'Закрыть панель');  
  c.animate({bottom: '+=100px',opacity: 0.7}, 1000);  
  },  
  function() {  
  b.animate({bottom: '-=100px',opacity: 1}, 1000).attr('value' , 'Открыть панель');  
  c.animate({bottom: '-=100px',opacity: 0}, 1000);  
  });  
  // http://apo-ucoz.com , 2011 год  
  </script>


Всем спасибо за внимание smile

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Apocalypse, Простая, ucoz, by, выдвижная, панель, 1.0, для, фиксированная
Просмотров: 436 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email: