Динамическое добавление элементов к форме при помощи jQuery

Однажды, возможно, вам понадобится функциональность, которая позволит вашим пользователям динамически добавлять поля в форму веб приложения. Благодаря нашему любимому jQuery эта задача выполняется в два счёта. Для того чтобы всё работало, мы будем использовать массив, который будет отправляться на обработку языком PHP. В этом уроке мы создадим форму с кнопками добавить, удалить и сбросить и сформируем данные, которые будут отправлены через AJAX.

Код
Для того чтобы построить данную систему вам не нужно быть экспертом в JavaScript. Первое, что нам нужно создать так это функцию, которая будет обрабатывать клик на кнопку и отслеживать количество полей на странице. Информация о каждом новом поле будет добавляться в массив ‘dynamic[]‘.

После того, как пользователь будет отправлять форму на обработку, значения массива будут вноситься в базу данных посредством PHP. Это вы можете реализовать сами.

$(document).ready(function(){
 
    var i = $('input').size() + 1;
 
    $('#add').click(function() {
        $('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });
 
    $('#remove').click(function() {
    if(i > 1) {
        $('.field:last').remove();
        i--;
    }
    });
 
    $('#reset').click(function() {
    while(i > 2) {
        $('.field:last').remove();
        i--;
    }
    });
 
    // here's our click function for when the forms submitted
 
    $('.submit').click(function(){
 
    var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val());
    });
 
    if(answers.length == 0) {
        answers = "none";
    }  
 
    alert(answers);
 
    return false;
 
    });
 
});

Добавлено: 08 Мая 2018 17:06:57 Добавил: Андрей Ковальчук

Оригинальные вкладки с помощью jQuery

В сегодняшнем уроке мы создадим оригинальные вкладки с помощью jQuery.

Их оригинальность заключается в смене вкладок. Обычно это происходит в горизонтальном направлении. В нашем случае вкладки меняются по принципу игровых автоматов "однорукий бандит". Они плавно сменяются в вертикальном направлении.

HTML

<div id="slot-machine-tabs">
<ul class="tabs">
<li><a href="#one">Tab One</a></li>
<li><a href="#two">Tab Two</a></li>
<li><a href="#three">Tab Three</a></li>
</ul>
<div class="box-wrapper">
<div id="one" class="content-box">
<div class="col-one col">
<img src="images/evangeline.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Kate</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="two" class="content-box">
<div class="col-one col">
<img src="images/elizabeth.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Juliet</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="three" class="content-box">
<div class="col-one col">
<img src="images/sonya.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Penelope</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div> <!-- END Box Wrapper -->
</div> <!-- END Slot Machine Tabs -->

Важные моменты:

- все это обернуто отдельным div с значением ID. Если захотим переделать эти вкладки в плагин, тогда мы можем обращаться к этому ID. Данное ID полностью бесполезно для CSS. Это означает, что подобных вкладок у нас может быть неограниченное количество на странице.

- "navigation" (вкладки) находятся над ячейками с контентом. С отключенным CSS это все будет выглядеть как список навигации. Значения href этих сcылок ведут к определенным ID ячеек с информацией.

- Когда у нас много закрывающих тегов </div> в ряд, я люблю добавлять комментарии после, чтобы было понятнее что за что отвечает.

CSS

Вкладки будут такие же как любая другая горизонтальная навигация. Мы сделаем элементы списка инлайн и блок с якорями зафлоатим влево. Простые границы и фоны, специальное состояние для текущей вкладки "current" (нет границы и вдавлена вниз) - и у нас все готово!
.tabs { list-style: none; overflow: hidden; padding-left: 1px; }
.tabs li { display: inline; }
.tabs li a { display: block; float: left; padding: 4px 8px; color: black; border: 1px solid #ccc; background: #eee; margin: 0 0 0 -1px; }
.tabs li a.current { background: white; border-bottom: 0; position: relative; top: 2px; z-index: 2; }

Очень интересно здесь использована тень вокруг div #box-wrapper. C помощью него у нас получается эффект, как будто текущая вкладка находится над другими, а все другие находятся за ней.
.box-wrapper { -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; padding: 20px; background: white; border: 1px solid #ccc; margin: -1px 0 0 0; height: 210px; position: relative; }
.content-box { overflow: hidden; position: absolute; top: 20px; left: 20px; width: 658px; height: 230px; }

Обратите внимание, что мы также поднимаем ячейку на 1 пиксель с негативный top margin. Таким образом мы делаем, чтобы граница не текущей вкладки не выглядела как 2-пиксельная, а 1-пиксельной.

Другая важная особенность здесь это то, что у #box-wrapper overflow hidden и четко заданная высота. Колонки во всех ячейках с контентом, которые на данный момент не активны спрятаны с помощью выталкивания их значения top на 350 пикселей (значение, больше чем высота ячейки). Это выталкивает их полностью за пределы видимости и overflow hidden обеспечивает нам отсутствие скролла. JavaScript далее будет выполнять работу показа новых ячеек и прятанья старый при надобности.

Колонки:
.col { width: 30%; float: left; position: relative; top: 350px; }
.col-one, .col-two { margin-right: 3%; }

Обратите внимание, что мы применяем right margin первым двум колонкам.

jQuery

Плагина пока еще нет под все наши нужды. Весь код доступен в исходниках. Мы же затронем наиболее важные строки.

Сразу мы прописываем первой вкладке текущее состояние. Колонки с контентом в текущей ячейке получают позицию top = 0 (чтобы они были видимыми).
$(".tabs li:first-child a, .content-box:first").addClass("current");
$(".box-wrapper .current .col").css("top", 0);

Мы используем функцию delegate для событий при нажатиях на вкладки.
$("#slot-machine-tabs").delegate(".tabs a", "click", function() {
   // stuff
}

Когда пользователь нажимает на ссылку смена вкладок происходит только, если текущая вкладка не имеет статус "current".
$el = $(this);

 if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
    // stuff
}

Для более красивого эффекта и подобия игровым автоматам я решил использовать разную скорость смены вкладок. Все скорости устанавливаются случайно для каждой анимации, но с интервалом не менее половины секунды.
speedOne = Math.floor(Math.random()*1000) + 500;
speedTwo = Math.floor(Math.random()*1000) + 500;
speedThree = Math.floor(Math.random()*1000) + 500;

Пользуйтесь на здоровье. Добавление новых слайдов не такое уж и легкое, как в других вкладках на нашем сайте, но все же эффект смены вкладок заслуживает внимания!

Добавлено: 08 Мая 2018 17:03:37 Добавил: Андрей Ковальчук

Делаем выпадающий неупорядоченный список с помощью jQuery и CSS3

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

Подготовка
В данном уроке мы подготовим расширяющийся список с потрясающим видом, который можно получить с помощью CSS3.

Нам нужно создать отдельную папку для файлов урока и скачать туда библиотеку jQuery.

Теперь создадим HTML документ, и сохраним его как index.html в той же папке, что и библиотека JQuery.

Затем создадим CSS файл и сохраним его в той же папке как style.css.

Установка
Теперь нужно задекларировать наши файлы. Мы декларируем style.css. и jQuery бибилиотеку в нашем HTML документе следующим образом:

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

Работаем над нашим списком
Теперь нужно создать разметку в нашем документе. Мы будем использовать неупорядоченный список в нашем уроке, но адаптация упорядоченного списка очень проста, нужно только поменять ul на ol, или использовать оба тэга в нашем коде jQuery. Итак, вот наша разметка. Контейнер div сожержит заголовок h3 и неупорядоченный список:
<div class="box">
<h3>Список №1<span class="expand">+</span></h3>
<ul>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
</ul>
</div>

Для чего нужен span, который сожержит символ "+"? Мы будем использовать его для разворачивания и сворачивания списка по нажатию кнопки мыши.

Теперь добавим стили CSS, которые помогут придать нашему списку более профессиональный вид. Начнем с задания глобальных правил для удаления всех полей и отступов для всех элементов и установим фон и набор шрифтов:
* { margin: 0; padding: 0; }

body { background: #f0f0f0; font-family: Arial, Helvetica, sans-serif; }
Теперь мы зададим стили для контейнера div и используем некоторые правила CSS3, чтобы сделать его более интересным. Чтобы увидеть функционал CSS3 во всей красе нужно использовать браузер на основе Gecko (Mozilla, и т.п.) или браузер Webkit (Chrome, Safari, и т.п.):
.box {
width: 250px;
margin: 10px auto;
background: #fff;
border: 1px solid #d1d1d1;
padding: 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Теперь зададим стили для заголовка h3 и его секции span:
h3 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
background: -moz-linear-gradient(center top, #efefef 0%,#e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef),color-stop(1, #e0e0e0));
border: 1px solid #d1d1d1;
color: #c1c1c1;
font-size: 13px;
font-weight: normal;
text-shadow: 1px 1px 0px #fff;
}
h3 span { float: right; cursor: pointer; }
h3 span:hover { text-shadow: 0px 0px 3px #a1eeff; }

Для фонa используется правило CSS3, которое задает градиент. Очень трудно запомнить синтаксис, поэтому можно использовать сайт CSS Corners для генерации других стилей. На картинке ниже показан результат применения стилей к тэгу h3.

Использование стилей CSS3
Теперь займемся элементами списка. Добавим несколько стилей для них, чтобы завершить дизайн нашего списка:
ul { padding: 5px; overflow: hidden; }
ul li { font-size: 13px; list-style-type: square; list-style-position: inside; color: #a1a1a1; padding: 5px; }

Теперь наш список имеет отличный вид и можно приступать к работе с jQuery.

Разберемся с jQuery
Теперь нам надо создать пользовательский скрипт. Мы создадим его в нашем HTML документе, добавим тэг сразу после декларирования jQuery:
<script type="text/javascript">
</script>

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

Сначала наш документ загружается и, когда он загружен на 100%, скрипт приступает к действию:
$(document).ready(function(){

});

Мы помещаем весь код нашего скрипта внутрь выше описанной функции. Сначала нам нужно скрыть неупорядоченный список с помощью следующего кода:
$(ul").hide();

Теперь добавляем функцию, которая сворачивает/разворачивает список:
$(h3 span").click(function(){
$(this).parent().next().slideToggle();
});

Давайте разберем далее подробно, что происходит в данном коде. Когда вы нажимаете кнопку мыши на "+", который является элементом h3 span, элемент ul, который является следующим элементом родительского элемента h3 span (это h3) начинает сворачиваться/разворачиватся.

Теперь сделаем наш список боле интересным. Выделим четные строки списка с помощью следующего кода:
$(ul li:odd").css(background-color", "#efefef");

На этом урок закончен. Надеюсь, он был полезен для Вас!

Добавлено: 08 Мая 2018 16:16:35 Добавил: Андрей Ковальчук

Парсим XML средствами jQuery

Наверняка вы уже знаете, как работать с форматом JSON через jQuery. Пришло время познакомиться с тем, как можно распарсить XML файл. Единственное весомое различие заключается в том, что вы можете использовать XML только в пределах домена, в котором происходит AJAX запрос. Для использования сторонних файлов вам понадобится JSONP.

XML
Теперь я приведу пример XML кода. Вы его можете найти в файле books.xml. Внутри вы обнаружите главный элемент (корневой) и его структурированных потомков.

<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
  <Book>
    <Title>My Cool Book Title</Title>
    <Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
    <Date>12/1/2010</Date>
  </Book>
  <Book>
    <Title>Another PHP book</Title>
    <Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
    <Date>4/1/2010</Date>
  </Book>
  <Book>
    <Title>jQuery Techniques</Title>
    <Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
    <Date>6/2/2010</Date>
  </Book>
  <Book>
    <Title>MySQL Database Book</Title>
    <Description>Brush up your knowledge with the best MySQL database book on the market.</Description>
    <Date>14/2/2010</Date>
  </Book>
</RecentBooks>

JavaScript
Для того чтобы распарсить XML файл, нам надо сделать AJAX запрос.

ВАЖНО. Если вы хотите делать кросдоменные AJAX запросы, то вам следует использовать JSONP

Итак, файл у нас есть. Теперь воспользуемся методом .find(), для того чтобы добраться до нужного нам элемента.
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: xmlParser
    });
});
 
function xmlParser(xml) {
 
    $('#load').fadeOut();
 
    $(xml).find("Book").each(function () {
 
        $(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
        $(".book").fadeIn(1000);
 
    });
 
}

HTML
Содержимое XML файла будет записано в блоке с классом .main.
<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>
<div class="clear"></div>

Добавлено: 08 Мая 2018 12:45:13 Добавил: Андрей Ковальчук

Как создать красивую всплывающую подсказку с помощью jQuery

В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект.

В этом нам поможет jQuery.

С самого начала документа подключаем фреймворк:

<script src="jquery.tools.min.js"></script>  

Далее подключаем стили оформления. Как Вы видите - они находятся во внешнем файле:
<link rel="stylesheet" type="text/css" href="tooltip.css"/>

В теле документа нам понадобится следующий код:
<a href="#" id="trigger">
      Move the mouse over this box to see the tooltip in action.
  </a>
<!-- tooltip element -->
      <div class="tooltip">
  <h3>The Tooltip</h3>
 <p>
  <strong>A great tool for designing better layouts and more intuitive user-interfaces.</strong>
  </p>
 <p>
 Tooltips can contain any HTML such as links, images, forms and tables.
      This tooltip is vertically centered on the top edge of the trigger element.
  </p>
  </div>

Класс "trigger" - это видимый объект на странице, а "tooltip" - это то, что должно появится при наведении мышки.

После этого кода нам необходимо инициализировать функцию.
<script>
 $.tools.addTipEffect("slidedown", 
      
      // opening animation
      function() { 
      var opacity = this.getConf().opacity;
      this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show();
      }, 
  
      // closing animation
      function() {
      this.getTip().animate({top: '+=15', opacity:0}, 300, function() { 
      $(this).hide().animate({top: '+=30'}, 0);
      });
      }
      );
   $("#trigger").tooltip({effect: 'slidedown'});
      </script>

Все готово! Оставайтесь с нами!

Добавлено: 08 Мая 2018 12:36:47 Добавил: Андрей Ковальчук

Простая галерея на jQuery

Сегодня мы рассмотрим создание простой галереи на jQuery. В ней мы не будем использовать какие-то дополнительные плагины для jQuery, поэтому ее вес будет небольшим.

Шаг 1.

Подключим к документу фреймворк jQuery. Для этого между тегами <head> пропишем следующий код:

<script type="text/javascript" src="example/jquery.js"></script>

Далее следует прописать такой скрипт:
<script type="text/javascript">
$(document).ready(function(){
$("#thumbnail li a").click(function(){
$("#large img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
$("#large h2").html($("> img", this).attr("title"));
return false;
});
$("#large>img").load(function(){$("#large>img:hidden").fadeIn("slow")});
});
</script>

Шаг 2.

В отдельной таблице стилей или в этом же файле между тегами <head> напишем CSS-стили для вывода галереи. Вы можете менять их по своему усмотрению:
#large {
width: 350px;
height: 350px;
float: left;
margin-top: 50px;
margin-left: 50px;
background: url(example/indicato.gif) no-repeat 50% 40%;
}
#large img {
width: 350px;
height: 263px;
border: 5px solid #223348;
}
#thumbnail {
width: 210px;
height: 256px;
overflow: auto;
float: left;
list-style: none;
margin-top: 50px;
margin-left: 16px;
_margin-left: 8px;
padding: 5px;
border: 3px solid #223348;
background: #fff;
}
#thumbnail li {
float: left;
width: 79px;
margin: 8px;
_margin: 5px;
}
#thumbnail a {
display: block;
width: 75px;
height: 56px;
padding: 1px;
border: 1px solid #ccc;
}
#thumbnail a:hover {
border-color: #405061;
}

Шаг 3.

Непосредственно сама галерея представляет из себя ненумерованный список.
<div id="large">
<img src="example/image010.jpg" title="" alt="image01.jpg" />
</div>
<ul id="thumbnail">
<li><a href="example/big/image01.jpg"><img src="example/image011.jpg" title="" alt="image01.jpg" /></a></li>
<li><a href="example/big/image02.jpg"><img src="example/image020.jpg" title="" alt="image02.jpg" /></a></li>
<li><a href="example/big/image03.jpg"><img src="example/image030.jpg" title="" alt="image03.jpg" /></a></li>
<li><a href="example/big/image04.jpg"><img src="example/image040.jpg" title="" alt="image04.jpg" /></a></li>
<li><a href="example/big/image05.jpg"><img src="example/image050.jpg" title="" alt="image05.jpg" /></a></li>
<li><a href="example/big/image06.jpg"><img src="example/image060.jpg" title="" alt="image06.jpg" /></a></li>
<li><a href="example/big/image07.jpg"><img src="example/image070.jpg" title="" alt="image07.jpg" /></a></li>
<li><a href="example/big/image08.jpg"><img src="example/image080.jpg" title="" alt="image08.jpg" /></a></li>
<li><a href="example/big/image09.jpg"><img src="example/image090.jpg" title="" alt="image09.jpg" /></a></li>
<li><a href="example/big/image10.jpg"><img src="example/image100.jpg" title="" alt="image10.jpg" /></a></li>
<li><a href="example/big/image11.jpg"><img src="example/image110.jpg" title="" alt="image11.jpg" /></a></li>
<li><a href="example/big/image12.jpg"><img src="example/image120.jpg" title="" alt="image12.jpg" /></a></li>
<li><a href="example/big/image13.jpg"><img src="example/image130.jpg" title="" alt="image13.jpg" /></a></li>
<li><a href="example/big/image14.jpg"><img src="example/image140.jpg" title="" alt="image14.jpg" /></a></li>
</ul>

В блоке large указывается картинка, которая по умолчанию будет большой.

Далее каждый элемент списка представляет собой маленькую картинку (в данном случае 75х56 px), имеющую ссылку на большую (в данном случае 350х263 px).

Разместить эти картинки вы можете или в одной папке, или в двух, например big (для больших) и small (для маленьких). Но не забудьте указать к ним правильные пути.

На этом все! Спасибо за внимание!

Добавлено: 08 Мая 2018 12:32:27 Добавил: Андрей Ковальчук

Создание простых модальных окон с помощью jQuery

В данном уроке я расскажу Вам, как создать простые красивые модальные окна с помощью jQuery. Как Вы уже, наверное, давно поняли - с помощью jQuery возможно сделать почти все, что угодно.

jQuery

Начнем с jQuery и вставим следующий код между тегами <head></head>:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script>
$(document).ready(function() {   
    $('a[name=modal]').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
  
        var maskHeight = $(document).height();
    var maskWidth = $(window).width();
  
    $('#mask').css({'width':maskWidth,'height':maskHeight});
  
    $('#mask').fadeIn(1000); 
    $('#mask').fadeTo("slow",0.8); 
  
    var winH = $(window).height();
    var winW = $(window).width();
  
   $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
  
    $(id).fadeIn(2000); 
  
   });
  
    $('.window .close').click(function (e) {
e.preventDefault();
    $('#mask, .window').hide();
    }); 
 
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    }); 
  
    });  
</script>

Как обычно, вначале подключаем фреймворк и далее идет функция.

CSS

Как Вы видели в демо версии, Вашему вниманию представлены три варианта применения данной функции. Ниже представлены стили оформления для всех 3-х вариантов:

<style>
    body {
    font-family:verdana;
    font-size:15px;
    }  
a {color:#333; text-decoration:none}
    a:hover {color:#ccc; text-decoration:none}  
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }
  
    #boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
    }  
#boxes #dialog {
    width:375px; 
    height:203px;
    padding:10px;
    background-color:#ffffff;
    }  
#boxes #dialog1 {
    width:375px; 
    height:203px;
    }  
#dialog1 .d-header {
    background:url(images/login-header.png) no-repeat 0 0 transparent; 
    width:375px; 
    height:150px;
    }  
#dialog1 .d-header input {
    position:relative;
    top:60px;
    left:100px;
    border:3px solid #cccccc;
    height:22px;
    width:200px;
    font-size:15px;
    padding:5px;
    margin-top:4px;
    }  
#dialog1 .d-blank {
    float:left;
    background:url(images/login-blank.png) no-repeat 0 0 transparent; 
    width:267px; 
    height:53px;
    }  
#dialog1 .d-login {
    float:left;
    width:108px; 
    height:53px;
    }
  
#boxes #dialog2 {
    background:url(images/notice.png) no-repeat 0 0 transparent; 
    width:326px; 
    height:229px;
    padding:50px 0 20px 25px;
    }
  </style>

Стили можно поместить как в отдельный файл, так и в сам документ. В стилях есть несколько путей к картинкам. Помните, если картинки будут переноситься в другую папку, необходимо поменять к ним путь.

HTML

HTML код, который необходимо поместить после тега <body>. Все очень просто.

<ul>
    <li><a href="#dialog" name="modal">Простое модальное окно</a></li>
    <li><a href="#dialog1" name="modal">Форма для логина</a></li>
    <li><a href="#dialog2" name="modal">Красивая липучка</a></li>
    </ul>
  
<div id="boxes">  
<div id="dialog" class="window"> 
Простое модальное окно | 
    <a href="#"class="close"/>Закрыть его</a>
    </div>
    
    <!-- НАчало формы логина --> 
    <div id="dialog1" class="window">
  <div class="d-header">
  <input type="text" value="username" onclick="this.value=''"/><br/>
  <input type="password" value="Password" onclick="this.value=''"/> 
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>  
</div>
    <!-- конец -->   
   
<!-- Начало красивого стикера -->
    <div id="dialog2" class="window">
    Вот так все красиво!! <b>Ruseller.com</b> - всегда только лучшая информация<br/><br/>
  <input type="button" value="НУ НАЖМИТЕ МЕНЯ!!!" class="close"/>
  </div>
  <!-- конец -->  
   
<!-- Маска, которая затемняет весь экран -->
  <div id="mask"></div>

На этом урок завершен! Всего наилучшего всем нашим читателям. Хороших выходных и с наступающими праздниками!!!

Всегда рад Вашим комментариям и вопросам!

Добавлено: 08 Мая 2018 12:05:00 Добавил: Андрей Ковальчук

Прикольный jQuery эффект завиcающего фона

В этом уроке мы покажем вам рецепт приготовления прикольного фона

XHTML & CSS
Помимо стандартной библиотеки jQuery, мы воспользуемся плагином jquet.pngfix:

<head>
    <link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” />
 
    <script type=“text/javascript” src=“js/jquery-1.3.2.min.js”></script>
    <script type=“text/javascript” src=“js/custom.js”></script>
    <script type=“text/javascript” src=“js/jquery.pngfix.js”></script>
    <script>
      DD_belatedPNG.fix(’.png-fix’);
    </script>
</head>

Xhtml прост настолько, насколько это возможно. Вы можете добавить тот контент, который вам нужен. Правила формирования контента не должны расходиться со следующим примером:
<body>
   <div id=“box”>
      <div id=“overlay”>
          <span class="red">You can add further content on top of your design into these divs here.</span>
      </div>
   </div>
 
</body>

Теперь давайте немного оформим то, что у нас есть. Для того чтобы всё было пучком, нам необходимо указать ширину и высоту контейнера и элемента.
#container {
  background:url(../images/gradient.jpg);
  position:relative;
  width:899px;
  height:358px;
}
#overlay {
  position:absolute;
  top:0;
  left;0;
  width:899px;
  height:358px;
  background:url(../images/overlay.png);
}

Ну и скрипт…
$(function() {
 // Определяем высоту фонового изображения.
var backgroundheight = 2000;
var backgroundheight_two = 1000;
        offset = Math.round(Math.floor(Math.random()* 2001));
        offset2 = Math.round(Math.floor(Math.random()* 1001));
 function scrollbackground() {
     offset = (offset < 1) ? offset + (backgroundheight – 1) : offset – 1;
  // Применяем фон к блоку div
     $(’#container’).css(“background-position”, “50% “ + offset + “px”);
     setTimeout(function() {
   scrollbackground();
   },100
  );
    }
scrollbackground();
     $(’#overlay’).css(“background-position”, “50% “ + offset2 + “px”);<br>
});

Это содержание файла custom.js. Во-первых, нам надо указать высоту изображения, инициализировав переменную ‘backgroundheight’. Вставьте эти числа, чтобы создать рандомизированную стартовую позицию для обоих изображений вместо ‘2001’ и ‘1001’ выше.стартовую позицию для обоих изображений вместо ‘2001’ и ‘1001’ выше. Вы можете изменить скорость зависания, изменяя значение ‘100’. Наконец измените ‘#content‘ и ‘#overlay‘ для вашего содержания.

Вот и всё!

Добавлено: 08 Мая 2018 12:01:22 Добавил: Андрей Ковальчук

Смена фоновых изображений для события hover

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

HTML
Ниже представлен код слайдшоу, в котором изображения вытягиваются из неупорядоченного списка и показываются в бесконечном цикле плагином jQuery Cycle.

Элемент .link обеспечивает адрес URL на который производится переход при нажатии кнопки мыши.

<!-- Слайдшоу
=========================-->
<div class="slideshow-block">
    <a href="http://website.com" class="link"></a>
    <ul class="slides">
        <li><img src="image.jpg"/></li>
        <!-- Другие слайды -->
    </ul>
</div>

CSS
Размер слайдшоу - 200px х 150px. Он зависит от размера логотипа и слайдов. При изменении потребуется настройка координат положения фона.

Логотип переключается между двумя вариациями цвета с использованием техники работы со спрайтами.
Неупорядоченный список получает класс “active” при наведении курсора мыши, что делает его видимым.
*{
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}
.slideshow-block{
    position: relative;
    width: 200px;
    height: 150px;
    overflow: hidden;
    background: #111 url('img/bg.jpg');
}
a.link{
    position:absolute;
    height: 150px;
    width: 200px;
    display: block;
    z-index: 10;
    background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
    background-position: center -150px;
}
.slides{
    z-index:0;
    visibility:hidden;
}
.slides.active{
    visibility:visible;
}

jQuery
На jQuery возлагаются две задачи:

Связать плагин jQuery Cycle с нашим неупорядоченным списком, превращая его в слайдшоу.
Переключать между паузой и проигрыванием при наведении курсора мыши. Слайдшоу будет скрываться и останавливаться, когда курсор мыши покидает элемент.
<script type="text/javascript">
jQuery(function($){
 
    // Плагин Cycle
    $('.slides').cycle({
        fx:     'none',
        speed:   1,
        timeout: 70
    }).cycle("pause");
 
    // Остановка и запуск при навдении курсора мыши
    $('.slideshow-block').hover(function(){
        $(this).find('.slides').addClass('active').cycle('resume');
    }, function(){
        $(this).find('.slides').removeClass('active').cycle('pause');
    });
 
});
</script>

Добавлено: 08 Мая 2018 11:37:13 Добавил: Андрей Ковальчук

Стопка фотографий со слайдером

В данном уроке мы покажем как сделать небольшую галерею, в которой изображения выглядят установленными в стопку. Слайдер регулирует расстояние между изображениями. При нажатии на изображение, оно поворачивается и становится в нормальную позицию, а с помощью слайдера все изображения можно раздвинуть так, что они не будут накладываться друг на друга. В проекте используются плагин jQuery rotate3Di и слайдер JQuery UI.

В основе лежит HTML код ( в демонстрации используется 8 изображений):

<div id="container">
    <div id="slider"></div>
    <br/>
    <div id="images">
        <img class="img_main" src="img/01.jpg"/>
        <img class="img" src="img/02.jpg"/>
        <img class="img" src="img/03.jpg"/>
        <img class="img" src="img/04.jpg"/>
        <img class="img" src="img/05.jpg"/>
        <img class="img" src="img/06.jpg"/>
        <img class="img" src="img/07.jpg"/>
        <img class="img" src="img/08.jpg"/>
    </div>
</div>

Стиль CSS для создания стопки изображений:
#container {
    padding: 50px;
    margin-top: 20px;
}
#images {
    padding: 40px;
}
#images img {
    margin-left: -100px;
    background: #e9e9e9;
    padding: 10px;
    cursor: pointer;
}
#images img:hover {
    background: #333;
}
#slider {
    width: 380px;
}

Слайдер используется для изменения поля для каждого изображения, исключая первое изображение. При нажатии на изображение оно поворачивается либо в нормальное положение, либо в положение в стопке.
$(function() {
    $( "#slider" ).slider({
        value: -100,
        min: -100,
        max: 0,
        step: 1,
        slide: function( event, ui ) {
            $(".img").css("margin-left", ui.value + "px");
        }
    });
  
    $("img").rotate3Di(45);
  
    $("img").click(function() {
        var str = $(this).attr("style");
        var index = str.indexOf("skew");
        var substr = str.substr(index+5, 10);
        var split = substr.split(", ");
        var val = parseFloat(split[1])
        if ((val == 0)) {
            $(this).rotate3Di(45, 1000);
        } else {
            $(this).rotate3Di(0, 1000);
        }
    });
});

И обязательно нужно включить плагины и стили для них:
<link rel="stylesheet" href="js/theme/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>

Добавлено: 08 Мая 2018 10:37:22 Добавил: Андрей Ковальчук

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

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

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

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

<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 и функция выезжания нашей панели. Обязательно помним про пути к файлам, если будете менять их месторасположение.

Далее в основном теле документа нам необходимо поместить следующий HTML код:
<!-- 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 &raquo;</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" /> &nbsp;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">&nbsp;</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">&nbsp;</li>
  </ul> 
  </div> <!-- / top -->
  
  </div> <!--panel -->

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

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

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

Добавлено: 08 Мая 2018 10:28:15 Добавил: Андрей Ковальчук

Эффект растворения элементов на jQuery

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

Итак, приступим к созданию такого эффекта.

Шаг 1.

Для начала нужно скачать и подключить к документу необходимые скрипты.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>

Шаг 2.

Затем между тегами <head> необходимо написать следующий код:
<script type="text/javascript">
$(document).ready(
function(){
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});

$('#news').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '10px'
});

$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random',
containerheight: '1.5em'
});
});
</script>

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

Параметр type указывает на порядок появления элементов: sequence (последовательно) или random (появление в случайном порядке).

Параметр containerheight указывает высоту растворяющегося блока.

Шаг 3.

В нужном нам месте вставим код блока с растворяющимися элементами:

Для картинок это будет следующий код:
<ul id="portfolio"> 
<li>
<a href="http://ruseller.com/"><img src="images/ggbg.gif" alt="" /></a>
</li>
<li>
<a href="http://ruseller.com/"><img src="images/whizzkids.gif" alt="" /></a>
</li> 
<li>
<a href="http://ruseller.com/"><img src="images/km.jpg" alt="" /></a>
</li> 
</ul>

При необходимости список может быть продолжен или сокращен.

Для ссылок код будет такой:
<ul id="news"> 
<li>
<a href="#n1">1 Первый текст с ссылкой</a>
</li>
<li>
<a href="#n2">2 Второй текст с ссылкой</a>
</li> 
<li>
<a href="#n3">3 Третий текст с ссылкой</a>
</li> 
<li>
<a href="#n4">4 Четвертый текст с ссылкой</a>
</li>
</ul>

Чтобы избавиться от точек элементов списка, между тегами <head> или в отдельном css файле пропишем стиль:
li {
list-style-type: none;
}

Для элементов в абзацах код будет следующий:
<div class="fade"> 
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>

Ну вот и все! Область использования такого скрипта очень широкая! Надеюсь он получит свое отражение и на Ваших сайтах.

Добавлено: 06 Мая 2018 21:35:57 Добавил: Андрей Ковальчук

Создание миниатюр на стороне клиента без перезагрузки страницы или немного уличной магии

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

/**
     * обновляем координаты прямоугольника, миниатюры создающего
     */
function updateCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

/**
     * чтобы не отправлять нулевые координаты
     */
function checkCoords()
{
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};

$(function() {

    $('form').submit(function(){
        $('#files').val($('#response').html());
       
    });

    // загрузить файлы
    $('#upload').click(function(){
        $('#uploadify').uploadifyUpload();
        return false;
    });

    // асинхронная загрузка
    $('#uploadify').uploadify({
        'uploader': 'uploadify.swf',
        'script': 'uploadify.php',
        'folder': 'upload',
        'cancelImg': 'cancel.png',
        'checkscript'  : 'check.php',
        'fileDesc'   : 'jpg;png;bmp;gif',
        /*'queueID'    : 'fileQueue',*/ // id где будет появляться список
        'multi'     : false,
        'fileExt'   : '*.jpg;*.png;*.gif,;*.jpeg',
        'onComplete'   : function(event,queueID,fileObj,response,data) {
            $('#response').slideDown('slow');
            //$('#response').append(response);

            $('#response').append('<div><span class="ui-icon ui-icon-closethick"></span><b>' + response+ '</b></div>');

            /*-----------------------------уличная магия будет здесь ;)-----------------------------*/
            $.ajax({
                'url' : 'ajaxhandler.php',
                'type': 'post',
                'data': {
                    'path': response,
                    'action': 'parsepath'
                },
                'success': function(data){
                    //alert(data);
                    $('#cropcontainer').html('<iframe id="pic" height="600" width="100%" />');
                    // $('#path').val('ff');
                    $('#pic').attr('src', 'iframe.php' + '?filename=upload/'  + data);
                }
            })
        /*-------------------------------------конец уличной магии =)------------------------------*/


        }
    });
});

Алгоритм прост до безумия: после асинхронно загрузки файла на сервер (мы будем загружать по одному файлу), обрабатывается событие onComplete uploadify, которое загружает специально подготовленный iframe, проделывающий всю грязную работу.

Вот собственно он сам.
<?php
/**
* этой штукой мы отображаем картинку с возможностью ресайзинга
*/
$filename = $_GET['filename'];
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="js/jquery-1.4.2.min.js"></script>
        <script src="js/jquery.Jcrop.min.js"></script>
        <link rel="stylesheet" href="css/jcrop/jquery.Jcrop.css" type="text/css" />

        <script type="text/javascript">
            $(function(){

                $('form').submit(function(){
                    $.ajax({
                        'url' : 'cut.php',
                        'type': 'post',
                        'data': {
                            x: $('#x').val(),
                            y: $('#y').val(),
                            w: $('#w').val(),
                            h: $('#h').val(),
                            f: $('#f').val() // filename
                        },
                        'success': function(data){
                            $("#thumbs",top.document).append('<img src="' + data + '" />');
                            $('#pic', top.document).slideUp('slow');

                        }
                    })
                    return false;
                })

                $('#cropbox').Jcrop({
                    // FIXME: пропорции в отдельный конфиг
                    aspectRatio: 4/3,
                    onSelect: updateCoords
                });

            });

            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };

            function checkCoords()
            {
                if (parseInt($('#w').val())) return true;
                alert('Выделите область для миниатюры');
                return false;
            };
        </script>
    </head>
    <body>
        <img src="<?php echo $filename; ?>" id="cropbox" />

        <form action="cut.php" method="post" onsubmit="return checkCoords();">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="hidden" id="f" name="f" value="<?php echo $filename; ?>"/>
            <input type="submit" value="Закончить двигать квадратик" />
        </form>
    </body>
</html>

И файл cut.php, ему помогающий. Здесь следует отметить то, что поддерживаются только файлы jpeg, но не реализовано никакой защиты, дабы не загромождать пример.
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// FIXME: вынести настройки в отдельный файл
    $targW = 400;
    $targH = round(3 / 4 * $targW); // 3/4 пропорции для миниатюры
    $jpegQuality = 100;

    $src = $_POST['f'];
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor($targW, $targH);

    imagecopyresampled($dst_r, $img_r, 0, 0, $_POST['x'], $_POST['y'],
            $targW, $targH, $_POST['w'], $_POST['h']);

    // FIXME: никогда так не делать
    $filename = dirname(__FILE__) . '/thumbs/' . basename($_POST['f']);
    imagejpeg($dst_r, $filename, $jpegQuality);
    echo 'thumbs/' . basename($filename);
    // exit;
}
?>

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

ajaxhandler.php
<?php

$action = $_POST['action'];

switch ($action) {

    case 'parsepath':
        echo basename(str_replace('<br />', '', $_POST['path']));
        break;

    default:
        break;
}
?>

Плагины для jQuery:

jCrop
uploadify

Что стоит подправить?

Сделать проверку на загружаемые файлы
Реализовать очистку мусора, коего скапливается не очень мало
Удачного вам программирования.

Добавлено: 06 Мая 2018 21:25:48 Добавил: Андрей Ковальчук

Быстрая форма обратной связи на PHP и jQuery

Когда вы выпускаете веб-продукт, нет ничего более полезного, чем получить на ранних этапах отзывы от пользователей о продукте. К несчастью, многие сайты не уделяют достаточно внимания форме обратной связи. Она или примитивная или очень сложная или ее нет совсем.

Сегодня мы найдем решение этой проблемы. Инструменты для этого — jQuery, PHP и класс PHPMailer.

HTML
Давайте начнем с HTML разметки. Стили находятся в начале документа, а JavaScript файлы в конце. Это нужно, чтобы страница загружалась быстрее. Сначала загружаются все стили, а в конце функционал JavaScript.

feedback.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quick Feedback Form w/ PHP and jQuery </title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="feedback">

    <!-- Five color spans, floated to the left of each other -->

    <span class="color color-1"></span>

    <span class="color color-2"></span>
    <span class="color color-3"></span>
    <span class="color color-4"></span>
    <span class="color color-5"></span>

    <div class="section">

        <!-- The arrow span is floated to the right -->
        <h6><span class="arrow up"></span>Feedback</h6>

        <p class="message">Please include your contact information if you'd like to receive a reply.</p>

        <textarea></textarea>

        <a class="submit" href="">Submit</a>
    </div>
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Внутри body вы можете увидеть div #feedback. Он крепится в нижнему правому углу окна с помощью позиционирования fixed.

Внутри #feedback находятся 5 цветных элементов span.У каждого стоит ширина 20% и свойство float:left. Т.е. они полностью по ширине заполняют весь элемент div.

Кроме того, еще есть контейнер .section, в котором находятся заголовок, текстовая область и кнопка.

CSS
Переходя к стилям формы, стоит сказать пару слов о том, как структурирована таблица стилей. Как вы видите из кода ниже, каждый элемент начинается с #feedback. Этим кодом мы присваиваем все названия элементов родителю. Это нужно для того, чтобы в будущем не было конфликтов с другими наименованиями элементов на сайте.

styles.css – часть 1
#feedback{
    background-color:#9db09f;
    width:310px;
    height:330px;
    position:fixed;
    bottom:0;
    right:120px;
    margin-bottom:-270px;
    z-index:10000;
}

#feedback .section{
    background:url('img/bg.png') repeat-x top left;
    border:1px solid #808f81;
    border-bottom:none;
    padding:10px 25px 25px;
}

#feedback .color{
    float:left;
    height:4px;
    width:20%;
    overflow:hidden;
}

#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}

#feedback h6{
    background:url("img/feedback.png") no-repeat;
    height:38px;
    margin:5px 0 12px;
    text-indent:-99999px;
    cursor:pointer;
}

#feedback textarea{
    background-color:#fff;
    border:none;
    color:#666666;
    font:13px 'Lucida Sans',Arial,sans-serif;
    height:100px;
    padding:10px;
    width:236px;
    -moz-box-shadow:4px 4px 0 #8a9b8c;
    -webkit-box-shadow:4px 4px 0 #8a9b8c;
    box-shadow:4px 4px 0 #8a9b8c;
}

Первому элементу #feedback div присваивается фиксированное позиционирование к правом нижнему углу окна браузера. Далее назначаются стили для div .section, и пять цветных элемента span. Они различаются только цветами на заднем плане.

В конце CSS правил определяется отображение элемента textarea.

styles.css – часть 2
#feedback a.submit{
    background:url("img/submit.png") no-repeat;
    border:none;
    display:block;
    height:34px;
    margin:20px auto 0;
    text-decoration:none;
    text-indent:-99999px;
    width:91px;
}

#feedback a.submit:hover{
    background-position:left bottom;
}

#feedback a.submit.working{
    background-position:top right !important;
    cursor:default;
}

#feedback .message{
    font-family:Corbel,Arial,sans-serif;
    color:#5a665b;
    text-shadow:1px 1px 0 #b3c2b5;
    margin-bottom:20px;
}

#feedback .arrow{
    background:url('img/arrows.png') no-repeat;
    float:right;
    width:23px;
    height:18px;
    position:relative;
    top:10px;
}

#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}
#feedback .response{
    font-size:21px;
    margin-top:70px;
    text-align:center;
    text-shadow:2px 2px 0 #889889;
    color:#FCFCFC;
}

Во второй части таблицы стилей мы назначаем стили для кнопки. Стоит обратить внимание, что у кнопки существует три состояния. Это состояние кнопки в состоянии покоя, когда на нее наводят мышкой(hover) и режим «работы», когда она нажата. Когда кнопка в таком режиме, то эффект hover дезактивируется.

jQuery
Форма обратной связи имеет два состояния: минимизирована и максимизирована. При загрузке, по умолчанию, она свернута в правом нижнем углу экрана браузера. Затем она разворачивается, если щелкнуть по заголовку мышкой. Все это построено на простых событиях и анимации, что и видно из кода, расположенного ниже.

script.js – часть 1
$(document).ready(function(){

    // The relative URL of the submit.php script.
    // You will probably have to change it.
    var submitURL = 'submit.php';

    // Caching the feedback object:
    var feedback = $('#feedback');

    $('#feedback h6').click(function(){

        // We are storing the values of the animated
        // properties in a separate object:

        var anim    = {
            mb : 0,            // Margin Bottom
            pt : 25            // Padding Top
        };

        var el = $(this).find('.arrow');

        if(el.hasClass('down')){
            anim = {
                mb : -270,
                pt : 10
            };
        }

        // The first animation moves the form up or down, and the second one
        // moves the "Feedback" heading, so it fits in the minimized version

        feedback.stop().animate({marginBottom: anim.mb});
        feedback.find('.section').stop().animate(
        {paddingTop:anim.pt},function(){
            el.toggleClass('down up');
        });
    });

Чтобы оставить код чистым, мы перенесли проверку состояния наверх и создали объект anim, отвечающий за анимацию.

Вторая часть script.js содержит Ajax функционал, контактирующий с submit.php.

script.js – часть 2
    $('#feedback a.submit').live('click',function(){
        var button = $(this);
        var textarea = feedback.find('textarea');

        // We use the working class not only for styling the submit button,
        // but also as kind of a "lock" to prevent multiple submissions.

        if(button.hasClass('working') || textarea.val().length < 5){
            return false;
        }

        // Locking the form and changing the button style:
        button.addClass('working');

        $.ajax({
            url        : submitURL,
            type    : 'post',
            data    : { message : textarea.val()},
            complete    : function(xhr){

                var text = xhr.responseText;

                // This will help users troubleshoot their form:
                if(xhr.status == 404){
                    text = 'Your path to submit.php is incorrect.';
                }

                // Hiding the button and the textarea, after which
                // we are showing the received response from submit.php

                button.fadeOut();

                textarea.fadeOut(function(){
                    var span = $('<span>',{
                        className    : 'response',
                        html        : text
                    })
                    .hide()
                    .appendTo(feedback.find('.section'))
                    .show();
                }).val('');
            }
        });
        return false;
    });
});

Мы используем jQuery низкоуровневый Ajax метод – $.ajax(), для контактирования с submit.php. Этот метод обеспечивает больше контроля над соединением, чем $.get() и $.post() функции.

Например, одно из преимуществ видно в функции “complete”. Она вернет нужный статус, если будет ошибка 404 not found error. Таким образом можно вывести на экран сообщение об ошибке, напоминающее пользователю, чтобы он проверил путь submitURL.

И в конце PHP шаг.

PHP
PHP обрабатывает данные, принимает с помощью Ajax, проверяет и корректирует их и отправляет email сообщение на ваш электронный адрес.

submit.php
// Enter your email address below
$emailAddress = 'me@example.com';

// Using session to prevent flooding:

session_name('quickFeedback');
session_start();

// If the last form submit was less than 10 seconds ago,
// or the user has already sent 10 messages in the last hour

if(	$_SESSION['lastSubmit'] && ( time() - $_SESSION['lastSubmit'] < 10 || $_SESSION['submitsLastHour'][date('d-m-Y-H')] > 10 )){
	die('Please wait for a few minutes before sending again.');
}

$_SESSION['lastSubmit'] = time();
$_SESSION['submitsLastHour'][date('d-m-Y-H')]++;

require "phpmailer/class.phpmailer.php";

if(ini_get('magic_quotes_gpc')){
    // If magic quotes are enabled, strip them
    $_POST['message'] = stripslashes($_POST['message']);
}

if(mb_strlen($_POST['message'],'utf-8') < 5){
    die('Your feedback body is too short.');
}

$msg = nl2br(strip_tags($_POST['message']));

// Using the PHPMailer class

$mail = new PHPMailer();
$mail->IsMail();

// Adding the receiving email address
$mail->AddAddress($emailAddress);

$mail->Subject = 'New Quick Feedback Form Submission';
$mail->MsgHTML($msg);

$mail->AddReplyTo('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->SetFrom('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');

$mail->Send();
echo 'Thank you!';

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

Email сообщения отправляются с помощью класса PHPMailer. Он работает только на PHP5, так что вам нужно проверять версию PHP, если вы будете использовать этот скрипт.

Быстрая форма обратной связи полностью готова!

Добавлено: 04 Мая 2018 10:57:30 Добавил: Андрей Ковальчук

Чтение и запись cookies на jQuery & PHP

HTTP является протоколом-бомжом, что значит, что каждый запрос к веб-сайту является автономным, т.е. не связанным с предыдущим запросом, и не хранящим какую либо информацию.

Но эта простота и является также одной из причин его широкого внедрения в Интернете.

Однако, существует способ сохранять информацию между запросами в виде cookies. Таким образом, у вас появится эффективное управление сессиями и данными.

Есть два способа работы с cookies – на стороне сервера (PHP, ASP и т.д.) и на стороне клиента (JavaScript).

В этой статье мы рассмотрим, как можно управлять cookies с помощью PHP и JavaScript.

Cookies и PHP
Запись cookies
Чтобы создать cookie в PHP, вы должны использовать функцию setcookie. Она принимает ряд параметров (все, кроме первого, являются необязательными и могут быть опущены):

setcookie(
	'pageVisits',				// Имя cookie, обязательно
	$visited,					// Значение cookie
	time()+7*24*60*60,			// Срок действия
	'/',						// Каталог
	'demo.tutorialzine.com'		// Домен
);

Если вы передаете 0, как срок действия (по умолчанию), cookie будет потерян при перезагрузке браузера. Параметр “/” указывает, что cookie будет доступен для всех директорий домена (при желании, можно связать cookie с одним каталогом, например с /admin/ в качестве параметра).

Есть два дополнительных параметра, которые вы могли бы использовать в функции, но, которые здесь не приводятся. Они могут принимать, только булевые значения — истина или ложь.

Первый означает, что cookie будет передан только через защищенное соединение HTTPS, а второй, что cookie не будет доступен через JavaScript (введено в PHP 5.2).

Для большинства практических целей, вам потребуются только первые четыре параметра, остальные можно пропустить.

Чтение cookies
Чтение cookie с помощью PHP намного проще. Все cookies, которые были переданы скрипту, доступны в суперглобальном массиве $_COOKIE.

В нашем примере, чтобы прочитать cookie, мы написали следующий код:
$visits = (int)$_COOKIE['pageVisits']+1;
echo "You visited this site: ".$visits." times";

Стоит отметить, что запись cookies через setcookie доступна в массиве $ _COOKIE на next page load.
Запомните это.

Удаление cookies
Чтобы удалить cookies, просто используйте функцию setcookie с параметром срока действия прошедшего времени.
setcookie(
	'pageVisits',
	$visited,
	time()-7*24*60*60,		//Одна неделя назад и cookie будет удален.
	'/',
	'demo.tutorialzine.com'
);

Cookies и jQuery
Чтобы использовать cookies с jQuery, вам необходим специальный .

Запись cookies
Запись cookies с плагином Cookie интуитивно понятна:
$(document).ready(function(){

	$.cookie("kittens","Seven Kittens");

	$.cookie("demoCookie",text,{expires: 7, path: '/', domain: 'demo.tutorialzine.com'});
});

Чтение cookies
Чтение cookie еще проще. Просто вызовите функцию $.cookie() с параметром имени, значение cookie будет возвращено:
$(document).ready(function(){

	var str = $.cookie("kittens");
});

Удаление cookies
Чтобы удалить куки, снова используйте функцию $.cookie(), но в качестве второго параметра укажите значение null.
$(document).ready(function(){

	var str = $.cookie("kittens",null);
});

Заключение
В этой статье мы рассмотрели создание и чтение данных cookie. Стоит отметить, что Вы не должны хранить в cookies какой-либо конфиденциальной информации, такой как, имена пользователей и пароли, так как они передаются, как обычные заголовки на каждой странице, и могут быть легко прочитаны злоумышленниками.

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

Добавлено: 04 Мая 2018 08:38:00 Добавил: Андрей Ковальчук