Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Красивая всплывающая панель для сайта
Красивая всплывающая панель для сайта
cechДата: Вторник, 22.06.2010, 13:42 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн






В сегодняшнем уроке я покажу Вам, как сделать красивую всплывающую панель для сайта. Ее можно использовать как форму для логина и регистрации, можно как меню, также туда можно поместить карту сайта. Все зависит от Вашей фантазии.

В демо версии панель использована для логина и регистрации пользователей.

1. Для начала между тегами <head></head> нам необходимо поместить следующий фрагмент кода:

Code
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />    
<link rel="stylesheet" href="/css/slide.css" type="text/css" media="screen" />    

<!--[if lte IE 6]>    
<script type="text/javascript" src="/js/pngfix/supersleight-min.js"></script>    
<![endif]-->    

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>    
<!-- Sliding effect -->    
<script src="/js/slide.js" type="text/javascript"></script>



Тут мы подключаем две таблицы стилей (одна для оформления внешнего вида панели, вторая - текста на ней). При большом желании можно эти 2 таблицы стилей объединить в одну. Далее идет хак для Internet Explorer 6. Он исправляет глюк прозрачночти .png изображений. И после этого подключается фреймворк jQuery и функция выезжания нашей панели. Обязательно помним про пути к файлам, если будете менять их месторасположение.

2. Далее в основном теле документа нам необходимо поместить следующий HTML код:

Code
<!-- Panel -->    
   <div id="toppanel">    
   <div id="panel">    
   <div class="content clearfix">    
   <div class="left">    
   <h1>Welcome to Web-Kreation</h1>    
   <h2>Sliding login panel Demo with jQuery</h2>    
   <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>    
   <h2>Download</h2>    
   <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>    
   </div>    
   <div class="left">    
   <!-- Login Form -->    
   <form class="clearfix" action="#" method="post">    
   <h1>Member Login</h1>    
   <label class="grey" for="log">Username:</label>    
   <input class="field" type="text" name="log" id="log" value="" size="23" />    
   <label class="grey" for="pwd">Password:</label>    
   <input class="field" type="password" name="pwd" id="pwd" size="23" />    
   <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>    
   <div class="clear"></div>    
   <input type="submit" name="submit" value="Login" class="bt_login" />    
   <a class="lost-pwd" href="#">Lost your password?</a>    
   </form>    
   </div>    
   <div class="left right">    
   <!-- Register Form -->    
   <form action="#" method="post">    
   <h1>Not a member yet? Sign Up!</h1>    
   <label class="grey" for="signup">Username:</label>    
   <input class="field" type="text" name="signup" id="signup" value="" size="23" />    
   <label class="grey" for="email">Email:</label>    
   <input class="field" type="text" name="email" id="email" size="23" />    
   <label>A password will be e-mailed to you.</label>    
   <input type="submit" name="submit" value="Register" class="bt_register" />    
   </form>    
   </div>    
   </div>    
   </div> <!-- /login -->    
   <!-- The tab on top -->    
   <div class="tab">    
   <ul class="login">    
   <li class="left"> </li>    
   <li>Hello Guest!</li>    
   <li class="sep">|</li>    
   <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>    
   <li class="right"> </li>    
   </ul>    
   </div> <!-- / top -->    
      
   </div> <!--panel -->



В данном коде мы просто оформляем внешний вид всплывающей панели. Если Вам необходимо его видоизменить, экспериментируйте с кодом и у Вас все получится.

Важно: данный урок рассказывает только о том, как сделать такую всплывающую панель. Он не рассказывает о том, как сделать регистрацию на сайте. Уроки по регистрации вскоре появятся на нашем сайте. Как говорится: "Не переключайтесь!"

Всего наилучшего!


 
вверх
JackДата: Четверг, 24.06.2010, 23:03 | Сообщение # 2
Шептун
Группа: Пользователи
Пользователь №: 9
Сообщений: 32
Награды: 0
Репутация: 2
Статус: оффлайн
Прикольная вещь
 
вверх
cechДата: Четверг, 24.06.2010, 23:41 | Сообщение # 3
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Jack, у меня даже есть работа с использованием этой фишки smile удобно...


 
вверх
v1DДата: Суббота, 26.06.2010, 14:19 | Сообщение # 4
Молчун
Группа: Пользователи
Пользователь №: 47
Сообщений: 2
Награды: 0
Репутация: -1
Статус: оффлайн
все работает, спасибо, но когда поставил начал изменять там все не что пахать не стало, но спс) cool
 
вверх
ko1obokДата: Суббота, 26.06.2010, 14:36 | Сообщение # 5
Завзятый балабол!
Группа: Пользователи
Пользователь №: 4
Сообщений: 132
Награды: 2
Репутация: 6
Статус: оффлайн
смотрите за важными тэгами и кодами.Тогда не чего сбиваться не будет.
 
вверх
cechДата: Суббота, 26.06.2010, 14:43 | Сообщение # 6
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Панель просто нужно чуть модернизировать в плане input другой поставить и т.д. (это если залогиниться надо) И на укозе будет работать так как нужно...


 
вверх
Angry4178Дата: Суббота, 10.07.2010, 00:55 | Сообщение # 7
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, оуу!Выглядит супер,немного напоминает панель которая сейчас установлена на форуме (синяя на верху)


 
вверх
nDiviDДата: Суббота, 10.07.2010, 07:55 | Сообщение # 8
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Кстати, а нет кода этой чудо панели?


Web-create пати uNiceGroup =) Порно бесплатно!


Сообщение отредактировал nDiviD - Суббота, 10.07.2010, 08:06
 
вверх
cechДата: Суббота, 10.07.2010, 19:14 | Сообщение # 9
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
nDiviD, извините но все что связано с нашим форумом и сайтом, не обсуждается!) Панель эта сделано не для uCoz, но это не значит что она не будет работать на uCoz'е, не будут работать только поля для ввода данных, но это легко изменить.С панелью можно вытворять что угодно, после входа можно изменить содержимое, к примеру на профиль!


 
вверх
Angry4178Дата: Суббота, 10.07.2010, 20:01 | Сообщение # 10
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, Правильно! Уникальное не должно быть бесплатным smile




Сообщение отредактировал Zloi - Суббота, 10.07.2010, 20:02
 
вверх
nDiviDДата: Воскресенье, 11.07.2010, 09:49 | Сообщение # 11
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Quote (cech)
nDiviD, извините но все что связано с нашим форумом и сайтом, не обсуждается!)

Конечно правильно =) А эту панель я давно видел, но все равно спасибо, знаешь где точно можно найти этот скрипт



Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
Angry4178Дата: Понедельник, 12.07.2010, 16:06 | Сообщение # 12
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, не получается у меня, все скачал,установил (панель переделал немного {в графическом плане} ), перехожу на главную панель есть и пашет ,но (!) весь css сайта нарушен

P.S - т.к в шаблоне deGusto есть папка css а в ней лежит файл style.css , то я новый css файл (тот что от этой новой панели) переименовал в style1.css ( и не забыл изменить его в скрипте).




Сообщение отредактировал Zloi - Понедельник, 12.07.2010, 16:07
 
вверх
Angry4178Дата: Вторник, 13.07.2010, 00:14 | Сообщение # 13
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
Кто поможет исправить или установить по нормальному - с меня "+"


 
вверх
ELYSIUMДата: Вторник, 13.07.2010, 01:53 | Сообщение # 14
Говорун
Группа: Пользователи
Пользователь №: 16
Сообщений: 55
Награды: 0
Репутация: 2
Статус: оффлайн
Есть такая панель полностью пригодная для ucoz и полностью адаптированна!
Автор адаптации:Apocalypse
Тут ссылка на его сайт:

PS чел круто разбирается в jquerty и java))



Реклама запрещена!
 
вверх
Angry4178Дата: Вторник, 13.07.2010, 01:57 | Сообщение # 15
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
ELYSIUM, Спасибо,с меня "+"(тока через несколько дней)


 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Красивая всплывающая панель для сайта
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: