Pull to refresh

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

Reading time 2 min
Views 3.3K
Original author: Jeeremie
Помните мою выпадающую панель для входа/регистрации, реализованную с помощью Mootools 1.2? Я подумал, что её можно было бы улучшить как с точки зрения дизайна, так и с точки зрения функциональности, и я это сделал! Но с этого времени уже на jQuery.

screenshot and demo

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

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

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


Эффект переключения (.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+

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

Articles