Стильная форма входа

1609
10 из 10
Проголосовало: 1




  • Скачать с сервера
  • Скачать
  • Смотреть демо

Установка:

После /head на нужных страницах вставляйте:

Code
<link href="/css/style.css" rel="stylesheet" />  
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>  

<script language="javascript">  
$(document).ready(function() {  

$('#nav-bar').fadeIn();  

$('#Log-in').click(function() {  

$('#Log-in').css('background-color', '#006699');  
$('#signUp').css('background-color', '#000000');  
$('#submit').hide().css({'left' : '0px'});  
$('#SignupForm').hide().css({'top' : '0px'});  

$('#login').show().animate({  

left : '52%',  

},400,function(){  

$('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  

});  
///  
$('#Login_form').show().animate({  

top : '60px',  

},700,function(){  

//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
});  
});  

$('#signUp').click(function() {  

$('#signUp').css('background-color', '#006699');  
$('#Log-in').css('background-color', '#000000');  
$('#login').hide().css({'left' : '0px'});  
$('#Login_form').hide().css({'top' : '0px'});  

$('#submit').show().animate({  

left : '52%',  

},400,function(){  

$('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  

});  
///  
$('#SignupForm').show().animate({  

top : '60px',  

},700,function(){  

//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
});  
});  

});  
</script>

Следующий код в то место, где будет сама форма входа и регистрации:

Code
<img src="/images/result.png" id="login" />  
<img src="/images/submit.png" id="submit" />  

<div class="loginform" id="Login_form">  

<form method="post" action="#">  

<div>  

<div class="form-item">  

<label for="edit-name">Логин:</label>  
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
</div>  

<div class="form-item">  

<label for="edit-pass">Пароль:</label>  
<input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">  
</div>  

</div>  
</form>  

</div>  

<div class="loginform" id="SignupForm">  

<form method="post" action="#">  

<div>  
<div class="form-item">  

<label for="edit-name">Мыло:</label>  
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
</div>  

<div class="form-item">  

<label for="edit-name">Логин:</label>  
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
</div>  

<div class="form-item">  

<label for="edit-pass">Пароль:</label>  
<input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">  
</div>  

</div>  
</form>  

</div>  

<div id="nav-bar">  

<div class="module-bg">  
<a href="#" class="TopButtons" id="Log-in">Войти</a>  
<a href="#" class="TopButtons" id="signUp">Зарегистрироваться</a>  
</div>  

</div>
Автор публикации: Загрузка
Загрузка
danilaIII, это его n материал
  • Всего комментариев: 4

DieHeart
0
DieHeart написал: Написано 27 Июля 2011 в 14:25
Комментарий №3
Помоему это бред просто надо создать новый блок и туда вставит как я понял
<link href="/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>

<script language="javascript">
$(document).ready(function() {

$('#nav-bar').fadeIn();

$('#Log-in').click(function() {

$('#Log-in').css('background-color', '#006699');
$('#signUp').css('background-color', '#000000');
$('#submit').hide().css({'left' : '0px'});
$('#SignupForm').hide().css({'top' : '0px'});

$('#login').show().animate({

left : '52%',

},400,function(){

$('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });

});
///
$('#Login_form').show().animate({

top : '60px',

},700,function(){

//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
});
});

$('#signUp').click(function() {

$('#signUp').css('background-color', '#006699');
$('#Log-in').css('background-color', '#000000');
$('#login').hide().css({'left' : '0px'});
$('#Login_form').hide().css({'top' : '0px'});

$('#submit').show().animate({

left : '52%',

},400,function(){

$('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });

});
///
$('#SignupForm').show().animate({

top : '60px',

},700,function(){

//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
});
});

});
</script>
<img src="/images/result.png" id="login" />
<img src="/images/submit.png" id="submit" />

<div class="loginform" id="Login_form">

<form method="post" action="#">

<div>

<div class="form-item">

<label for="edit-name">Логин:</label>
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">
</div>

<div class="form-item">

<label for="edit-pass">Пароль:</label>
<input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">
</div>

</div>
</form>

</div>

<div class="loginform" id="SignupForm">

<form method="post" action="#">

<div>
<div class="form-item">

<label for="edit-name">Мыло:</label>
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">
</div>

<div class="form-item">

<label for="edit-name">Логин:</label>
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">
</div>

<div class="form-item">

<label for="edit-pass">Пароль:</label>
<input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">
</div>

</div>
</form>

</div>

<div id="nav-bar">

<div class="module-bg">
<a href="#" class="TopButtons" id="Log-in">Войти</a>
<a href="#" class="TopButtons" id="signUp">Зарегистрироваться</a>
</div>

</div>

danilaIII
0
danilaIII написал: Написано 06 Февраля 2012 в 20:45
Комментарий №4
правильно ты понял biggrin

danilaIII
0
danilaIII написал: Написано 23 Марта 2011 в 20:41
Комментарий №2
biggrin biggrin

Вовчик
+1
Вовчик написал: Написано 24 Февраля 2011 в 12:01
Комментарий №1
specool

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    466
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: