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

3860
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 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
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: