Пособие: Красивая и удобная выпадающая панель для входа/регистрации

Помните мою выпадающую панель для входа/регистрации, реализованную с помощью Mootools 1.2? Я подумал, что её можно было бы улучшить как с точки зрения дизайна, так и с точки зрения функциональности, и я это сделал! Но с этого времени уже на jQuery.



Смотрите демо здесь »

Что нового в этой версии?

• Дизайн панели был переработан, чтобы она стала более модной.
• Панель накрывает содержание, вместо того, чтобы сдвигать его.
• Изображения прозрачны… и работают в IE6! (Спасибо 24Ways за IE PNG Fix). Это означает, что вы можете изменить фоновый цвет документа, как вы хотели, или даже можете использовать фоновое изображение.
• Кнопка входа, которая опускает панель вниз, теперь меняет заголовок от «Войти | Регистрация» на «Закрыть панель»; также я добавил некоторые полезные ролловеры:
  Кнопка входа, когда панель в закрытом состоянии:
  
  Кнопка входа, когда панель в открытом состоянии:
  
  

Эффект переключения (.toggle() в коде JavaScript) ведет себя в jQuery иначе, чем в Mootools, и делает его очень простым при переключении кнопок входа и закрытия при нажатии. Вот как я это подготовил:

<li id="toggle">
  <a id="open" class="open" href="#">Log In | Register</a>
  <a id="close" style="display: none;" class="close" href="#">Close Panel</a>      
</li>

* This source code was highlighted with Source Code Highlighter.

… и JavaScript для разворачивания и свёртывания панели одновременно с переключением кнопки входа на кнопку закрывания:

$(document).ready(function() {

  // Expand Panel
  $("#open").click(function(){
    $("div#panel").slideDown("slow");  
  });  

  // Collapse Panel
  $("#close").click(function(){
    $("div#panel").slideUp("slow");  
  });    

  // Switch buttons from "Log In | Register" to "Close Panel" on click
  $("#toggle a").click(function () {
    $("#toggle a").toggle();
  });    

});

* This source code was highlighted with Source Code Highlighter.

Посмотрите документацию jQuery по использованию этих эффектов.

Известные ошибки

Эффект ролловера для кнопки входа не работает в IE6 в связи с использованием скрипта от 24Ways. Учитывая, что при использовании этого скрипта в этом браузере нормально работает полупрозрачность, я думаю, что мы можем игнорировать эту мелкую ошибку.

Загрузка

Обратите внимание на то, что формы входа и регистрации в этой демо не будут работать «из коробки», без предварительно установленной на Вашем сайте системы аунтентификации пользователя!

Загрузить (55.5 KiB)
Скользящая панель великолепно работает в IE6, IE7, Firefox, Safari, Opera и Chrome. Я не тестировал её в IE8. Дайте мне знать, если всё работает и там.

Как встроить эту панель в WordPress

Читать статью: Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+

— примечание переводчика: статья из серии для ньюбов, да и просто хороший пример простого эффекта