Красивая всплывающая панель для сайта ucoz на jQuery


Красивая всплывающая панель для сайта ucoz на jQuery

3628
7 из 10
Проголосовало: 4




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

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

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>Добро пожаловать на Webo4ku</h1>  
  <h2>Красивая всплывающая панель для сайта ucoz на jQuery</h2>  
  <p class="grey">Вы можете поместить что-нибудь, что Вы хотите в этой скользящей группе: видео, аудио, изображения, формы... </p>  
  <h2>Download</h2>  
  <p class="grey">Чтобы загрузить этот подлинник возвращаются к статье» <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 -->



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



Источник материала: http://ruseller.com


Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 3

John_Cena
+1
John_Cena написал: Написано 10 Января 2011 в 20:00
Комментарий №1
Что подразумивается под Далее в основном теле документа

Вовчик
-1
Вовчик написал: Написано 10 Января 2011 в 20:27
Комментарий №2
Мы не слепые и читать умеем dry
это значит на какой страницу ты это хочешь видеть, туда и ставь!

doc74
0
doc74 написал: Написано 05 Января 2012 в 21:36
Комментарий №3
Проще говоря, на нужной странице между тегами body и /body

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: