Очередной блог фрилансера » ajax

Простой, перетаскиваемый элемент на jQuery

dreamhelg — Mon, 23 Nov 2009 07:54:16 +0000

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

Сценарий

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

Начало

Для этого примера нам понадобится библиотека jQuery, jQuery UI и плагин JQuery-JSON. Кроме этого, мы также будем использовать PHP и базу данных MySQL для разбора и хранения наших данных. Если вы новичок в jQuery, не беспокойтесь. JQuery - это расширяемая, быстрая и легковесная JavaScript-библиотека, которую легко и весело использовать. Библиотека имеет хорошо структурированную документацию и огромное сообщество.

HTML и CSS

Начнем с HTML-разметки и стилей для нашего примера. Сначала CSS: [css] html, body { background:#151515; margin:0 0 0 0; padding:0 0 0 0; } #glassbox { background:#333; border:1px solid #000; height:400px; margin:30px auto auto auto; position:relative; width:960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #element { background:#666; border:1px #000 solid; cursor:move; height:143px; padding:10px 10px 10px 10px; width:202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #respond{ color:#fff; margin:0 auto 0 auto; width:960px; } [/css] CSS – очень простой. Мы назначаем html и body нулевые свойства, для чистки внешних и внутренних отступов, далее устанавливаем значения высоты, ширины и другие свойства для наших элементов. -moz-border-radius и -webkit-border-radius – это два свойства, позволяющие нам создать закругленные углы (работает пока только в Mozilla Firefox и Safari 3) для наших элементов. Теперь, давайте взглянем на HTML: [html] Simple Draggable Element Persistence with jQuery

Move the Box

[/html] Как видите, мы создали очень простую страницу, в которую подключили наш CSS, библиотеку JavaScript и плагины, кроме того, страница содержит элементы, к которым мы будем применять некоторые эффекты и события. Обратите внимание, что файл jquery-ui представляет собой специальную сборку, включающую в себя только ядро и функции перетаскивания элементов.

JavaScript

Теперь самое интересное! Сначала давайте рассмотрим базовые функции, которые мы будем использовать для применения некоторых эффектов к нашим элементам. Разберем все до основания. [javascript] [/javascript] Поместите этот код ниже HTML, сразу после закрывающего тега body.

PHP

Хорошо, давайте сделаем что-нибудь с данными, которые приходят от нашего JQuery. Сначала нужно создать простую базу данных, для хранения наших координат, которые мы впоследствии будем использовать для определения позиции нашего элемента. Затем, нам понадобится файл config.php, в котором будут записаны параметры подключения к базе данных, а затем мы перейдем к updatecords.php. SQL [sql] Database: 'xycoords' CREATE TABLE IF NOT EXISTS `coords` ( `id` int(11) NOT NULL AUTO_INCREMENT, `x_pos` int(4) NOT NULL, `y_pos` int(4) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; [/sql] Config.php [php] [/php] updatecoords.php [php] coords as $item) { //Extract X number for panel $coord_X = preg_replace('/[^\d\s]/', '', $item->coordTop); //Extract Y number for panel $coord_Y = preg_replace('/[^\d\s]/', '', $item->coordLeft); //escape our values - as good practice $x_coord = mysqli_real_escape_string($link, $coord_X); $y_coord = mysqli_real_escape_string($link, $coord_Y); //Setup our Query $sql = "UPDATE coords SET x_pos = '$x_coord', y_pos = '$y_coord'"; //Execute our Query mysqli_query($link, $sql) or die("Error updating Coords :".mysqli_error()); } //Return Success echo "success"; ?> [/php] Здесь все довольно просто. Первое, что мы делаем – это проверяем, были ли переданы данные в файл. Если это произошло, мы включаем наш файл с настройками config.php и назначаем переменной $data значение json_decode(passed post variable); json_decode – это PHP-функция, представленная в PHP 5.2.0, которая позволяет декодировать строку JSON. Поскольку наша переменная $data содержит массив данных, нам нужно разобрать его на части, чтобы получить нужные значения. Для этого мы пройдемся по массиву $data->coords () (который был получен из переменной order в JavaScript) и обработаем каждый элемент. В результате, из каждой пары ключ – значение будет создан объект списка, который мы в дальнейшем укажем и создадим переменную для его вывода. При этом мы будем использовать функцию preg_replace, для исключения ненужных символов. Кроме того, мы подготовим наши значения для вставки в базу данных, путем экранирования кавычек, и апострофов, с помощью функции mysqli_real_escape_string. Если все прошло хорошо, нам нужно будет вернуть успешный результат JavaScript.

В заключение

Теперь, когда у нас уже все готово, для того чтобы получить координаты элемента и передать их в PHP для записи, нам понадобится изменить нашу HTML-разметку для отображения позиции элемента. Для этого, мы удалим простую HTML-разметку и создадим ее с помощью PHP: [php]

Move the Box

'; } ?>

[/php] Здесь мы исполняем простой запрос к базе данных для выбора всех строк из таблицы coords. Затем мы вызываем цикл while, который определяет каждую выбранную нами строчку как $row. Теперь, мы можем назначить переменные равными каждой, индивидуальной строке, полученной из базы данных, и выводим их в соответствующем месте. Скачать архив с примером. Перевод статьи «Simple Draggable Element Persistence with jQuery», автор Dustin Blake

Красивая форма обратной связи на основе AJAX

dreamhelg — Fri, 13 Nov 2009 08:56:14 +0000

Предоставление посетителям сайта простого и надежного средства обратной связи – это важнейшая часть любого веб-проекта. Наиболее простым и часто используемым каналом обратной связи - являются контактные формы. Посмотреть результат можно здесь. В сегодняшней статье, мы создадим форму обратной связи на аяксе, с использованием современных техник веб-разработки. Для этого мы будем использовать PHP, CSS и jQuery в виде нескольких плагинов. Плагин formValidator будем использовать для проверки введенных значений, а с помощью плагина jQTransform, будем стилизовать текстовые поля и кнопки нашей формы. В дополнение, мы будем использовать класс PHPMailer для отправки на почту введенных данных. Кроме того, наша форма будет прекрасно работать даже с выключенным JS. *Для нормальной работы примера, вам понадобится PHP5

Шаг 1 – XHTML

Сначала нам понадобится XHTML-разметка для формы. demo.php [html]

Fancy Contact Form

Drop us a line and we will get back to you

[/html] Как вы могли заметить в строке 8, обрабатывать нашу форму будет файл submit.php. Мы будем использовать этот файл в обоих случаях – как для обычной отправки формы (для посетителей с выключенным JS), так и для аяксовой отправки формы. Это позволит легко обновлять код, без необходимости объединять изменения между файлами. Далее, мы можете видеть, что мы используем массив $_SESSION для заполнения текстовых полей значениями. Это делается для того, чтобы данные не потерялись во время перенаправления страницы, которое происходит во время отправки формы в submit.php. Другой важный аспект – это классы, назначенный текстовым полям – classs=”validate[required,custom[onlyLetter]]”. Эти классы используются плагином валидации для определения правил проверки введенных значений для каждого текстового поля. В нашем примере, мы указываем, что поле обязательное, и разрешено вводить только буквы. Существует множество доступных правил валидации, вы можете узнать о них на домашней странице плагина. Теперь взгляните, как будет выглядеть наша форма, с применением плагина JQtransform.

Шаг 2 – jQuery

МЫ используем два плагина jQuery – jQtransform для стилизации элементов формы, и formValidator для проверки введенных значений на клиентской стороне. Очень важно помнить, что кроме клиентской стороны, введенные данные всегда нужно проверять на серверной стороне. Итак, для начала нам нужно подключить все необходимые библиотеки. demo.php [php] [/php] Указанный выше код расположен в секции head, файла demo.php. Сначала мы подключаем CSS-файлы, используемые обоими плагинами, а затем уже библиотеку JQuery и плагины. Возможно, вас заинтересовала строка 5 – это специальный набор CSS-правил, который мы создадим с помощью PHP, для отображения подтверждающего сообщения, как вы увидите в дальнейшем. Теперь, давайте посмотрим на наш файл script.js. script.js [javascript] $(document).ready(function(){ /* after the page has finished loading */ $('#contact-form').jqTransform(); /* transform the form using the jqtransform plugin */ $("button").click(function(){ $(".formError").hide(); /* hide all the error tooltips */ }); var use_ajax=true; $.validationEngine.settings={}; /* initialize the settings object for the formValidation plugin */ $("#contact-form").validationEngine({ /* create the form validation */ inlineValidation: false, promptPosition: "centerRight", success : function(){use_ajax=true}, /* if everything is OK enable AJAX */ failure : function(){use_ajax=false} /* in case of validation failure disable AJAX */ }) $("#contact-form").submit(function(e){ if(!$('#subject').val().length) { $.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error") /* a custom validation tooltip, using the buildPrompt method */ return false; } if(use_ajax) { $('#loading').css('visibility','visible'); /* show the rotating gif */ $.post('submit.php',$(this).serialize()+'&ajax=1', /* using jQuery's post method to send data */ function(data){ if(parseInt(data)==-1) $.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error"); /* if there is an error, build a custom error tooltip for the captcha */ else { $("#contact-form").hide('slow').after('

Thank you!

'); /* show the confirmation message */ } $('#loading').css('visibility','hidden'); /* hide the rotating gif */ }); } e.preventDefault(); /* stop the default form submit */ }) }); [/javascript] Весь блок скрипта выполняется внутри метода $(document).ready, который гарантирует нам, свое исполнение, только после окончания загрузки страницы. Далее, мы используем метод jqTransform(), который определен в плагине jqtransform. Он переделывает и стилизует все элементы формы (тестовые поля, кнопки и др.) Элемент select заменяется набором дивов и ссылок. Это выглядит здорово, однако влечет за собой некоторые проблемы с плагином валидации, в связи с чем, тултип для селекта нам придется сделать вручную. После этого, в строке 7, вешаем обработчик событий на нажатие кнопки в нижней части формы, с одной строкой кода, которая прячет отображаемые тултипы с сообщениями об ошибках. Это для того, чтобы страница правильно обновлялась, и подсказки не оставались на странице, если пользователь ввел правильные данные. Далее, мы инициализируем плагин formValidation, с помощью метода validationEngine() и в строке 24 описываем событие формы onsubmit. Пара моментов, на которые стоит обратить внимание здесь – отдельный тултип в строке 28, и дополнительный параметр ajax=1, в строке 39. Этот параметр использует файл submit.php, для того чтобы определить, передан ли запрос с помощью аякса или получен непосредственно через отправку формы. Также, обратите внимание, что мы используем специальную переменную use_ajax, для предотвращения работы аякса, если форма не прошла проверку.

Шаг 3 – CSS

Все наши CSS-правила описаны в файле demo.css demo.css [css] body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* reset some of the page elements */ margin:0px; padding:0px; } body{ color:#555555; font-size:13px; background: url(img/dark_wood_texture.jpg) #282828; font-family:Arial, Helvetica, sans-serif; } .clear{ clear:both; } #main-container{ width:400px; margin:30px auto; } #form-container{ background-color:#f5f5f5; padding:15px; /* rounded corners */ -moz-border-radius:12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; } td{ /* prevent multiline text */ white-space:nowrap; } a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } h1{ color:#777777; font-size:22px; font-weight:normal; text-transform:uppercase; margin-bottom:5px; } h2{ font-weight:normal; font-size:10px; text-transform:uppercase; color:#aaaaaa; margin-bottom:15px; border-bottom:1px solid #eeeeee; margin-bottom:15px; padding-bottom:10px; } label{ text-transform:uppercase; font-size:10px; font-family:Tahoma,Arial,Sans-serif; } textarea{ color:#404040; font-family:Arial,Helvetica,sans-serif; font-size:12px; } td > button{ /* A special CSS selector that targets non-IE6 browsers */ text-indent:8px; } .error{ /* this class is used if JS is disabled */ background-color:#AB0000; color:white; font-size:10px; font-weight:bold; margin-top:10px; padding:10px; text-transform:uppercase; width:300px; } #loading{ /* the loading gif is hidden on page load */ position:relative; bottom:9px; visibility:hidden; } .tutorial-info{ color:white; text-align:center; padding:10px; margin-top:10px; } [/css] Обратите внимание на строку 85. Это правило делает кнопки шире, но, к сожалению это плохо выглядит в IE6. Поэтому мы используем специальный CSS-селектор, который игнорируется IE6, но отлично понимают остальные браузеры. Теперь, все что нам осталось – это PHP.

Шаг 4 – PHP

Сначала давайте рассмотрим код в начале файла demo.php demo.php [php] session_name("fancyform"); session_start(); $_SESSION['n1'] = rand(1,20); /* generate the first number */ $_SESSION['n2'] = rand(1,20); /* then the second */ $_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2']; /* the expected result */ /* the code below is used if JS has been disabled by the user */ $str=''; if($_SESSION['errStr']) /* if submit.php returns an error string in the session array */ { $str='

'.$_SESSION['errStr'].'

'; unset($_SESSION['errStr']); /* will be shown only once */ } $success=''; if($_SESSION['sent']) { $success='

Thank you!

'; /* the success message */ $css=''; /* a special CSS rule that hides our form */ unset($_SESSION['sent']); } [/php] Как видите, мы используем массив $_SESSION для хранения двух случайных чисел и ожидаемого результата. Это будет использоваться в дальнейшем, файлом submit.php, для подтверждения того, что капча решена. Другой интересный момент находится в строке 21, где мы описываем простой CSS-класс. Фактически здесь, мы скрываем форму, и отображаем сообщение об успешной отправке, если у пользователя отключен JS. submit.php [php] require "phpmailer/class.phpmailer.php"; session_name("fancyform"); /* starting the session */ session_start(); foreach($_POST as $k=>$v) { /* if magic_quotes is enabled, strip the post array */ if(ini_get('magic_quotes_gpc')) $_POST[$k]=stripslashes($_POST[$k]); $_POST[$k]=htmlspecialchars(strip_tags($_POST[$k])); /* escape the special chars */ } $err = array(); /* some error checks */ if(!checkLen('name')) $err[]='The name field is too short or empty!'; if(!checkLen('email')) $err[]='The email field is too short or empty!'; else if(!checkEmail($_POST['email'])) $err[]='Your email is not valid!'; if(!checkLen('subject')) $err[]='You have not selected a subject!'; if(!checkLen('message')) $err[]='The message field is too short or empty!'; /* compare the received captcha code to the one in the session array */ if((int)$_POST['captcha'] != $_SESSION['expect']) $err[]='The captcha code is wrong!'; /* if there are errors */ if(count($err)) { /* if the form was submitted via AJAX */ if($_POST['ajax']) { echo '-1'; } /* else fill the SESSION array and redirect back to the form */ else if($_SERVER['HTTP_REFERER']) { $_SESSION['errStr'] = implode('
',$err); $_SESSION['post']=$_POST; header('Location: '.$_SERVER['HTTP_REFERER']); } exit; } /* the email body */ $msg= 'Name: '.$_POST['name'].'
Email: '.$_POST['email'].'
IP: '.$_SERVER['REMOTE_ADDR'].'

Message:

'.nl2br($_POST['message']).' '; $mail = new PHPMailer(); /* using PHPMailer */ $mail->IsMail(); $mail->AddReplyTo($_POST['email'], $_POST['name']); $mail->AddAddress($emailAddress); $mail->SetFrom($_POST['email'], $_POST['name']); $mail->Subject = "A new ".mb_strtolower($_POST['subject'])." from ".$_POST['name']." | contact form feedback"; $mail->MsgHTML($msg); $mail->Send(); unset($_SESSION['post']); /* unsetting */ /* the form was successfully sent */ if($_POST['ajax']) { echo '1'; } else { $_SESSION['sent']=1; if($_SERVER['HTTP_REFERER']) header('Location: '.$_SERVER['HTTP_REFERER']); exit; } /* some helpful functions */ function checkLen($str,$len=2) { return isset($_POST[$str]) && mb_strlen(strip_tags($_POST[$str]),"utf-8") > $len; } function checkEmail($str) { return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str); } [/php] Обратите внимание как мы проверяем переменную $_POST[‘ajax’] на предмет установки и правильной работы. Как вы наверное помните, мы устанавливаем ее ранее, в файле script.js, для определения используется ли аякс для извлечения данных. Две переменные массива $_SESSION errStr и post используются для совместного использования данных между формой и файлом submit.php, в случае выключенного JS. Здесь переменная post содержит отправленный нами массив $_POST и используется для заполнения полей формы, после того как пользователь перенаправляется обратно. На этом работа над нашей формой обратной связи подошла к концу. Пример рабочий, за исключением одного маленького недоразумения. Плагин formValidation, создан с целью проводить валидацию только английских символов, так что если вы попытаетесь написать имя по-русски, он выдаст ошибку о том, что нужно вводить только буквы. К счастью это решается путем замены регулярного выражения в файле jquery.validationEngine.js. Найдите строчки: [javascript] "onlyLetter":{ "regex":"/^[a-zA-Z\ \']+$/", } [/javascript] и замените на следующую: [javascript] "onlyLetter":{ "regex":"/^[a-zA-Zа-яА-Я' ]+$/", } [/javascript] После этого, скрипт перестанет игнорировать русские символы. Скачать архив с примером. В связи с бесконечными вопросами, специально, отдельно сообщаю: настройка адреса email на который производится отправка писем, находится в файле submit.php, в самом начале файла, выглядит вот так: [php] /* config start */ $emailAddress = ''; /* config end */ [/php] Перевод статьи "A Fancy AJAX Contact Form", автор Martin

Интерактивная корзина на основе AJAX, PHP и JQuery

dreamhelg — Thu, 24 Sep 2009 06:26:06 +0000

"Какая корзина? И почему вдруг корзина?" - возможно удивитесь вы, прочитав заголовок. Так вот, корзина самая обычная - та, которую все мы используем, покупая что-нибудь в интернет-магазине. А опубликовать статью о ее создании, я решила по одной, единственной причине - не смогла устоять перед замечательным и красивым решением. Не верите? можете посмотреть результат. А если вам интересно как это делается, читайте далее.

Вступление

В этой статье, мы собираемся создать корзину, работающую на основе технологии Ajax. Все товары будут записываться в базу данных MySQL, данные будут обрабатываться с помощью PHP. JQuery, будет запускать Ajax на странице, кроме этого, плагин simpletip, добавит всему процессу интерактивности. Итак, давайте начнем, скачайте демо-файлы, и начинайте чтение.

Шаг 1 – База данных MySQL

Если вы хотите получить рабочую демо-версию, вам понадобится выполнить следующий SQL-запрос в панели управления базой данных (то есть в phpMyAdmin). Этот запрос создаст таблицу, и внесет несколько продуктов. Этот код запроса, также доступен в файле table.sql, в демо-файлах. table.sql [sql] CREATE TABLE IF NOT EXISTS `internet_shop` ( `id` int(6) NOT NULL auto_increment, `img` varchar(32) collate utf8_unicode_ci NOT NULL default '', `name` varchar(64) collate utf8_unicode_ci NOT NULL default '', `description` text collate utf8_unicode_ci NOT NULL, `price` double NOT NULL default '0', PRIMARY KEY (`id`), UNIQUE KEY `img` (`img`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 200); INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200); INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400); INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod shuffle.', 49); INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 99); INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy it now!', 300); [/sql] После этого, вам нужно заполнить данные вашей учетной записи MySQL, в файле connect.php.

Шаг 2 – XHTML

Сначала мы создадим основную разметку. demo.php [html]

Корзина

Лучшие товары, по лучшим ценам

Товары

// php-код, который генерирует товары

Корзина

Оформить

[/html] Как вы могли заметить, из вышеприведенного кода, мы расположили наш контент в двух основных секциях, полностью идентичных с точки зрения XHTML-разметки. В первой колонке мы отображаем все наши продукты, вторая колонка выступает в качестве корзины. Ниже, вы можете увидеть детальное представление структуры нашей секции товаров. Товары, генерируются с помощью нашего PHP-кода, как можно увидеть в строке 18. Мы разберем это подробнее, через несколько минут. Теперь, давайте взглянем, как мы обработаем XHTML-разметку, для получения финального дизайна.

Шаг 3 – CSS

В этот раз, CSS-код получился очень длинный, поэтому я разделил его на две части. demo.css [css] body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* сброс первоначальных стилей, для совместимости браузеров */ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; } body{ color:#555555; font-size:13px; background-color:#282828; } .clear{ /* clear-fix хак для чистки потока от флоатов */ clear:both; } #main-container{ /* это основной контейнер, содержащий две секции */ width:700px; margin:20px auto; } .container{ /* основной контейнер для секций контента - товаров и корзины */ margin-bottom:40px; } .top-label{ /* внешний span, включающий в себя название секции*/ background: url(img/label_bg.png) no-repeat; /* отображение левой части label_bg.png - широкого изображения с закругленными краями */ display:inline-block; margin-left:20px; position:relative; margin-bottom:-15px; /* название секции прилегает к верхнему краю секции товаров*/ } .label-txt{ /* внутренний span - обведен красной рамкой, на рисунке выше*/ background: url(img/label_bg.png) no-repeat top right; /* отображение правой части изображения label_bg.png */ display:inline-block; font-size:10px; height:36px; margin-left:10px; /* слева оставлено пустое пространство, чтобы отображить фон внешнего span'а */ padding:12px 15px 0 5px; text-transform:uppercase; } .content-area{ /* Верхняя часть изображения с закругленными краями, смотрите на рисунке выше */ background:url(img/container_top.png) no-repeat #fcfcfc; padding:15px 20px 0 20px; } .content{ /* общий отступ для обеих секций */ padding:10px; } .drag-desired{ /* индивидуально назначенные свойства */ background:url(img/drag_desired_label.png) no-repeat top right; padding:20px; } .drop-here{ /* не предназначено для других секций */ background:url(img/drop_here_label.png) no-repeat top right; } .bottom-container-border{ /* нижняя часть закругленной картинки, которая завершает секцию */ background:url(img/container_bottom.png) no-repeat; height:14px; } .product{ /* стили для товаров */ border:2px solid #F5F5F5; float:left; margin:15px; padding:10px; } .product img{ cursor:move; } p.descr{ padding:5px 0; } small{ display:block; margin-top:4px; } .tooltip{ /* тултипы, которые создаются с помощью плагина simpletip */ position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:#666666; border:1px solid #666666; color:#fcfcfc; padding:10px; -moz-border-radius:12px; /* закругленные углы */ -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; } [/css] Обратите внимание на класс tooltip. Он создается автоматически, плагином simpletip, но не имеет никаких стилей, по умолчанию. Вот почему, мы назначаем ему стиль здесь. Я использовал свойство border-radius, которое еще не поддерживается всеми браузерами, но не принесет сильного ущерба, тем, кто его не поддерживает. Теперь, давайте взглянем на CSS-стили, для секции корзины. [css] #cart-icon{ /* div, который содержит иконку корзины */ width:128px; float:left; position:relative; /* устанавливаем относительное позиционирование, так, чтобы ajax-загрузчик позиционировался по отношению к div*/ } #ajax-loader{ position:absolute; /* абсолютное позиционирование располагает элемент на странице, относительно его родительского элемента, которому назначено относительное позиционирование */ top:0px; left:0px; visibility:hidden; } #item-list{ /* содержимое корзины будет расположено в этом блоке */ float:left; width:490px; margin-left:20px; padding-top:15px; } a.remove,a.remove:visited{ /* Удаление ссылки */ color:red; font-size:10px; text-transform:uppercase; } #total{ /* блок, с общей суммой */ clear:both; float:right; font-size:10px; font-weight:bold; padding:10px 12px; text-transform:uppercase; } #item-list table{ /* каждый товар в корзине, позиционируется внутри блока item-list*/ background-color:#F7F7F7; border:1px solid #EFEFEF; margin-top:5px; padding:4px; } a.button,a.button:visited{ /* Кнопка оформления заказа */ display:none; height:29px; width:136px; padding-top:15px; margin:0 auto; overflow:hidden; color:white; font-size:12px; font-weight:bold; text-align:center; text-transform:uppercase; background:url(img/button.png) no-repeat center top; /* отображаем только верхнюю часть фонового изображения */ } a.button:hover{ background-position:bottom; /* при наведении, мы показываем нижнюю часть фоногового изображения */ text-decoration:none; } /* Несколько менее интересных стилей */ a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } h1{ font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; } h2{ font-weight:normal; font-size:20px; color:#666666; text-indent:30px; margin:20px 0; } .tutorialzine h1{ color:white; margin-bottom:10px; font-size:48px; } .tutorialzine h3{ color:#F5F5F5; font-size:10px; font-weight:bold; margin-bottom:30px; text-transform:uppercase; } .tutorial-info{ color:white; text-align:center; padding:10px; margin-top:-20px; } [/css] Любой разработчик скажет нам, что здесь мы кое-что упустили. Как вы, наверное, догадались – специальные процедуры лечения для IE6. Лично я, планирую в скором времени прекратить поддержку IE6 во всех своих проектах – если бы не IE6, вышеприведенный код, был бы на четверть короче, и мне не пришлось бы тратить столько времени на его отладку. Но, в любом случае, вот, что нам нужно, чтобы IE6 понимал, то, что мы от него хотим: demo.php [html] [/html] Отлично. Теперь, давайте взглянем на окончательный вариант PHP.

Шаг 4 – PHP

Мы используем PHP несколькими способами и в разных местах. Для начала, давайте посмотрим, как формируется список товаров на главной странице. demo.php [php]

'; ?> [/php] Далее, в файле tips.php, мы снова используем PHP, для того чтобы передать в качестве параметра имя файла картинки, проверяя какой товар ассоциируется с этим изображением, и выводим подсказку в виде HTML. Это позднее, будет использоваться плагином simpletip. ajax/tips.php [php] '.$row['name'].'

'.$row['description'].'

price: $'.$row['price'].' Для того, чтобы купить, просто перетащите его в коризну'; ;?> [/php] Кроме этого, мы используем PHP для получения данных, необходимых для добавления товаров в корзину. Разница в том, что в этот раз мы получаем данные в качестве JSON (javascript-объекта). ajax/addtocart.php [php] \ \ '.$row['name'].'\ $'.$row['price'].'\

Name
Email
Subject
Message	<?=$_SESSION['post']['message']?>
+ =