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

Эффект неонового текста с помощью CSS и JQuery

dreamhelg — Wed, 09 Jun 2010 05:00:07 +0000

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

Шаг 1 – Дизайн

Первым делом, для достижения такого эффекта, нам нужно создать фоновое изображение, содержащее две, слегка отличающиеся версии текста. jQuery будет плавно переключаться между этими изображениями, создавая красивый эффект свечения. Итак, открываем фотошоп и создаем новый документ, 650х300 пикселей, в качестве фонового цвета указываем #141414. Для заголовка используйте свой любимый шрифт, в приведенном примере – это Century Gothic, размер 60px. После этого, Ctrl + клик по иконке текстового слоя в палитре слоев, для выделения всего текста. Используйте инструмент прямоугольного выделения, зажав Shift + Alt, для того, чтобы ограничить выделение текста одним словом. Далее, сохраняя выделение, создайте новый слой под названием “gradients”, и кликните по нему, для активации. Теперь, возьмите инструмент градиента и раскрасьте каждое слово, поочередно переключая выделение между отдельными словами. Выделение отдельных слов требуется для ограничения области действия градиента, к тому же мы предварительно активировали слой “gradients”, с тем, чтобы все изменения были сохранены на нем. После того, как вы раскрасите весь заголовок, дублируйте слой, расположив его ниже основного, и примените другой набор градиентов. В результате, у нас получилась картинка, с двумя разноцветными заголовками, так что мы легко сможем переключаться между ними, путем простого изменения свойства background-position в CSS. Вы найдете psd-файл данного изображения, в архиве с приведенным примером.

Шаг 2 – XHTML

XHTML-разметка очень простая, вам понадобится только контейнер (#neonText H1), который будет содержать две версии фона. [html]

Neon Text Effect With jQuery & CSS.

[/html] Слой layer1, постепенно уменьшая свою прозрачность, создает плавный эффект неонового свечения, за счет того, что он расположен поверх слоя layer2. Исходя из соображений поисковой оптимизации, мы также создадим текст, соответствующий надписи на картинке, который будет скрыт с помощью отрицательного значения свойства text-indent.

Шаг 3 – CSS

Стили, используемые для этого эффекта – также очень простые. Два элемента span, которым назначено одинаковое фоновое изображение, с разницей в позиционировании. Один элемент показывает только верхнюю часть картинки, а второй, только нижнюю. [css] /* The two text layers */ #neonText span{ width:700px; height:150px; position:absolute; left:0; top:0; background:url('img/text.jpg') no-repeat left top; } span#layer1{ z-index:100; } span#layer2{ background-position:left bottom; z-index:99; } /* The h1 tag that holds the layers */ #neonText{ height:150px; margin:180px auto 0; position:relative; width:650px; text-indent:-9999px; } [/css] Контейнер #neonText позиционирован относительно, с тем, чтобы внутренние элементы span, располагались точно один над другим. Кроме того, обратите вниманием на свойство text-indent, которое скрывает текстовое содержимое нашего контейнера.

Шаг 4 – jQuery

Последнее, что нам осталось сделать – создать анимацию переключения блоков. Поскольку мы используем jQuery (предварительно подключив его на страницу тэгом script), в нашем распоряжении есть два удобных метода fadeIn и fadeOut, которые мы используем в следующем коде. [javascript] $(document).ready(function(){ setInterval(function(){ // Selecting only the visible layers: var versions = $('.textVersion:visible'); if(versions.length<2){ // If only one layer is visible, show the other $('.textVersion').fadeIn(800); } else{ // Hide the upper layer versions.eq(0).fadeOut(800); } },1000); }); [/javascript] Функция, расположенная внутри выражения setinterval, выполняется каждую секунду, отображая/скрывая слой с первым контейнером span. Скачать архив с примером. Перевод статьи “Neon Text Effect With jQuery & CSS”, автор Martin

Инструменты для тестирования и отладки в IE

dreamhelg — Fri, 26 Mar 2010 05:00:02 +0000

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

Сборки браузеров

В первую очередь конечно же нужно установить все популярные версии Internet Explorer (IE6, IE7, IE8). Для этого существует множество различных решений, я расскажу о четырех из них.

Internet Explorer Collection

Лично я рекомендую использовать – Internet Explorer Collection. Не пугайтесь, это очень надежный инструмент (несмотря на внешний вид их сайта). Internet Explorer Collection содержит множество версий IE, совершенно независимых друг от друга, так что их можно использовать одновременно. Я рекомендую эту сборку главным образом потому, что их браузеры весьма стабильны. Кроме того, Internet Explorer Collection содержит Internet Explorer Developer Toolbar.

BrowserSeal.BrowserPack

Если вам требуются более старые версии других браузеров, я рекомендую установить BrowserSeal.BrowserPack. Он использует, упомянутый выше Internet Explorer Collection, и кроме того, позволяет установить браузеры типа Safari3 и Opera 9. Браузеры, входящие в состав BrowserSeal.BrowserPack стабильны и не имеют никаких выявленных проблем.

IETester

IETester имеет некоторые преимущества в сравнении с другими сборками, например такие как открытие разных версий IE в табах. IETester разрабатывается командой DebugBar, которая так же предоставляет замечательные инструменты отладки DebugBar и Companion.js (оба рассмотрены в сегодняшней статье). К сожалению, IETester (версии 0.4.2) остается весьма ненадежным приложением, к тому же во время отладки находятся некоторые несоответствия. Будем надеяться, что рано или поздно эти проблемы будут исправлены, и мы сможем взять IETester на вооружение.

Microsoft Expression Web SuperPreview

Microsoft Expression Web SuperPreview – это полноценное приложение и часть продукта Microsoft Expression Web 3. Главное его назначение – это возможность сравнить одну и ту же страницу одновременно в IE6, IE7 и IE8. На мой взгляд, это приложение не предназначено для отладки и тестирования.

Основные инструменты отладки

Скорее всего, для отладки в Firefox, вы используете Firebug. И возможно, вы также слышали о Firebug Lite и даже использовали его. Далее, вы узнаете какие еще способы можно использовать для отладки кода под Internet Explorer.

Firebug Lite

Конечно же, вы уже знакомы с Firebug Lite. Если нет, читайте далее. Firebug Lite – это javascript-файл, который можно подключить к странице, чтобы получить возможность использовать некоторые функции Firebug, в других браузерах. Скажу сразу, я не являюсь большим фанатом Firebug Lite. Во-первых потому, что большинство возможностей консоли недоступны в других браузерах. Во-вторых, он не всегда хорошо работает. Мне не раз приходилось сталкиваться с рядом проблем в IE, поэтому не стоит концентрироваться только на этом инструменте.

IE Developer Toolbar

Возможно, вы знакомы с инструментами разработчика под IE8. IE Developer Toolbar – практически тот же самый инструмент для IE6 и IE7. И кроме того, он поставляется вместе со сборкой IE Collection, по умолчанию. IE Developer Toolbar прост в использовании и предоставляет широкий набор средств для отладки. По функциональности, его можно сравнить с Web Developer – дополнением для Firefox.

DebugBar

Все, чего вам не хватило в Developer Toolbar, вы найдете в DebugBar. В большинстве случаев, когда вам требуется найти что-либо за пределами документа, вам поможет DebugBar. Он очень быстрый и надежный. Если бы требовалось описать DebugBar в двух словах, то достаточно сказать “он работает!”.

CompanionJS

Companion.js интегрируется с IE, и вполне может быть назван простейшей версией Firebug. В отличие от Firebug Lite, Companion.js, имеет более удобную консоль и отчеты об ошибках. К сожалению, в Companion.js есть два серьезных недостатка: 1) он пока не поддерживает методы типа console.dir(); и 2) иногда вываливается в ошибку, при совместном использовании с другими инструментами разработчика для IE.

Инструменты тестирования производительности

Клиентское тестирование производительности и оптимизация – это практика, которая долгое время “не существовала” в веб-разработке. Я имею в виду, что ей долгое время не уделяли должного внимания. Как вам наверное известно, Internet Explorer (особенно IE6), не настолько хорош, особенно в сравнении с другими браузерами. Но, когда вы начнете тестировать производительность в IE6, вы удивитесь, насколько незначительные вещи могут влиять на скорость работы сайта. Далее рассмотрены некоторые инструменты тестирования производительности, которые можно использовать в любом браузере, не столько в Internet Exploer.

dynaTrace AJAX

Если вы используете Speed Tracer в Google Chrome, тогда вы полюбите dyna Trace AJAX. Название говорит само за себя – он используется для диагностики и отслеживания AJAX, а также проблем с производительностью клиентских скриптов. Кроме того, в дополнение, он предоставляет инструменты для отслеживания проблем рендера (отрисовки) и сетевой загрузки. dynaTrace AJAX не самый простой в использовании инструмент. Однако в их одноименном блоге, вы найдете множество полезной информации, об применении этого мощного приложения. Установите dynaTrace AJAX, и разрешите все проблемы производительности, замедляющие работу сайта в Internet Explorer.

MySpace’s Perfomance Tracker

MySpace’s Perfomance Tracker или “msfast” – это плагин для браузера, который помогает разработчикам улучшить производительность кода, путем сбора и измерения возможных “узких мест”, на веб-странице. У меня возникли небольшие проблемы, при установке бета-версии. Но после того, как была установлена альфа-версия и произведено обновление до бета-версии, все заработало.

JSLitmus

JSLitmus – это простой инструмент для создания специализированных JavaScript-тестов. Я особенно рекомендую использовать JSLitmus для тестирования производительности всего вашего JavaScript-кода. JSLitmus предоставляет дополнительные преимущества в Internet Explorer. Как известно, в IE, существуют проблемы с JavaScript, способные нанести серьезный удар по производительности. Но если вы заранее создадите несколько простых тестов, то времени на поиск и решение этих проблем уйдет гораздо меньше.

Fiddler2

Fiddler – это отладочный прокси-сервер, ведущий логи всего HTTP(S) трафика. Fiddler позволяет вам проверить весь HTTP(S) трафик, установить точки прерывания и “играть” с исходящими и входящими данными. Fiddler включает мощную скриптовую подсистему, и может быть расширен с помощью любого .NET языка. Если честно, я практически не использую Fiddler. В основном потому, что проблемы производительности связанные с трафиком сайта, всегда решаются с помощью другого инструмента (в другом браузере). Но Fiddler на самом деле дает отличное понимание того, что действительно происходит между браузером и сервером, и кроме того предоставляет большое количество настроек.

Другие ресурсы

Во время написания статьи, мне попался инструмент под названием IEInspector. Инструмент платный, но есть бесплатная демо-версия. У меня не было времени рассмотреть его подробнее, возможно вы захотите попробовать его. Кроме того, на сайте Microsoft Windows, есть список, в котором перечислены полезные инструменты для тестирования и разработки приложений под Internet Explorer 8. Существует еще множество других интересных приложений и сервисов, которые не рассмотрены в этой статье. Если вы знаете хорошие инструменты тестирования и отладки кода под Internet Explorer, оставляйте ссылки в комментариях. Перевод статьи "Debugging and Testing in Internet Explorer Made Easy", автор Samuli Hakoniemi

Создаем счетчик загрузок файла с помощью PHP и MySQL

dreamhelg — Thu, 18 Mar 2010 13:38:43 +0000

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

Шаг 1 – XHTML

Для начала нам понадобится XHTML-разметка. Она очень простая – это общий блок file-manager, содержащий маркированный список, в котором ссылка на каждый файл будет находится внутри элемента li. Файлы, по которым будет учитываться количество скачиваний, нужно загрузить в папку files, расположенную в корневой директории скрипта (вы можете посмотреть как организована структура файлов, в архиве с приведенным примером). PHP будет проходить циклом по всем файлам в папке, и добавлять каждый файл в виде отдельного элемента li, в маркированный список. demo.php [html]

photoShoot-1.0.zip 0 download

[/html] Обратите внимание, что атрибут href у ссылки передает имя загружаемого файла в качестве параметра для файла download.php. Именно здесь будет происходить подсчет загрузок, как вы увидите в дальнейшем. Вам не обязательно пользоваться именно этим интерфейсом для организации подсчета загрузок. Вы можете просто разместить ссылки на download.php на страницах блога или сайта, и все загрузки будут подсчитаны правильно.

Шаг 2 – CSS

После того как наша XHTML-разметка готова, мы можем сконцентрироваться на внешнем виде нашего скрипта. CSS-стили, представленные ниже, назначают внешний вид блоку file-manager, через его ID, поскольку он у нас один на странице. Остальные элементы стилизуются через имена классов. style.css [css] #file-manager{ background-color:#EEE; border:1px solid #DDD; margin:50px auto; padding:10px; width:400px; } ul.manager li{ background:url("img/bg_gradient.gif") repeat-x center bottom #F5F5F5; border:1px solid #DDD; border-top-color:#FFF; list-style:none; position:relative; } ul.manager li a{ display:block; padding:8px; } ul.manager li a:hover .download-label{ /* When a list is hovered over, show the download green text inside it: */ display:block; } span.download-label{ background-color:#64B126; border:1px solid #4E9416; color:white; display:none; font-size:10px; padding:2px 4px; position:absolute; right:8px; text-decoration:none; text-shadow:0 0 1px #315D0D; top:6px; /* CSS3 Rounded Corners */ -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } span.download-count{ color:#999; font-size:10px; padding:3px 5px; position:absolute; text-decoration:none; } [/css] Обратите внимание, что здесь подпись “download” скрыта по умолчанию, с помощью свойства display: none. Она отображается через display:block, только при наведении мыши на ссылку, без использования JavaScript. Немного CSS3 используется для закругления уголков у подписи.

Шаг 3 – PHP

Как мы уже говорили выше, PHP проходит циклом по всей папке files, и выводит каждый файл в виде элемента li маркированного списка. Давайте рассмотрим подробнее, как это происходит. demo.php - Верхняя часть [php] // Error reporting: error_reporting(E_ALL^E_NOTICE); // Including the DB connection file: require 'connect.php'; $extension=''; $files_array = array(); /* Opening the thumbnail directory and looping through all the thumbs: */ $dir_handle = @opendir($directory) or die("There is an error with your file directory!"); while ($file = readdir($dir_handle)) { /* Skipping the system files: */ if($file{0}=='.') continue; /* end() returns the last element of the array generated by the explode() function: */ $extension = strtolower(end(explode('.',$file))); /* Skipping the php files: */ if($extension == 'php') continue; $files_array[]=$file; } /* Sorting the files alphabetically */ sort($files_array,SORT_STRING); $file_downloads=array(); $result = mysql_query("SELECT * FROM download_manager"); if(mysql_num_rows($result)) while($row=mysql_fetch_assoc($result)) { /* The key of the $file_downloads array will be the name of the file, and will contain the number of downloads: */ $file_downloads[$row['filename']]=$row['downloads']; } [/php] Обратите внимание, как мы выбираем все записи из таблицы download_manager с помощью mysql_query() и затем добавляем их в массив $file_downloads, с ключом массива filename, и значением downloads. Таким образом, далее в коде, мы сможем записать $file_downloads[‘archive.zip’], и вывести количество загрузок этого файла. Ниже представлен код, который используется для генерации элементов li маркированного списка. demo.php – Центральная часть [php] foreach($files_array as $key=>$val) { echo '

'.$val.' '.(int)$file_downloads[$val].' download

'; } [/php] Все очень просто – проходим циклом foreach по массиву $files_array, и выводим на страницу нужные данные в соответствующей разметке. Теперь давайте более подробно рассмотрим как происходит учет загрузок. download.php [php] // Error reporting: error_reporting(E_ALL^E_NOTICE); // Including the connection file: require('connect.php'); if(!$_GET['file']) error('Missing parameter!'); if($_GET['file']{0}=='.') error('Wrong file!'); if(file_exists($directory.'/'.$_GET['file'])) { /* If the visitor is not a search engine, count the downoad: */ if(!is_bot()) mysql_query(" INSERT INTO download_manager SET filename='".mysql_real_escape_string($_GET['file'])."' ON DUPLICATE KEY UPDATE downloads=downloads+1"); header("Location: ".$directory."/".$_GET['file']); exit; } else error("This file does not exist!"); /* Helper functions: */ function error($str) { die($str); } function is_bot() { /* This function will check whether the visitor is a search engine robot */ $botlist = array("Teoma", "alexa", "froogle", "Gigabot", "inktomi", "looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory", "Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot", "crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp", "msnbot", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz", "Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot", "Mediapartners-Google", "Sogou web spider", "WebAlta Crawler","TweetmemeBot", "Butterfly","Twitturls","Me.dium","Twiceler"); foreach($botlist as $bot) { if(strpos($_SERVER['HTTP_USER_AGENT'],$bot)!==false) return true; // Is a bot } return false; // Not a bot } [/php] Здесь обязательно нужно проверить, не является ли посетитель роботом поисковой системы, сканирующим ваши ссылки. Роботы – это хорошие посетители, поскольку они помогают включить ваш сайт в поисковые сервисы, однако в нашем случае, они могут исказить статистику загрузок. Вот почему база данных обновляется только после того, как посетитель пройдет проверку is_bot().

Шаг 4 – MySQL

Как мы упоминали в предыдущем шаге, количество загрузок записывается в виде строки, в таблицу download_manager, базы данных MySQL. Сначала, позвольте объяснить как работает эта часть запроса: download.php [sql] INSERT INTO download_manager SET filename='filename.doc' ON DUPLICATE KEY UPDATE downloads=downloads+1 [/sql] Первая часть запроса говорит MySQL вставить новую строчку в таблицу download_manager, и установить значение поля filename равным имени запрашиваемого для загрузки файла. Кроме этого, поле filename определено как уникальный индекс таблицы. Это значит, что строка с конкретным именем файла, может быть вставлена только один раз, иначе произойдет ошибка дублирования ключевых полей. Именно в этом случае, вступает в силу вторая часть запроса - ON DUPLICATE KEY UPDATE, которая увеличивает значение поля downloads на единицу, если этот файл уже записан в базе данных. Таким образом, новые файлы будут автоматически вставляться в базу данных в первый раз, после того как загружены.

Шаг 5 – jQuery

Для того, чтобы сделать наш счетчик загрузок более наглядным, было бы неплохо добавить возможность обновлять счетчик, находящийся рядом с именем файла, сразу после того, как пользователь начнет загрузку. Пока что, для того чтобы увидеть новые значения счетчиков, пользователю нужно перезагрузить страницу. Это можно исправить небольшим фрагментом кода: script.js [javascript] $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ $('ul.manager a').click(function(){ var countSpan = $('.download-count',this); countSpan.text( parseInt(countSpan.text())+1); }); }); [/javascript] Мы просто назначили обработчик события на клик по ссылке. Каждый раз, после того, как пользователь кликнет по ссылке, мы увеличиваем текущее значение загрузок на единицу.

Шаг 6 – htaccess

Нам осталось сделать еще одну вещь, прежде чем можно будет назвать работу законченной. Возможно, вы уже заметили, что некоторые типы файлов, браузер по умолчанию пытается сразу же открывать. Вместо этого, нам нужно запускать загрузку файла. Это довольно легко сделать, добавив несколько строчек внутри файла .htaccess, расположенного в папке files: [php] ForceType application/octet-stream [/php] Вот и все, наш счетчик загрузок готов.

Заключение

Чтобы запустить этот пример на своем собственном сервере, вам понадобится создать таблицу download_manager в базе данных MySQL, к которой у вас разумеется есть доступ. В архиве с примером, есть файл table.sql, который содержит необходимый SQL-код, который создаст нужную таблицу. После этого, просто укажите свои данные подключения к базе, в файле configuration.php. Смотреть демо. Архив с приведенным примером. Перевод статьи “PHP & MySQL File Download Counter”, автор Martin Angelov

15 регулярных выражений PHP в помощь веб-разработчику

dreamhelg — Fri, 12 Feb 2010 11:49:52 +0000

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

Введение в регулярные выражения

Многим начинающим разработчикам кажется, что регулярные выражения очень сложны для понимания и использования. На самом деле, все не так уж сложно, как может показаться. Прежде чем мы непосредственно перейдем к регулярным выражениям, с их полезным и универсальным кодом, давайте взглянем на основы: Синтаксис регулярных выражений

Регулярное выражение	Означает
foo	Строка “foo”
^foo	Строка начинается с “foo”
foo$	Строка заканчивается на “foo”
^foo$	"foo" встречается в строке только один раз
[abc]	a, b, или c
[a-z]	любой символ в нижнем регистре
[^A-Z]	любой символ, не находящийся в верхнем регистре
(gif\|jpg)	Означает как "gif” так и “jpeg”
[a-z]+	Один или более символов нижнего регистра
[0-9.-]	Любая цифра, точка или знак минус
^[a-zA-Z0-9_]{1,}$	Любое слово, хотя бы одна буква, число или _
([wx])([yz])	wy, wz, xy, или xz
(^A-Za-z0-9)	Любой символ (не число и не буква)
([A-Z]{3}\|[0-9]{4})	Означает три буквы или 4 цифры

PHP-функции для регулярных выражений

Функция	Описание
preg_match()	Функция preg_match() ищет строку по заданному шаблону, возвращает true, если строка находится и false, в остальных случаях
preg_match_all()	Функция preg_match_all() находит все вхождения строки, заданной по шаблону
preg_replace()	Функция preg_replace(), действует по тому же принципу, что и ereg_replace(), за исключением того, что регулярные выражения можно использовать как для задания шаблона поиска, так и для строки, на которую следует заменить, найденное значение.
preg_split()	Функция preg_split(), действует так же как split(), за исключением того, что регулярное выражение можно использовать в качестве параметра для шаблона поиска.
preg_grep()	Функция preg_grep() ищет все элементы входного массива, возвращая все элементы, соответствующие шаблону регулярного выражения.
preg_quote()	Экранирует символы регулярного выражения

Проверка доменного имени

Проверяем, является ли строка правильным доменным именем [php] $url = "http://komunitasweb.com/"; if (preg_match('/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?(d+)?/?/i', $url)) { echo "Your url is ok."; } else { echo "Wrong url."; } [/php]

Подсветка слова в тексте

Это очень полезное регулярное выражение, с его помощью вы можете найти нужное слово и подсветить его. Особенно полезно для отображения результатов поиска. [php] $text = "Sample sentence from KomunitasWeb, regex has become popular in web programming. Now we learn regex. According to wikipedia, Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor"; $text = preg_replace("/b(regex)b/i", '1', $text); echo $text; [/php]

Подсветка результатов поиска в WordPress блоге

Как уже говорилось в предыдущем примере, этот пример кода, удобно использовать в выдаче поисковых результатов и есть отличный способ внедрить эту функцию в wordpress-блог. Откройте ваш файл search.php, и найдите функцию the_title(). Замените ее следующим кодом: [php] echo $title; [/php] Теперь, выше этой строки, добавьте этот код: [php] \0', $title); ?> [/php] Сохраните файл search.php, и откройте style.css. Добавьте следующую строку: [css] strong.search-excerpt { background: yellow; } [/css]

Получение всех картинок из HTML-документа

Если вам когда-нибудь требовалось получить все картинки с веб-страницы, этот код должен быть Вы легко сможете создать загрузчик изображений с помощью возможностей cURL [php] $images = array(); preg_match_all('/(img|src)=("|')[^"'>]+/i', $data, $media); unset($data); $data=preg_replace('/(img|src)("|'|="|=')(.*)/i',"$3",$media[0]); foreach($data as $url) { $info = pathinfo($url); if (isset($info['extension'])) { if (($info['extension'] == 'jpg') || ($info['extension'] == 'jpeg') || ($info['extension'] == 'gif') || ($info['extension'] == 'png')) array_push($images, $url); } } [/php]

Удаление повторяющихся слов (не чувствителен к регистру)

Во время печатания, часто повторяются слова? Поможет это регулярное выражение. [php] $text = preg_replace("/s(w+s)1/i", "$1", $text); [/php]

Удаление повторяющейся пунктуации

То же самое, только для пунктуации. Попрощайтесь с двойными запятыми. [php] $text = preg_replace("/.+/i", ".", $text); [/php]

Поиск XML/HTML тэгов

Эта простая функция, принимает два аргумента. Первый – это тэг, который вам нужно найти, и второй – это переменная, содержащая XML или HTML. Повторюсь, эту функцию очень удобно использовать вместе с cURL. [php] function get_tag( $tag, $xml ) { $tag = preg_quote($tag); preg_match_all('{<'.$tag.'[^>]*>(.*?).'}', $xml, $matches, PREG_PATTERN_ORDER); return $matches[1]; } [/php]

Поиск XHTML/XML тэгов с определенным значением атрибута

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

. [php] function get_tag( $attr, $value, $xml, $tag=null ) { if( is_null($tag) ) $tag = '\w+'; else $tag = preg_quote($tag); $attr = preg_quote($attr); $value = preg_quote($value); $tag_regex = "/<(".$tag.")[^>]*$attr\s*=\s*". "(['\"])$value\\2[^>]*>(.*?)<\/\\1>/" preg_match_all($tag_regex, $xml, $matches, PREG_PATTERN_ORDER); return $matches[3]; } [/php]

Поиск шестнадцатеричных значений цветов

Еще один полезный инструмент для веб-разработчика! Он позволяет вам находить/проверять шестнадцатеричные значение цвета. [php] $string = "#555555"; if (preg_match('/^#(?:(?:[a-fd]{3}){1,2})$/i', $string)) { echo "example 6 successful."; } [/php]

Поиск заголовка статьи

Этот фрагмент кода найдет и выведет на экран текст, находящийся внутри тэгов , на html-странице. [php] $fp = fopen("http://www.catswhocode.com/blog","r"); while (!feof($fp) ){ $page .= fgets($fp, 4096); } $titre = eregi("(.*)",$page,$regs); echo $regs[1]; fclose($fp); [/php]

Парсинг логов Apache

Большинство сайтов запущено на всем известном веб-сервере Apache. Если ваш сайт находится в их числе, почему бы не использовать PHP и регулярные выражения для разбора логов апача? [php] //Logs: Apache web server //Successful hits to HTML files only. Useful for counting the number of page views. '^((?#client IP or domain name)S+)s+((?#basic authentication)S+s+S+)s+[((?#date and time)[^]]+)]s+"(?:GET|POST|HEAD) ((?#file)/[^ ?"]+?.html?)??((?#parameters)[^ ?"]+)? HTTP/[0-9.]+"s+(?#status code)200s+((?#bytes transferred)[-0-9]+)s+"((?#referrer)[^"]*)"s+"((?#user agent)[^"]*)"$' //Logs: Apache web server //404 errors only '^((?#client IP or domain name)S+)s+((?#basic authentication)S+s+S+)s+[((?#date and time)[^]]+)]s+"(?:GET|POST|HEAD) ((?#file)[^ ?"]+)??((?#parameters)[^ ?"]+)? HTTP/[0-9.]+"s+(?#status code)404s+((?#bytes transferred)[-0-9]+)s+"((?#referrer)[^"]*)"s+"((?#user agent)[^"]*)"$' [/php]

Замена двойных кавычек “умными” кавычками

Если вы любитель типографики, вам понравится это регулярное выражение, заменяющее обычные двойные кавычки, на “умные кавычки”. Похожее регулярное выражение используется в wordpress в контенте страницы. [php] preg_replace('B"b([^"x84x93x94rn]+)b"B', '?1?', $text); [/php]

Комплексная проверка пароля

Это регулярное выражение будет следить за тем, чтобы в текстовое поле было введено не менее шести символов, цифры, дефисы и подчеркивания. Текстовое поле должно содержать как минимум один символ верхнего регистра, один нижнего регистра и одну цифру. [php] 'A(?=[-_a-zA-Z0-9]*?[A-Z])(?=[-_a-zA-Z0-9]*?[a-z])(?=[-_a-zA-Z0-9]*?[0-9])[-_a-zA-Z0-9]{6,}z' [/php]

WordPress: Использование регулярного выражения для получения картинок из записи

Поскольку многие из вас являются пользователями WordPress, вам возможно пригодится код, который позволяет получить все картинки, из текста статьи, и вывести их. Для того, чтобы использовать этот код, просто вставьте его в любой файл вашей темы. [php] post_content; $szSearchPattern = '~]* />~'; // Run preg_match_all to grab all the images and save the results in $aPics preg_match_all( $szSearchPattern, $szPostContent, $aPics ); // Check to see if we have at least 1 image $iNumberOfPics = count($aPics[0]); if ( $iNumberOfPics > 0 ) { // Now here you would do whatever you need to do with the images // For this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; }; }; endwhile; endif; ?> [/php]

Генерация автоматических смайлов

Другая функция, используемая в wordpress – позволяет автоматически заменять символы смайлов на картинку смайла. [php] $texte='A text with a smiley :-)'; echo str_replace(':-)','',$texte); [/php] Перевод статьи “15 PHP regular expressions for web developers”, автор Jean-Baptiste Jung

Меркуриал. Разрешение конфликтов

dreamhelg — Thu, 17 Dec 2009 08:12:19 +0000

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

Рабочий пример

В разрешении конфликтующих изменений нет ничего сложного, и сейчас мы на примере разберем эту задачу. Первое, что нам понадобится – это исходный репозиторий с файлом, который мы впоследствии будем изменять. Создаем папку first, внутри которой, создаем простой текстовый файл, с именем letter.txt, с одним единственным, знакомым многим, предожением: Далее запускаем внутри папки командную строку, и поочередно выполняем следующие команды:

$ hg init

$ hg add letter.txt

$ hg commit –m “исходная версия текстового файла”

Здесь, мы сначала создаем репозиторий, затем добавляем в него наш файл letter.txt, и сохраняем его начальную версию. То же самое можно сделать с помощью графического интерфейса, через контекстное меню, доступное по правому клику мыши. Далее, клонируем репозиторий first, в репозиторий под названием first-one. Снова используем командную строку:

$ cd ..

$hg clone first first-one

Если вы все сделали правильно, у вас должна появится новая папка с именем first-one, заходим в нее и смело изменяем копию файла letter.txt: Сохраняем изменения, и создаем новый коммит:

$ cd first-one

$ hg commit –m “название булок изменено на норвежские”

Отлично, наш первый репозиторий с изменениями готов. Теперь снова вернемся к изначальному репозиторию first, и клонируем его еще раз. В этот раз, имя клонированного репозитория будет first-second:

$ cd ..

$ hg clone first first-second

Заходим внутрь только что клонированного репозитория first-second, и снова изменяем копию файла letter.txt: И снова повторяем действия второго этапа, записываем наши изменения:

$ cd first-second

$ hg commit –m “название булок изменено на австрийские”

Отлично, теперь у нас есть две копии одного репозитория, с разными изменениями одной и той же части предложения. Переходим к главной части нашего примера – к объединению. Для того, чтобы не было путаницы, создадим из репозитория first-one клон, и назовем его first-merge. Он как раз и будет содержать объединенные версии двух репозиториев.

$ cd ..

$ hg clone first-one first-merge

$ cd first-merge

$ hg pull –u ../first-second

В вышеприведенном коде, кроме того что мы клонировали новый репозиторий first-merge, мы еще затянули в него изменения из репозитория first-second, так что сейчас он содержит два набора взаимоисключающих изменений. Теперь самое интересное, нам нужно их объединить, так что смело запускаем команду: $ hg merge И перед вами должна предстать графическая утилита Kdiff3, предназначенная специально для разрешения конфликтов: Как раз, на представленном выше скриншоте, она сообщает нам, что у нас есть один конфликт, который не возможно разрешить автоматически. А нам и не нужно автоматически, поэтому жмем кнопку ОК, и внимательно смотрим на окошко: Здесь по порядку слева направо отображается:

A - набор изменений после которого началась развилка
B - набор изменений, содержащийся в репозитории first-one
C - набор изменений, затянутый из репозитория first-second.

Итак, для того чтобы разрешить конфликтную ситуацию, нам нужно решить, какое же изменение стоит использовать в конечном итоге. Предположим, что свежие австрийские булки будут гораздо лучше на вкус, чем черствые норвежские, поэтому, мы решаем использовать набор изменений C, который был получен из репозитория first-second. Для того чтобы использовать ревизию C, можно воспользоваться соответствующей кнопкой на панели инструментов, или пунктом меню «Merge – Select Line(s) from C» После этого нажимаем кнопку сохранить, и все окошко можно закрыть. И последний этап – создание коммита полученного объединения, как обычно воспользуемся привычной командой: $ hg commit –m “объединение двух версий” Теперь если воспользоваться командой контекстного меню «TortoiseHG – View Changelog», мы сможем увидеть как были объединены наши конфликтующие ветки: В данном примере мы рассмотрели простейший конфликт, однако, в процессе совместной работы над проектом, таких конфликтов может быть огромное количество. С помощью утилиты kDiff3, вы можете либо обрабатывать конфликты построчно, как мы только что сделали и для каждой строки назначать определенную ревизию, либо указать нужную ревизию для всех возникших конфликтов. В этом случае, указанная вами ревизия заменит своим содержанием все конфликтующие изменения, поэтому используйте ее аккуратно. В статье использовались материалы книги "Mercurial: The Definitive Guide", автор Bryan O'Sullivan

Микроформаты: Что, Почему и Как

dreamhelg — Wed, 09 Dec 2009 13:34:03 +0000

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

Что это такое?

Итак, что же такое микроформаты? На домашней странице сайта microformats.org есть такое описание:

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

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

Для чего?

Зачем же нужны микроформаты? Ну, если вы убеждены в том, что HTML должен быть семантичным, то микроформаты отлично вам подойдут. Или же, я могу привести другие аргументы: как мы уже заметили, идея микроформатов состоит в стандартизации того, как данные будут отмечены на странице, с тем, чтобы в дальнейшем, их легко можно было извлечь. На сегодняшний день существует не так уж и много инструментов, использующих возможности микроформатов, но я думаю ситуация изменится. Использование микроформатов в своей работе, подготовит ваши сайты для будущего, когда микроформаты будут более широко распространены. Опять же, на сайте, вы можете найти список того, что вы можете делать с микроформатами. Также для извлечения микроформатов, существует отличный аддон для Firefox, он называется Operator. Кроме этого, Дэн Веб создал простую JavaScript библиотеку под названием “Sumo”, которая извлекает микроформаты, используя JavaScript. Вы также можете попробовать microformats bookmarklet.

Как их использовать?

Что ж, если вы зашли так далеко, видимо вы и микроформаты просто созданы друг для друга. Так что, давайте сразу рассмотрим первый. Но прежде чем мы начнем, вот общая структура микроформатов, которую мы будем использовать: если они связаны более чем с одним элементом в нашем коде, то используются классы. Если они связаны только с одним элементом, обычно используется атрибут rel. hCalendar hCalendar - это простой способ отмечать события. Начнем с элемента, который объявляет наше событие: [html]

[/html] Если у вас предполагается несколько событий, вам нужно обернуть их в div.vcalendar, однако это не обязательно. Есть два обязательных свойства для события: дата начала (dtstart) и описание (summary). Давайте добавим их: [html]

This year, our company holiday dinner will begin at 2009-12-18T17:30.

[/html] Волне читаемо, не так ли? Но не дата! Вы правы, хотя микроформаты написаны в первую очередь для людей, даты – это единственная область, где в первую очередь важно, чтобы компьютер смог ее прочесть. Поэтому, было принято соглашение, записывать дату с помощью тэга abbr, в котором атрибут title будет выступать в роли значения свойства: [html] 5:30pm on Friday, December 18. [/html] Есть и другие, необязательные свойства, которые вы можете добавить, при желании. Например, время окончания события или расположение: [html]

We'll meet in the conference room of the Tower Hotel, which we have reserved until 9:30pm.

[/html] С помощью панели аддона Operator в Firefox, мы можем видеть это событие на нашей странице. Мы можем использовать его несколькими способами: Если я выберу экспорт в Google Calendar, он отлично перенесет в календарь данные, которые мы указали. Если хотите узнать больше о hCalendar, обратитесь к документации. hCard Давайте перейдем к hCard. hCard гораздо сложнее, чем hCalendar, но мы не будет рассматривать все детали. Если в дальнейшем, вы захотите узнать больше, читайте документацию. Снова мы начинаем с основы: [html]

[/html] Для hCard существует только два обязательных свойства: имя (n) и форматированное имя (fn). Обычно это один и тот же элемент. [html]

John Doe

[/html] Не забираясь слишком глубоко, замечу, что этот формат подразумевает что «John» - это имя, а “Doe” – фамилия. Если вы хотите это указать, вы можете использовать классы given-name и family-name: [html] John Doe [/html] Конечно, обычно требуется указать немного больше, чем просто имя. Вы можете добавить псевдоним, фото, адрес электронной почты, день рожденья, url, номер телефона, и почтовый адрес. [html]

JayDee

Personal: johndoe@gmail.com
Work: jdoe@example.com

Home: (416) 123-4567
Work 416-987-6543

January 1, 1980

My Website

123 Main Street

Toronto, Ontario M2W 4R5

Canada

[/html] Есть несколько вещей, на которые стоит обратить внимание:

Все имена классов, который я использовал здесь, являются свойствами hCard.
Некоторые свойства, такие как url или photo, получают свои значения из атрибутов href и src, а не из текста элемента.
Такие свойства как tel и email могут иметь два дочерних свойства: type и value. Если указан только type, value все равно будет подразумеваться (как вы могли заметить во втором адресе электронной почты и номере телефона).

С помощью Оператора, я могу экспортировать эти данные… … и открыть их в Outlook. Видите? Все что мы указывали, здесь! xFolk xFolk – это разрабатываемый микроформат для социальных закладок. Из документации:

Недостаток открытых, совместимых стандартов данных является главной проблемой в использовании сервисов социальных закладок. Открытый стандарт позволит легко собирать данные социальных закладок и на их основе изобретать новые сервисы… Кроме того, открытый стандарт сделает возможным написания кода JavaScript, который будет работать на любых сервисах, как сейчас сделано на del.icio.us.

Чтобы использовать xFolk, оберните каждую закладку контейнером с классом «xfolkentry»: [html]

[/html] Затем, вставьте ссылку и описание, используя классы «taggedLink» и «description», соответственно. [html] Nettuts, the best web development blog on the planet. [/html] Просто, не правда ли? Думаю, это будет весьма полезно для блог ролла или сводки последних новостей. XFN (XHTML Friends Network) XFN - это простой способ отметить человеческие взаимоотношения. С помощью атрибута rel (который является аббревиатурой отношений) в ваших ссылках, вы описываете свои взаимоотношения с владельцем страницы, на которую вы ссылаетесь. У вас могут быть взаимоотношения двух видов: с другими людьми или с самим собой (ссылки на другие ваши страницы). Очень легко описать другие страницы, владельцем которых тоже являетесь вы: [html] My Posterous My Photos My Tweets [/html] Очень просто, да? Достаточно указать rel=”me” и все готово. Отношения с другими людьми чуть более детальные, но совсем не трудные. Существует шесть категорий, которые вы можете использовать: дружеские, физические, профессиональные, географические, семейные, романтические. Я не буду перечислять их все (узнать больше можно по этой ссылке), вот несколько примеров: [html]

[/html] В первой ссылке, вы можете сообщить, с помощью атрибута rel, что-то вроде «Я встречал владельца страницы, ставлю ссылку на его страницу, и я его друг». Следующее, это моя (гипотетическая) жена, которой посчастливилось быть моей супругой и возлюбленной. Я также встречал парня по соседству, но он просто знакомый и сосед. И наконец, хотя мой (снова гипотетический) коллега является другом, обратите внимание, что я никогда не встречался с ним, это можно определить как виртуальные взаимоотношения. Я хотел бы заметить, что вы не должны использовать XFN, когда просто ставите ссылки на статью в блоге и прочее. Используйте XFN, когда вы хотите указать непосредственно на человека, когда текстом ссылки является его имя, а ссылка ведет на домашнюю страницу. VoteLinks VoteLinks – это интересная идея: когда вы ставите ссылку на статью, продукт, на все что угодно, добавляйте атрибут rev. Rev? Rev – это противник rel; в то время как rel описывает как страница на которую ведет ссылка связана с текущей страницей, rev определяет отношение текущей страницы к той, на которую идет ссылка. С помощью VoteLinks, вы можете сделать свою страницу как голосующую за материал, который доступен по ссылке. Голосовать можно за, против, или воздержатся. Например: [html]

Check our this great blog post by Collis on the netsetter

I got terrible service at the Five Seasons Grill last night

What do I think of his site redesign?

[/html] Насколько это полезно? Ну, представьте если Google (или любой другой поисковик) будет учитывать VoteLinks при выдаче результатов поиска. Сейчас, их система (правда, в общих чертах) выдает то количество ссылок, которое видит поисковик. Но что если за большинство этих ссылок являются голосами пользователей против продукта или страницы? Или как насчет сайта, который будет сканировать веб, в поисках VoteLinks, и выдавать вам список наиболее популярных страниц? Конечно это обширное поле для спекуляции, но возможно это будет интересно. Проблема в том, что для того чтобы получить какой-то эффект, использовать VoteLinks придется очень многим людям. Geo Geo очень простой, у него есть только два свойства: latitude и longitude. [html]

Apple : (37.33171397409807 -122.03051626682281)

Envato : -37° 48' 45.1008" 144° 58' 8.6736".

[/html] Как мы уже говорили ранее, вы можете использовать элемент abbr для маскировки настоящих значений. И конечно же, Оператор распознает их. rel-license Если вы разрабатываете что-то для публичного использования, вы, скорее всего, знаете, что в проект необходимо включить лицензию. Вы можете назначить атрибут rel со значением «license» для ссылки на лицензионную документацию. [html] cc by 2.0 [/html] В чем смысл? В том, что Yahoo Creative Commons Search и Google Usage Right's Search, оба уже используют атрибут rel=”license” в своих алгоритмах. rel-tag Это очень интересный микроформат, потому что каждый блоггер назначает тэги своим статьям. Для того, чтобы использовать этот микроформат, просто добавьте rel=”tag” к вашей тэговой ссылке, и все готово. Теперь, с помощью нашей панели Оператора, мы можем видеть контент других сайтов, с такими же тэгами. Важно понимать, что имя тэга берется из атрибута href, а не из текста ссылки. Так что в следующем примере… [html] Client-Side Scripting [/html] … тэгом будет «JavaScript» а не «client-side scripting». Nettuts использует этот микроформат, но вы конечно об этом знаете, если используете Оператор. rel-nofollow Другой простой, но эффективный тэг – это атрибут rel=”nofollow” к ссылке. Он используется для того, чтобы выбранная ссылка не участвовала в ранжировании страниц в поисковых системах. И конечно такие поисковые системы как Google, Yahoo и Bing, активно используют этот микроформат. Он идеален для ссылок в комментариях к блогу, поскольку с этим атрибутом сторонние ссылки не будут оказывать влияния на ваш сайт, а также раздавать рейтинг своим владельцам.

Итак, что вы собираетесь делать?

Сегодня, мы вкратце рассмотрели некоторые полезные микроформаты, но вопрос в том, стоят ли они вашего времени? Не стоят, пока вы не начнете их использовать! Микроформаты разработаны для более удобного получения данных со страницы, но пока они не будут широко использоваться, инструментов для их использования, тоже будет мало. Несмотря на то, что многие из них могут показаться бессмысленными сейчас, надеюсь, через несколько лет они будут использоваться повсеместно. Будете ли вы использовать микроформаты в своих сайтах? Перевод статьи "Microformats: What, Why, and How", автор Andrew Burgess

Простой, перетаскиваемый элемент на 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

Решение для очень длинных выпадающих меню

dreamhelg — Thu, 29 Oct 2009 05:05:30 +0000

Мне нравится давать статьям точные заголовки, но в данном случае, правильно было бы сказать *возможное* решение для очень длинного, выпадающего меню. Проблема с такими меню состоит в том, что выпадающий список может выйти за пределы самой веб-страницы, то есть ниже видимой области окна браузера. Так, что для доступа к нижним пунктам меню, вам понадобится прокручивать страницу до нужного пункта. Для пользователей, имеющих специальное колесо прокрутки у мыши, это не большая проблема. Для тех же, у кого нет такой полезной функциональности, длинное выпадающее меню станет совершенно неработоспособным, потому что для прокрутки окна, им придется использовать полосу прокрутки браузера, для чего придется отвести мышь от меню, в связи с чем, меню, конечно же, закроется. Но есть очень простое решение для этого. Прежде чем мы начнем, взгляните на результат. Впервые, я увидел эту идею на странице аккаунта, на сайте Media Temple. У них есть выпадающее меню для «Доменов», в котором перечислены все ваши домены, находящиеся у них на хостинге. Это может быть очень длинный список. Но, Media Temple применили специальную технику – при прокручивании окна, меню также прокручивается в ускоренном режиме. И конечно, поскольку я делал скриншот, то обратил внимание, что замечательное решение, которое они так расхваливали, оказалось не таким уж хорошим. Это заставило меня задуматься, какие именно проблемы у них возникают с этим меню, так что давайте смотреть вместе. Далее представлена визуализация идеи:

JQuery делает это мгновенно

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

Устанавливаем максимальную высоту выпадающего меню
При наведении открываем дочернее меню
Рассчитываем коэффициент скорости, основанный на высоте дочернего меню
Отслеживаем движение мыши в меню
Прокручиваем меню вместе с движением мыши, основываясь на коэффициенте
При покидании мыши, закрываем меню

[javascript] var maxHeight = 400; $(function(){ $(".dropdown > li").hover(function() { var $container = $(this), $list = $container.find("ul"), $anchor = $container.find("a"), height = $list.height() * 1.1, // проверяем, достаточно ли свободного места внизу multiplier = height / maxHeight; // необходим для более быстрого движения, если список длиннее // сохраняем высоту здесь, так что она восстанавливается при покидании мыши $container.data("origHeight", $container.height()); // сохраняем цвет наведения, пока открыто выпадающее меню $anchor.addClass("hover"); // проверяем, появился ли список непорседственно под родительским списком $list .show() .css({ paddingTop: $container.data("origHeight") }); // Не применяем анимацию, если список короче максимального if (multiplier > 1) { $container .css({ height: maxHeight, overflow: "hidden" }) .mousemove(function(e) { var offset = $container.offset(); var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier); if (relativeY > $container.data("origHeight")) { $list.css("top", -relativeY + $container.data("origHeight")); }; }); } }, function() { var $el = $(this); // возвращаем все как было $el .height($(this).data("origHeight")) .find("ul") .css({ top: 0 }) .hide() .end() .find("a") .removeClass("hover"); }); // Добавляем нижнюю стрелку только для тех пунктов, у которых есть дочернее меню $(".dropdown > li:has('ul')").each(function() { $(this).find("a:first").append(""); }); }); [/javascript]

HTML и CSS

Я не стал выкладывать здесь HTML и CSS, поскольку они очень простые и не интересные. Вы, в любом случае, можете скачать архив с примером, и посмотреть. Это самый обыкновенный, вложенный, маркированный список, и немного очень простых стилей.

Тестирование

Пример тестировался во всех браузерах, вплоть до IE6, меню отлично выглядит и работает везде. Скачать архив с примером. Перевод статьи "Solution For Very Long Dropdown Menus", автор Chris Coyier

Интерактивная корзина на основе 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']?>
+ =