SimpleCoding.org » CSS http://www.simplecoding.org Блог о программировании Sun, 25 Jul 2010 20:00:16 +0000 en hourly 1 Плавающий виджет. Поддержка IE6. http://www.simplecoding.org/plavayushhij-vidzhet-podderzhka-ie6.html http://www.simplecoding.org/plavayushhij-vidzhet-podderzhka-ie6.html#comments Thu, 29 Apr 2010 10:16:29 +0000 Владимир http://www.simplecoding.org/?p=1051 floating panel logo

Приветствую всех!

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

Но, благодаря читателям этого блога, выяснилось, что протестировал я работу плагина не очень хорошо. За это всем ещё раз огромное спасибо! Очень приятно, что кто-то пользуется моим кодом и помогает делать его лучше.

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть :) … но есть люди, которые им пользуются :(

Хуже оказалось то, что не удалось найти хорошего решения. Т.е. виджет в IE6 теперь работает, но хуже, чем в остальных браузерах.

Проблема заключается в следующем. IE6 не поддерживает CSS свойство position: fixed. Это свойство указывает, что элемент должен фиксироваться при прокрутке страницы относительно окна браузера.

Существует несколько способов решения этой проблемы. В частности, хочу посоветовать очень хорошую статью Полноценный fixed в MSIE.

Но, все приведённые в ней решения, требуют использования выражений (expression) в CSS свойствах, и, по-с сути, означают динамическую установку свойства top с помощью JS кода.

Недостаток такого решения в том, что при прокрутке элемент начинает мерцать и «дёргаться». Правда, в той статье предложено решение этой проблемы, но оно предполагает использование фонового изображения для тега body. А если плагин, начнет менять эти стили, то возможны проблемы с дизайном страницы. Т.е. вебмастер сам должен решить как использовать этот приём.

Теперь рассмотрим изменения, которые я внёс в плагин.

  1. curWindow.scroll(function() {
  2.     updateElement();
  3. });
  4.  
  5. function updateElement() {
  6.     //расстояние от начала страницы до верха её видимой части
  7.     var windowTop = curWindow.scrollTop();
  8.     if (windowTop + config.fromTop < config.minTop) {
  9.         //виджет нужно позиционировать абсолютно
  10.         if ('absolute' != element.css('position')) {
  11.             element.css('position', 'absolute');
  12.             element.css({'top':config.minTop});
  13.         }
  14.     } else {
  15.         //позиционируем виджет фиксированно
  16.         //ie6 не поддерживает фиксированное позиционирование
  17.         if ($.browser.msie && $.browser.version.substr(0,1)<7) {
  18.             element.css({'top': windowTop + config.fromTop + "px"});
  19.         }
  20.         else {
  21.             if ('fixed' != element.css('position')) {
  22.                 element.css('position', 'fixed');
  23.                 element.css({'top':config.fromTop});
  24.             }
  25.         }
  26.     }
  27. }

Как видите, их не много (начинаются со строки 17).

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

Если мы имеем дело с IE6, то позиционирование остаётся абсолютным, а фиксация виджета осуществляется за счет изменения свойства top. Функция updateElement выполняется в обработчике события scroll, т.о. пересчёт свойства top при прокрутке страницы выполняется постоянно, что и приводит к мерцаниям.

Во всех остальных браузерах используется свойство fixed.

Ссылка на архив с обновлённым плагином.

архив с исходным кодом

Решение, как я и говорил, не идеальное, но всё-таки хороший момент в нём есть. Возможно кто-то из пользователей IE6 увидит, что сайты в новых браузерах смотрятся лучше, и решит, что пора что-то менять :)

Удачи!

]]> http://www.simplecoding.org/plavayushhij-vidzhet-podderzhka-ie6.html/feed 15 Плавающий виджет. Версия 2. http://www.simplecoding.org/plavayushhij-vidzhet-versiya-2.html http://www.simplecoding.org/plavayushhij-vidzhet-versiya-2.html#comments Thu, 08 Apr 2010 14:13:29 +0000 Владимир http://www.simplecoding.org/?p=1031 floating panel logo

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

Сразу приведу ссылку на архив с новой версией.

архив с исходным кодом

Изменения и новые возможности

1) Плагин теперь называется floating_panel.

2) Исправлен баг с мерцанием виджета.

Тут отдельное спасибо хочу сказать Александру за подсказку о динамическом изменении свойства position. Подробное описание решения чуть ниже.

3) Добавлена возможность размещать виджет как слева, так и справа от контента страницы.

Для этого используется параметр 'location', которое может принимать значения 'left' или 'right'.

4) Параметр 'fromCenter' теперь указывает расстояние от центра страницы до левого края виджета, а не до его середины.

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

Пример использования

Создаём div, который будет содержать код кнопок виджета.

  1. <div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>

Подключаем библиотеку jQuery и плагин.

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/floating_panel.jquery.js"></script>
  3. <script type="text/javascript">
  4. $(function() {
  5. * $('#twitter_widget').floating_panel({
  6.         'fromCenter': 520,
  7.         'fromTop': 50,
  8.         'minTop': 200,
  9.         'location': 'left'
  10.     });
  11. });
  12. </script>

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

  1. $('#twitter_widget').floating_panel();

Параметры имеют следующее значение.

fromCenter – расстояние от середины страницы до левого края виджета
fromTop – расстояние от виджета до верхней границы видимой части страницы
minTop – расстояние от виджета до начала страницы
location – размещение виджета (left или right)

На рисунке показано их влияние на размещение виджета.

floating panel

Теперь рассмотрим код плагина

  1. (function($) {
  2.     $.fn.floating_panel = function(settings) {
  3.         //значения по-умолчанию
  4.         var config = {
  5.             'fromCenter': 580,
  6.             'fromTop': 50,
  7.             'minTop': 200,
  8.             'location': 'left'
  9.         };
  10.         //если пользователь указал свои параметры, то используем их
  11.         if (settings) $.extend(config, settings);
  12.  
  13.         var element = $(this);
  14.        
  15.         var curWindow = $(window);
  16.         //рассчитываем смещение от левого края окна браузера
  17.         if ('left' == config.location) {
  18.             var elementLeft = curWindow.width() / 2 – config.fromCenter;
  19.         }
  20.         else {
  21.             var elementLeft = curWindow.width() / 2 + config.fromCenter;
  22.         }
  23.         element.css({'left':elementLeft});
  24.         updateElement();
  25.        
  26.         //изменяем положения виджета при прокрутке страницы
  27.         curWindow.scroll(function() {
  28.             updateElement();
  29.         });
  30.        
  31.         function updateElement() {
  32.             //расстояние от начала страницы до верха её видимой части
  33.             var windowTop = curWindow.scrollTop();
  34.             if (windowTop + config.fromTop < config.minTop) {
  35.                 //виджет нужно позиционировать абсолютно
  36.                 if ('absolute' != element.css('position')) {
  37.                     element.css('position', 'absolute');
  38.                     element.css({'top':config.minTop});
  39.                 }
  40.             } else {
  41.                 //позиционируем виджет фиксированно
  42.                 if ('fixed' != element.css('position')) {
  43.                     element.css('position', 'fixed');
  44.                     element.css({'top':config.fromTop});
  45.                 }
  46.             }
  47.         }
  48.     };
  49. })(jQuery);

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

Теперь используется два режима позиционирования. Если расстояние от виджета до начала страницы меньше значения, указанного в параметре minTop, то виджет позиционируется абсолютно (position: absolute), а значение свойства top выствляется равным minTop.

В противном случае виджет позиционируется фиксировано (position: fixed), а свойству top присваивается значение fromTop.

Идея заключается в том, чтобы как можно реже изменять CSS свойства с помощью JS кода. Поэтому перед изменением свойства position проверяется его значение (строки 36 и 42) и изменение происходит только если текущее значение не соответствует новому. Т.е. при прокрутке страницы это свойство будет изменяться только один раз.

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

]]> http://www.simplecoding.org/plavayushhij-vidzhet-versiya-2.html/feed 31 jQuery плагин: плавающий виджет с кнопками http://www.simplecoding.org/jquery-plagin-plavayushhij-vidzhet-s-knopkami.html http://www.simplecoding.org/jquery-plagin-plavayushhij-vidzhet-s-knopkami.html#comments Tue, 06 Apr 2010 07:52:05 +0000 Владимир http://www.simplecoding.org/?p=1026 twitter button

Приветствую всех!

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

UPD. Эта информация устарела, т.к. появилась новая версия плагина.

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

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

Возвращаемся к плагину.

Демонстрацию его работы вы можете увидеть слева от этого текста. В данном случае я использовал кнопку твиттера, которую создаёт сервис Tweetmeme, но вы можете использовать любую другую кнопку в том числе и обычную картинку.

Принцип использования.

1) Подключаете библиотеу jQuery и плагин.

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/left_floating_button.jquery.js"></script>

2) Создаёте тег div с кодом кнопки

  1. <div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>

3) Подключаете плагин

  1. $('#twitter_widget').left_floating_button();

4) Если есть необходимость, указываете параметры. Тут нужны некоторые пояснения. Всего можно задать четыре параметра:

fromCenter – расстояние от середины страницы до середины виджета
fromTop – расстояние от виджета до верхней границы видимой части страницы
minTop – расстояние от виджета до начала страницы

Я сделал небольшой рисунок, чтобы было понятнее о каких расстояниях идёт речь.

left_twitter_button_thumb

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

Установить свои значения можно с помощью метода left_floating_button. Например, так

  1. $('#twitter_widget').left_floating_button({
  2.         'fromCenter': 520,
  3.         'fromTop': 50,
  4.         'minTop': 200
  5.     });

Рассмотрим код плагина.

  1. (function($) {
  2.     $.fn.left_floating_button = function(settings) {
  3.         //значения по-умолчанию
  4.         var config = {
  5.             'fromCenter': 520,
  6.             'fromTop': 50,
  7.             'minTop': 200
  8.         };
  9.         //если пользователь указал свои параметры, то используем их
  10.         if (settings) $.extend(config, settings);
  11.  
  12.         var element = this;
  13.        
  14.         //абсолютно позиционируем виджет
  15.         element.css('position', 'absolute');
  16.         var curWindow = $(window);
  17.         updateElement();
  18.        
  19.         //изменяем положения виджета при прокрутке страницы
  20.         curWindow.scroll(function() {
  21.             updateElement();
  22.         });
  23.        
  24.         function updateElement() {
  25.             //определяем размеры окна
  26.             var windowWidth = curWindow.width();
  27.             var windowTop = curWindow.scrollTop();
  28.             //рассчитываем положение виджета
  29.             var elementLeft = windowWidth / 2 – config.fromCenter – element.width() / 2;
  30.             var elementTop = windowTop + config.fromTop;
  31.             if (elementTop < config.minTop) {
  32.                 elementTop = config.minTop;
  33.             }
  34.            
  35.             //изменяем CSS свойства left и top,
  36.             //в результате виджет будет перемещаеться
  37.             element.css({'left':elementLeft, 'top':elementTop});
  38.         }
  39.     };
  40. })(jQuery);

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

Как только вы вызываете метод left_floating_button для какого-нибудь элемента страницы, плагин делает его абсолютно позиционированным (с помощью CSS свойства position: absolute). После этого, положение элемента можно изменять с помощью свойств top и left. Т.е. нужно пересчитывать значения этих свойств при каждой прокрутке страницы.

Для того, чтобы отслеживать прокрутку страницы нужно назначить обработчик события scroll, а рассчитать положение элемента несложно, зная ширину окна и расстояние до начала страницы. Последние можно получить с помощью методов $(window).width() и $(window).scrollTop().

Запуск перемещения выполняется присваиванием новых значений свойствам top и left.

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

Исходники плагина

архив с исходным кодом

Удачи!

Интересное

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

]]> http://www.simplecoding.org/jquery-plagin-plavayushhij-vidzhet-s-knopkami.html/feed 18 960 Grid System: зачем нужны CSS фреймворки http://www.simplecoding.org/960-grid-system-zachem-nuzhny-css-frejmvorki.html http://www.simplecoding.org/960-grid-system-zachem-nuzhny-css-frejmvorki.html#comments Fri, 30 Oct 2009 20:14:42 +0000 Владимир http://www.simplecoding.org/?p=932 960grid logo

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.

1) Фреймворки увеличивают размер страницы.

2) Загоняют разработчика в определенные рамки. Например, 960 grid предназначен для верстки страниц с шириной 960рх.

3) Многим не нравятся имена классов вроде «grid-16».

4) Кто-то считает, что нужно самому создавать фреймворк «под себя».

Но давайте посмотрим насколько существенны эти недостатки.

1) Объем файлов действительно увеличивается. Но 960 Grid System состоит из трех файлов, суммарный размер которых – 8 кБ (сжатая версия). Если использовать архивацию размер уменьшается до 1,6кБ.

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

2) По поводу ограничений. Фреймворк, как и любую библиотеку, имеет смысл использовать в случаях, для которых он разрабатывался. Т.е. если нужна «резиновая» верстка, 960 Grid – не подходящее решение (хотя есть проект Fluid 960 Grid System). Но если в тех. задании сказано, что страница должна иметь фиксированную ширину 960px, то ситуация меняется.

3) Имена классов. На мой взгляд – это вопрос привычки. Цифры в имени означают ширину блока и по ним достаточно просто ориентироваться. Кроме того, никто не запрещает использовать одновременно несколько классов, например,

  1. <div class=”grid_4 sidebar”>…</div>

Класс grid_4 будет использовать фреймворк, sidebar – вашими стилями.

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

Теперь о преимуществах.

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

2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает ;)

3) Упрощается поддержка. Вам будет легче прочитать свой же код, написанный полгода назад, если вы все время используете одинаковые имена классов.

Примечание. Кстати, если вы интересуетесь темой, очень советую почитать статью "Верстка с помощью Grid".

А теперь небольшой пример.

Допустим, нам нужно сверстать страницу с таким размещением блоков.

layout

Я сразу покажу решение.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <title>Test 960 Grid System</title>
  5.     <link rel="stylesheet" href="css/reset.css" />
  6.     <link rel="stylesheet" href="css/text.css" />
  7.     <link rel="stylesheet" href="css/960.css" />
  8.     <style type="text/css">
  9.     p {
  10.         border: solid 1px #eee;
  11.     }
  12.     </style>
  13. </head>
  14. <body>
  15. <div class="container_12">
  16.     <div class="grid_12"><p>Заголовок</p></div>
  17.     <div class="clear"></div>
  18.    
  19.     <div class="grid_4">
  20.         <div class="grid_4 alpha"><p>Левый блок №1</p></div>
  21.         <div class="grid_4 alpha"><p>Левый блок №1</p></div>
  22.     </div>
  23.  
  24.     <div class="grid_4">
  25.         <div class="grid_4 alpha"><p>Центральный блок №1</p></div>
  26.         <div class="grid_2 alpha"><p>Центральный блок №2</p></div>
  27.         <div class="grid_2 omega"><p>Центральный блок №3</p></div>
  28.     </div>
  29.    
  30.     <div class="grid_4"><p>Правый блок.<br /><br /> Может быть любой высоты.</p></div>
  31.     <div class="clear"></div>
  32.    
  33.     <div class="grid_12"><p>Хвостовик</p></div>
  34.     <div class="clear"></div>
  35. </div>
  36. </body>
  37. </html>

Как видите, мы обошлись практически минимальным количество тегов div. Вложенные дивы использовались только для левой и центральной колонок, т.к. они содержат несколько блоков.

Теперь о номерах классов.

Общая ширина макета 960px. Фреймворк позволяет разбить ее на 12, 16 и 24 равных части. В данном случае нам достаточно разбиения на 12 частей. Т.е. класс grid_12 имеет ширину 940px плюс отступы по 10px справа и слева.

Точно также класс grid_4 имеет ширину 960 * 4 / 12 = 320px из которых 20px приходится на отступы.

Если мы поместим подряд три блока с классами grid_1, grid_7 и grid_4, то они займут всю ширину страницы.

Кроме того, есть несколько специальных классов, например, alpha и omega. Они позволяют убрать отступы слева (alpha) и справа (omega) у блока. В данном примере эта возможность используется для того, чтобы убрать отступы у вложенных блоков. Иначе они будут прибавлены к отступам контейнера и, например, расстояние между левой колонкой и центральной будет не 20, а 40px.

Также вы можете использовать класс clear для завершения строки с блоками, а также классы prefix_X, suffix_X, push_X и pull_X для создания различных отступов (вместо X нужно подставить число).

Примечание. Если вы планируете использовать этот (или любой другой CSS фреймворк) я очень советую вам взглянуть на исходные файлы со стилями. Как я уже писал, они совсем небольшие и при наличии минимальных познаний в CSS вы быстро разберетесь что к чему.

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

В заключение хочу провести небольшой опрос.

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

(форма для голосования не видна в RSS ридере, поэтому заходите на сайт :) )

Удачи!

Постовой

Для малого бизнеса бухгалтерские услуги: Москва и область

]]> http://www.simplecoding.org/960-grid-system-zachem-nuzhny-css-frejmvorki.html/feed 28 Исправляем недостатки IE6 http://www.simplecoding.org/ispravlyaem-nedostatki-ie6.html http://www.simplecoding.org/ispravlyaem-nedostatki-ie6.html#comments Mon, 07 Sep 2009 07:11:27 +0000 Владимир http://www.simplecoding.org/?p=898 ie6-bugs-logo

Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности ;)

Призывы перейти на нормальные браузеры или хотя бы обновить IE6, можно встретить на каждом шагу. Тем не менее ситуация меняется очень медленно.

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

К тому же для того чтобы обеспечить поддержку IE6 не обязательно отказываться от новых возможностей.

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.

Поддержка :hover селекторов

Вообще-то в IE6 есть поддержка этих селекторов, но только для тега a, т.е. ссылки. В тоже время в современных браузерах их можно использовать для любых элементов страницы.

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

Решить проблему можно с помощью небольшого скрипта под названием Whatever:hover.

От вас требуется добавить только одно CSS правило

  1. body {
  2.     behavior: url("csshover3.htc");
  3. }

Естественно нужно указать правильное размещение скрипта.

Скрипт сам найдет нужные элементы на странице и, если курсор мыши окажется над ними, применит соответствующие CSS правила.

Поддержка альфа-канала в PNG файлах.

Примечание. В альфа-канале хранятся данные о прозрачности рисунка.

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

При этом для картинки установлено правило

  1. background-attachment: fixed;

Т.е. при прокрутке страницы фон остается неподвижным, а логотип должен перемещаться.

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

Чтобы проиллюстрировать проблему я сделал 2 скриншота.

alpha-normal

alpha-bug

Угадайте, какой из них сделан в IE6? :)

IE закрасил прозрачные пиксели серым цветом. Кстати, использование gif изображений не поможет, т.к. по краю букв идут частично прозрачные пиксели.

Решается эта проблема с помощью скрипта IE PNG Fix.

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

  1. img {
  2.     behavior: url("iepngfix.htc");
  3. }

После этого, изображения будут выглядеть правильно.

Небольшое заключение для пользователей IE6.

То, что web разработчик может как-то обойти обойти ограничения браузера не означает, что вам не нужно его апгрейдить :)

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

Так что не удивляйтесь, если после загрузки пары страничек у вас начнет «тормозить» компьютер :)

Удачного обновления!

]]> http://www.simplecoding.org/ispravlyaem-nedostatki-ie6.html/feed 31 PHP скрипт: ToDo с картинками http://www.simplecoding.org/php-skript-todo-s-kartinkami.html http://www.simplecoding.org/php-skript-todo-s-kartinkami.html#comments Thu, 13 Aug 2009 19:01:21 +0000 Владимир http://www.simplecoding.org/?p=885 simple tasks

Уделяете ли вы внимание организации своей работы?
Много ли у вас "мелких" дел, о которых вы регулярно забываете?

Вроде бы простые вопросы, но для многих людей (и я не исключение) организация работы – это актуальная проблема.

Хуже всего, когда нужно сделать много «мелких» дел, которые не занимают много времени, но обязательно должны быть выполнены вовремя… и держать в голове их все просто невозможно.

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

Я решил не оставаться в стороне и сделал собственный вариант такого ToDo списка, естественно, с некоторыми дополнительными возможностями.

Кстати, скрипт называется SimpleTasks.

Главная особенность – возможность указывать состояние выполнения задач. При этом используется специальная система обозначений.

symbols for paper notebook with description

Систему обозначений придумал не я. Но, к сожалению, не могу найти первоисточник (UPD. Огромное спасибо Smarty за ссылку на оригинал). Предназначена она для использования с бумажным блокнотом и довольно удобная. Во всяком случае, читать такой список задач становится намного легче. Взгляд сразу отбрасывает выполненные задачи.

Но возможности web приложений намного шире, чем у обычного ежедневника. Например, можно сделать систему фильтров и легко работать с большими списками задач.

В общем, я написал небольшое web приложение, использующее эту систему обозначений.

Если есть желание, можете поиграться с ним (логин admin@todo.loc, пароль password).

демонстрационный пример

Или скачать архив и установить на своем сервере (инструкция в архиве).

архив с исходным кодом

Принцип работы.

Создание новой записи.
Кликаем по ссылке "Новая запись" (справа в верхней части страницы) и в открывшемся окне вводим данные записи.
При клике по полю "Дата" будет открыт календарь. Т.е. ввести дату в неправильном формате довольно проблематично.

Редактирование.
Клик или двойной клик на соответствующем поле позволяет изменить его. Открываетеся либо диалог, либо inline редактор.

Удаление.
Кликните по картинке с изображением крестика в соответствующей строке и подтвердите удаление.

Фильтры.
Позволяют выбрать задачи с определенным состоянием в указанном диапазоне дат.

Ссылки в верхнем меню дублируют наиболее распространенные (на мой взгляд) фильтры.

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

Скорее всего, некоторые функции будут дорабатываться.

И я очень хочу услышать ваше мнение!

Прежде всего, меня интересуют такие вопросы.

1) Есть ли смысл делать подобное приложение многопользовательским? Т.е. технически это совсем не сложно, вопрос в том будет ли кто-то в рамках небольшой организации использовать такое приложение для хранения заметок сотрудников?

2) Какие еще функии вы бы добавили?

3) Может кто-то видел хороший тьюториал о локализации JS приложений? (Сейчас я ориентируюсь на то, как сделана локализация в jQuery UI).

P.S. На этих выходных я уезжаю догуливать остатки отпуска, поэтому прошу прощения, если не сразу отвечу на ваши комментарии. Я обязательно их прочитаю… даже спаммерские ;)

]]> http://www.simplecoding.org/php-skript-todo-s-kartinkami.html/feed 60 Динамическая загрузка картинок для анонсов с помощью Ajax, jQuery и PHP http://www.simplecoding.org/dinamicheskaya-zagruzka-kartinok-dlya-anonsov-s-pomoshhyu-ajax-jquery-i-php.html http://www.simplecoding.org/dinamicheskaya-zagruzka-kartinok-dlya-anonsov-s-pomoshhyu-ajax-jquery-i-php.html#comments Sat, 20 Jun 2009 12:31:18 +0000 Владимир http://www.simplecoding.org/?p=854 ajax_image_load

Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.

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

Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).

Но при этом увеличивается размер страницы и не факт, что посетитель вообще будет эти картинки рассматривать.

Поэтому я решил привести пример своей реализации этого эффекта.

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

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

Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.

демонстрационный пример

Сразу же выкладываю архив с исходниками.

архив с исходным кодом

А теперь разберем как это все работает.

Допустим у нас есть страница (index.html) со следующей разметкой.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.     <title>Пердпросмотр с картинками</title>
  7.  
  8.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  9.     <meta http-equiv="Content-Style-Type" content="text/css" />
  10.  
  11.     <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div id="content">
  17.     <div id="leftCol">
  18.         <div id="butterfly" class="annotaionBlock">…</div>
  19.         <div id="tiger" class="annotaionBlock">…</div>
  20.         <div id="elephant" class="annotaionBlock">…</div>
  21.         <div id="wolf" class="annotaionBlock">…</div>
  22.         <div id="fish" class="annotaionBlock">…</div>
  23.     </div>
  24.     <div id="rightCol">
  25.         <div id="whale" class="annotaionBlock">…</div>
  26.         <div id="flamingo" class="annotaionBlock">…</div>
  27.         <div id="bear" class="annotaionBlock">…</div>
  28.         <div id="dog" class="annotaionBlock">…</div>
  29.         <div id="cat" class="annotaionBlock">…</div>
  30.     </div>
  31. </div>
  32.  
  33. </body>
  34. </html>

Сразу обратите внимание на блок content. Он состоит из двух колонок (leftCol и rightCol) в которых размещены аннотации.

Всем аннотациям присвоен CSS класс annotaionBlock и уникальный id. Этот id будет использоваться для определения нужной картинки.

Сами аннотации представляют собой обычный текст с HTML разметкой или без неё.

Теперь напишем JS скрипт, который будет подгружать картинки.

  1. <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  2. <script type="text/javascript">
  3. $(function() {
  4.     $('.annotaionBlock').hover(
  5.         function(event) {
  6.             var curAnnotation = $(this);
  7.             var curId = curAnnotation.attr('id');
  8.             var annotImg = curAnnotation.children('.annotImg');
  9.             if (annotImg.length == 0) {
  10.                 $.get('getimage.php', {img : curId}, function(data) {
  11.                     annotImg = $('<div class="annotImg"><img src="' + data + '" alt="Картинка" /></div>').hide();
  12.                     curAnnotation.append(annotImg);
  13.                     $('.annotImg').not(this).slideUp('fast');
  14.                     annotImg.slideDown('fast');
  15.                 });
  16.             }
  17.             else {
  18.                 $('.annotImg').not(annotImg).slideUp('fast');
  19.                 annotImg.slideDown('fast');
  20.             }
  21.         },
  22.         function() {
  23.         }
  24.     );
  25. });
  26. </script>

Прежде всего мы подключаем библиотеку jQuery и пишем функцию, которая будет вызвана сразу после загрузки страницы (строки 3-25).

В этой функции мы объявляем обработчик события hover для всех элементов страницы с классом annotaionBlock, т.е. для всех наших аннотаций.

В качестве параметров этому обработчику передается 2 функции. Первая будет вызвана при появлении мышки над блоком, вторая – при выходе из него.

Вторую функцию (строки 22-23) мы оставляем пустой, т.к. вставлять и прятать картинки будем в первой.

Алгоритм работы.

1) При появлении курсора над аннотацией, сохраняем указатель на неё и её id (строки 6-7).

2) Проверяем загружен ли рисунок для данной аннотации (строки 8-9) и если нет, выполняем AJAX запрос к серверному (PHP) скрипту, в параметрах которого передаем id блока (строки 10-15).

3) После получения ответа сервера создаем скрытый тег img и вставляем его в конец блока с аннотацией (строки 11, 12). После этого применяем эффект slideUp ко всем картинкам в блоках с аннотацией кроме текущей (строка 13). И с помощью эффекта slideDown показываем картинку для данной аннотации (строка 14).

4) Если картинка была вставлена раньше, то AJAX запрос мы не отправляем, а просто показываем её и прячем остальные (с помощью эффектов slideUp и slideDown, строки 18-19).

Обратите внимание. Если применять эффекты slideDown и slideUp непосредственно к тегу img картинка будет плавно изменять как вертикальный, так и горизонтальный размеры. Т.е. она будет «выезжать» из левого верхнего угла.
Чтобы изменялась только высота картинки нужно поместить её внутрь тега div и примерять эффекты к нему.

Серверная часть

PHP скрипт, который обрабатывает запросы на получение картинок (getimage.php) должен прочитать id запрашиваемой картинки и вернуть соответствующую ссылку.

Эти ссылки можно хранить в БД или текстовом файле, выбирать случайным образом или однозначно связать с аннотациями. Всё это зависит от конкретной ситуации. Мы ограничимся простейшим вариантом с использованием оператора switch.

  1. $image = $_GET['img'];
  2.  
  3. switch ($image) {
  4.     case 'butterfly': echo 'http://farm1.static.flickr.com/152/408688454_2d868d0104_m.jpg'; break;
  5.     case 'tiger': echo 'http://farm4.static.flickr.com/3284/2507729467_915274dab3_m.jpg'; break;
  6.     case 'elephant': echo 'http://farm3.static.flickr.com/2377/1520324747_e468eab773_m.jpg'; break;
  7.     case 'wolf': echo 'http://farm1.static.flickr.com/177/402657323_ebf5c7ce51_m.jpg'; break;
  8.     case 'fish': echo 'http://farm2.static.flickr.com/1084/892454941_56fd34ac3c_m.jpg'; break;
  9.     case 'whale': echo 'http://farm3.static.flickr.com/2401/2052477420_fe7fb452b0_m.jpg'; break;
  10.     case 'flamingo': echo 'http://farm4.static.flickr.com/3303/3557243577_3c1bab1ec3_m.jpg'; break;
  11.     case 'bear': echo 'http://farm1.static.flickr.com/172/401014816_9d879ceac6_m.jpg'; break;
  12.     case 'dog': echo 'http://farm1.static.flickr.com/68/215233902_0f2d1ac9e5_m.jpg'; break;
  13.     case 'cat': echo 'http://farm3.static.flickr.com/2068/2532467266_d8b5c9ea15_m.jpg'; break;
  14. }

Как видите, у нас есть десять аннотаций и каждой соответствует своя ссылка.

И в заключение несколько слов об оформлении страницы.

Размещение аннотаций и их внешний вид задаётся с помощью CSS стилей (файл styles.css).

Я приведу только его фрагмент, который создаёт две колонки (в архиве вы найдете полный вариант).

  1. #content {
  2.     width: 600px;
  3.     margin: auto;
  4.     text-align: justify;
  5. }
  6.  
  7. #leftCol {
  8.     float: left;
  9.     width: 299px;
  10. }
  11.  
  12. #rightCol {
  13.     margin-left: 301px;
  14. }

Как видите, ширину всего блока с аннотациями мы установили равной 600px. Для левой колонки указали правило float: left и ширину 299px, а для правой – отступ слева 301px (внутри этого отступа будет находится левая колонка).

Вот и всё. На мой взгляд, эффект довольно симпатичный, но подходит не для всех сайтов.

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

До встречи!

Интересно почитать

Актуально про seo и поисковые системы от SeoProfy

]]> http://www.simplecoding.org/dinamicheskaya-zagruzka-kartinok-dlya-anonsov-s-pomoshhyu-ajax-jquery-i-php.html/feed 44 Создаём виджет для хранения заметок. Часть 2. http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-2.html http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-2.html#comments Fri, 29 May 2009 10:42:59 +0000 Владимир http://www.simplecoding.org/?p=841 notes widget

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

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

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

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

демонстрационный пример

И, как и обещал, выкладываю архив с исходниками.

архив с исходным кодом

Прежде всего, рассмотрим разметку страницы (index.html).

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>Notes Widget</title>
  6.  
  7.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.     <meta http-equiv="Content-Style-Type" content="text/css" />
  9.    
  10.     <link rel="stylesheet" type="text/css" href="pagestyles.css" />
  11.     <link rel="stylesheet" type="text/css" href="widgetstyles.css" />
  12. </head>
  13. <body>
  14.     <div id="content">
  15. …. Содержимое страницы…
  16.     </div>
  17.  
  18.     <div id="notesWidget">
  19.         <div id="notesHeader">Мои заметки</div>
  20.         <div id="notes">
  21.         </div>
  22.         <form id="fAddNote" action="savenote.php" method="post">
  23.             <input type="text" id="addNote" name="addNote" value="" />
  24.             <input type="submit" name="bAddNote" id="bAddNote" value="" />
  25.         </form>
  26.     </div>
  27.  
  28.     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  29.     <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
  30.     <script type="text/javascript" src="js/jquery.jeditable.mini.js"></script>
  31.     <script type="text/javascript" src="js/custom.js"></script>
  32. </body>
  33. </html>

В заголовке страницы мы подключаем файлы с CSS стилями (строки 13 и 14). Я вынес все стили, которые относятся к виджету в отдельный файл (widgetstyles.css), чтобы они не путались со стилями основной страницы.

Внутри страницы у нас находится 2 блока: основное содержимое (<div id="content">) и виджет (<div id="notesWidget">).

Первый блок нас не интересует, а вот на втором остановимся подробнее. Он состоит из трёх частей:

- заголовок (<div id="notesHeader">);
- блок заметок (<div id="notes">);
- блок с формой добавления заметки (<form id="fAddNote").

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

И в конце страницы мы подключаем jQuery, плагины и файл с нашими скриптами.

Сразу же рассмотрим используемые плагины.

1) jQuery UI. Это скорее не плагин, а целая библиотека. На её сайте вы можете выбрать необходимые компоненты и скачать архив с ними. Для нашего виджета нужны Core UI и Draggable. С их помощью мы сможем свободно перемещать виджет по странице.

2) Jeditable. С помощью этого плагина мы будем создавать in-line редакторы. Т.е. сделаем список с нашими заметками редактируемым. При клике по тексту заметки будет появляться поле ввода с помощью которого пользователь сможет изменить текст.

Теперь рассмотрим CSS стили минимально необходимые для работы плагина. Полный файл со стилями вы можете посмотреть в архиве с исходниками. К тому же при использовании виджета его оформление наверняка придется подстраивать под дизайн страницы.

  1. #notesWidget {
  2.     position: absolute;
  3.     top: 200px;
  4.     left: 0;
  5.     width: 200px;
  6.     height: 300px;
  7.     ….
  8. }
  9.  
  10. #notesHeader {
  11.     cursor: move;
  12.     ….
  13. }
  14.  
  15. #notes {
  16.     overflow: scroll;
  17.     ….
  18. }

Для того, чтобы виджет можно было перемещать по странице, он должен иметь абсолютное позиционирование. При этом необходимо задать его размеры и положение.

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

И, т.к. заметок может быть много, добавим прокрутку в блок notes.

Теперь переходим к самой интересной части – нашему JavaScript файлу (custom.js).

  1. $(function() {
  2.     //делаем виджет перемещаемым
  3.     $('#notesWidget').draggable({
  4.         handle: '#notesHeader'
  5.         , containment: 'parent'
  6.     });
  7.     //обработчик нажатия на кнопку добавления новой записи
  8.     $('#bAddNote').click(function() {
  9.         if ($('#addNote').val() != ") {
  10.             //сохраняем запись
  11.             $.post('savenote.php', {value:$('#addNote').val(), bAddNote:true},
  12.                     function(noteid) {
  13.                 //добавляем запись в список
  14.                 var curDate = new Date();
  15.                 var noteData = {id:noteid, note_text:$('#addNote').val(),
  16.                     note_date:curDate.toString()};
  17.                 var note = $(createListElement(noteData));
  18.                 $('#notes ul').prepend(note);
  19.                 $('.edit').editable('savenote.php');
  20.                 note.children('.remove').click(function() {addRemove(this);});
  21.                
  22.                 refreshClasses();
  23.             });
  24.         }
  25.         else {
  26.             alert('Вы ничего не написали');
  27.         }
  28.        
  29.         return false;
  30.     });
  31.     //загружаем список записей
  32.     $.getJSON('getnotes.php', {}, function(data, status) {
  33.         if (data.status == 'OK') {
  34.  
  35.             //формируем список
  36.             var notesList = '<ul>';
  37.             $.each(data.notes, function(i, note) {
  38.                 notesList += createListElement(note);
  39.             });
  40.             notesList += '</ul>';
  41.  
  42.             $('#notes').html(notesList);
  43.            
  44.             //делаем записи редактируемыми
  45.             $('.edit').editable('savenote.php');
  46.            
  47.             //добавляем обработчики нажатия на кнопку удаления записи
  48.             $('.remove').click(function() {addRemove(this);});
  49.            
  50.             refreshClasses();
  51.         }
  52.         else {
  53.             //вывод сообщения об ошибке
  54.             $('#notes').html('<p>Не могу загрузить список записей</p>');
  55.         }
  56.     });
  57. });
  58.  
  59. function createListElement(note) {
  60.     return '<li>'
  61.         + '<img src="images/removenote.gif" alt="Удалить" class="remove" />'
  62.         + '<div class="edit" id="note_' + note.id + '">'
  63.         + note.note_text + '</div>'
  64.         + '<div class="notedate">' + note.note_date + '</div>'
  65.         + '</li>';
  66. }
  67.  
  68. function addRemove(element) {
  69.     var noteid = $(element).next().attr('id');
  70.    
  71.     //удаляем запись
  72.     $.post('removenote.php', {id:noteid}, function() {
  73.         //убираем данную запись из списка
  74.         $(element).parent().slideUp("slow", function() {
  75.             $(this).remove();
  76.             refreshClasses();
  77.         });
  78.     });
  79. }
  80.  
  81. function refreshClasses() {
  82.     var odds = $('#notes ul li:odd');
  83.     odds.removeClass('even');
  84.     odds.addClass('odd');
  85.     var evens = $('#notes ul li:even');
  86.     evens.removeClass('odd');
  87.     evens.addClass('even');
  88. }

Рассмотрим его подробнее.

Прежде всего, сделаем виджет перемещаемым (строки 3-6). Параметр handle указывает, что блок можно будет перемещать только за заголовок, а containment – запрещает выводить блок за пределы страницы.

Затем, мы создаем обработчик нажатия на кнопку «Добавить» (строки 8-30). В нём мы проверяем, ввел ли пользователь текст новой заметки и отправляем AJAX запрос.

После получения ответа будет вызвана анонимная функция (строки 12-23), которая:

1) создает элемент списка с новой записью (с помощью функции createListElement, её мы рассмотрим чуть ниже);

2) вставляет его в начало общего списка;

3) делает редактируемым (с помощью метода editable);

4) добавляет обработчик нажатия на кнопку «Удалить» (вызывает функцию addRemove);

5) и обновляет цвет фона записей (с помощью функции refreshClasses).

Теперь рассмотрим функцию createListElement (строки 59-66). Её основная задача – создать разметку новой записи.

Запись состоит из текста, кнопки «Удалить» (точнее это обычный рисунок, которому назначается обработчик события click), и даты. Оформление записи выполняется с помощью CSS стилей, но на них я останавливаться не буду, в них ничего примечательного нет, к тому же они в любом случае должны сочетаться с конкретной страницей (если интересно, качайте архив с виджетом).

В разметке записи стоит обратить внимание на два момента.

1) Тексту записи присваивается класс edit (<div class="edit"…). С его помощью мы выбираем элементы для которых создаются in-line редакторы.

2) Этому же элементу мы присваиваем атрибут id в формате (note_№), его значение используется при изменении и удалении заметок.

Следующая функция addRemove (строки 68-79).

Здесь выполняется AJAX запрос на удаление заметки (строка 72) и после этого заметка удаляется из списка. При этом используется эффект slideUp.

Теперь рассмотрим функцию refreshClasses (строки 81-88).

Она работает следующим образом.

1) Находим все нечетные элементы в списке заметок.

2) Устанавливаем для них класс odd и убираем even (если он был установлен).

3) Находим все четные элементы списка и устанавливаем для них класс even.

Стили для классов odd и even указаны в CSS файле (widgetstyles.css). Т.е. с помощью этой функции мы всегда можем обновить расцветку списка после добавления или удаления элементов.

Теперь рассмотрим загрузку полного списка записей (строки 32-56). Она выполняется сразу после загрузки страницы.

Мы отправляем AJAX запрос (с помощью метода getJSON) и после получения ответа формируем HTML список с заметками. Точно также как и при добавлении заметки устанавливаем обработчики нажатия на кнопку «Удалить», делаем записи редактируемыми и обновляем стили.

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

P.S. В архиве с исходниками есть файл notes.sql с помощью которого можно создать таблицу в базе данных.

Интересно почитать:

Закат Веба?

]]> http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-2.html/feed 5 Стикер. Создаем плагин для jQuery. http://www.simplecoding.org/stiker-sozdaem-plagin-dlya-jquery.html http://www.simplecoding.org/stiker-sozdaem-plagin-dlya-jquery.html#comments Sat, 16 May 2009 17:38:03 +0000 Владимир http://www.simplecoding.org/?p=833 jquery sticker

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

Итак, задача такая. Нам нужно создать стикер, который пользователь сможет свободно перемещать по странице. Но если пользователь оставит стикер около края страницы, то он должен плавно "прилипнуть" к этому краю. Сам стикер может представлять собой что угодно, для этого примера я использовал обычный div с картинкой.

Чтобы лучше объяснить принцип работы, я сделал демонстрационную страничку. По-умолчанию стикер находится около левого края окна, но вы можете переместить его в любую часть страницы. Если вы оставите его за пределами текста (над белым полем), то он плавно прижмется к краю страницы.

демонстрационный пример
архив с исходным кодом

Теперь перейдем к реализации.

Прежде всего, рассмотрим общий принцип перемещения блока по странице.

Для того чтобы перемещение блока не влияло на другие элементы на странице, он должен быть не связан с ними. Для этого используется CSS определение position: absolute.

При этом координаты левого верхнего угла блока задаются с помощью определений left и top.

Например, так.

  1. #sticker {
  2.     position: absolute;
  3.     top: 200px;
  4.     left: 0;
  5. }

Сделать элемент перемещаемым (draggable) мы можем с помощью jQuery UI.

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

Рассмотрим, разметку HTML страницы.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>jQuery widget</title>
  6.  
  7.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.     <meta http-equiv="Content-Style-Type" content="text/css" />
  9.    
  10.     <link rel="stylesheet" type="text/css" href="styles.css" />
  11. </head>
  12. <body>
  13.     <div id="content">
  14.         <!– основное содержимое страницы –>
  15.     </div>
  16.    
  17.     <div id="sticker">
  18.         <img src="sticker.png" alt="sticker" />
  19.     </div>
  20.    
  21.     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  22.     <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
  23.     <script type="text/javascript" src="js/sticker.jquery.js"></script>
  24.     <script type="text/javascript">
  25.         $(function() {
  26.             $("#sticker").sticker({stickingZone: 100, speed: 50});
  27.         });
  28.     </script>
  29. </body>
  30. </html>

Начало страницы самое обычное. Мы подключили файл со стилями и добавили какое-то содержимое.

Затем создали блок стикера (строки 17-19).

После этого подключили три js файла. Первый – библиотека jQuery, второй – плагин jQuery UI, третий – с нашим плагином (его мы создадим чуть ниже).

И сразу же обратите внимание на использование плагина (строка 26).

Чтобы превратить блок в стикер, нужно вызвать для него метод sticker, который принимает 2 параметра:

stickingZone – максимальное расстояние от стикера до края страницы при котором стикер будет «прилипать» к этому краю (в пикселах);

speed – скорость перемещения стикера при «прилипании» (если точнее, это время за которое стикер сместится к краю страницы, в миллисекундах).

Оба параметра не обязательные и если их опустить будут использованы значения, установленные по-умолчанию (30px и 300 мс).

Теперь создадим файл с CSS стилями (styles.css).

  1. #sticker {
  2.     position: absolute;
  3.     width: 50px;
  4.     height: 150px;
  5.     top: 200px;
  6.     left: 0;
  7. }
  8.  
  9. .ui-draggable {
  10.     cursor: move;
  11. }

Зачем нужно абсолютное позиционирование я уже рассказывал, сейчас обратите внимание на второе правило, которое установлено для класса ui-draggable. Этот класс присваивает стикеру плагин jQuery UI после того, как мы делаем его перемещаемым (draggable). С его помощью очень удобно контролировать внешний вид элемента. В данном случае мы просто изменяем вид курсора.

Наконец, займемся плагином ;)

Прежде всего, обратите внимание на название файла. Оно должно начинаться с имени плагина после которого нужно добавить .jquery.js.

  1. (function($) {
  2.     $.fn.sticker = function(options) {
  3.         var settings = $.extend({
  4.             speed: 300
  5.             , stickingZone: 30
  6.         }, options||{});
  7.         var element = $(this);
  8.         element.draggable({ containment: 'parent' });
  9.         element.bind('dragstop', function(event, ui) {
  10.             var rightDistance = $(window).width() – ui.position.left – element.width();
  11.             var leftDistance = ui.position.left;
  12.             if (leftDistance < settings.stickingZone) {
  13.                 element.animate({left : "0"}, settings.speed);
  14.             }
  15.             if (rightDistance < settings.stickingZone) {
  16.                 var leftCorner = $(window).width() – element.width();
  17.                 element.animate({left : leftCorner + "px"}, settings.speed);
  18.             }
  19.         });
  20.         return element;
  21.     }
  22. })(jQuery);

Взгляните на первую и последнюю строки плагина. Мы объявили функцию, которая принимает в качестве параметра $, и сразу же вызвали её с параметром jQuery.

С помощью такого приёма мы получаем возможность использовать внутри нашего плагина функцию $ и при этом не создаём проблем другим библиотекам (например, prototype), которые также используют $.

После этого мы создаем новый метод sticker (строка 2) (его название должно совпадать с названием плагина).

На этом этапе плагин создан, и его можно использовать. Правда он ничего не делает.

Исправляем этот недостаток.

1) Если при вызове плагина были указаны параметры, заменяем ими значения, установленные по-умолчанию (строки 3-6).

2) Сохраняем текущий элемент в переменной element.

3) Делаем этот элемент перемещаемым (draggable) (строка 8), параметр containment: 'parent' указывает, что стикер нельзя перемещать за границы родительского элемента.

4) Назначаем обработчик события dragstop (строки 9-19), которое возникает после того как пользователь отпустит стикер.

5) Принцип работы обработчика очень простой. Мы рассчитываем расстояния от стикера до правого и левого края страницы. А после этого сравниваем его с заданным значением (stickingZone). Если условие выполняется, перемещаем стикер к краю страницы. Для этого используем метод animate, в параметрах которого передаем координаты левого края стикера и время, за которое он должен переместиться.

6) Возвращаем текущий элемент (строка 20). Если этого не сделать, плагин работать будет, но мы не сможем использовать цепочки вызовов.

Как видите, плагин для jQuery создать совсем не сложно. Главное понимать, как получить желаемый эффект. В остальном, плагин не на много отличается от обычного метода.

Если возникли вопросы или замечания, пишите в комментариях, обсудим ;)

]]> http://www.simplecoding.org/stiker-sozdaem-plagin-dlya-jquery.html/feed 5 Делаем радио кнопки удобными http://www.simplecoding.org/delaem-radio-knopki-udobnymi.html http://www.simplecoding.org/delaem-radio-knopki-udobnymi.html#comments Sat, 02 May 2009 15:01:02 +0000 Владимир http://www.simplecoding.org/?p=822 radio buttons html css

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

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.

Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.

Как говорится «Одна картинка стоит тысячи слов». Поэтому сразу даю ссылки на демонстрационную страничку и архив с файлами примера.

демонстрационный примерархив с исходным кодом

Рассмотрим самый простой вариант разметки

  1. <p><input type="radio" name="simple" value="1" /> Раз</p>
  2. <p><input type="radio" name="simple" value="2" /> Два</p>
  3. <p><input type="radio" name="simple" value="3" /> Три</p>

Такая HTML разметка создаст три вполне работоспособные радиокнопки, которые входят в одну группу (simple).

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

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

А если при этом форма содержит несколько групп таких кнопок, то раздражение гарантировано.

Изменяем HTML разметку

Попробуем исправить ситуацию. Добавим к названиям кнопок тег label.

  1. <p><input type="radio" name="labeled" value="1" id="labeled_1" /><label for="labeled_1">Раз</label></p>
  2. <p><input type="radio" name="labeled" value="2" id="labeled_2" /><label for="labeled_2">Два</label></p>
  3. <p><input type="radio" name="labeled" value="3" id="labeled_3" /><label for="labeled_3">Три</label></p>

Теперь если кликнуть по описанию (слова «Раз», «Два», «Три») будет нажата соответствующая кнопка. Таким образом, мы увеличиваем площадь кнопки.

Примечание. Для связи кнопки с описанием используется атрибуты id и for. Их значения должны совпадать.

Кроме того, использование такой разметки значительно упростит работу для устройств чтения с экрана.

Пользоваться кнопками стало удобнее, но это не предел. Попробуем сделать подсветку и ещё больше увеличить площадь кнопки.

Добавляем CSS стили

Для начала сделаем подсветку. Для этого нам потребуется всего одного правило.

  1. p:hover {
  2.     background-color: #efefef;
  3. }

Теперь если мышка окажется над параграфом, в котором расположена кнопка, его фон станет светло-серым.

Тут нужно учесть один момент. Нельзя останавливаться на этом этапе. Сейчас подсвечивается весь параграф, но клик за пределами самой кнопки или текста с описанием ничего не даст. И у посетителя может сложиться впечатление, что форма вообще не работает.

Поэтому нужно сделать так, чтобы клик по всему параграфу включал кнопку.

Для этого нужно чтобы тег label полностью совпадал по площади с тегом p.

Для начала убираем отступы у параграфа.

  1. p {
  2.     margin: 0;
  3.     padding: 0;
  4.     clear: both;
  5. }

Делаем label блочным элементом

  1. label {
  2.     display: block;
  3.     padding: 0.5em 0.5em 0.5em 2em;
  4. }

После применения этих стилей label станет занимать всю строку. Но где при этом окажется сама кнопка? Она будет находиться за пределами label, точнее над ним, и не будет подсвечиваться.

Опускаем её на один уровень с надписью.

  1. input {
  2.     float: left;
  3.     position: relative;
  4.     top: 0.5em;
  5.     left: 0.5em;
  6. }

Здесь нужны некоторые пояснения.

Применение правила float: left поместит кнопку внутри блока label, но в верхнем левом его углу, т.е. немного выше текста.

С помощью position: relative; top: 0.5em и left: 0.5em мы смещаем кнопку вниз и вправо на 0.5em, т.е. на величину отступов, которые указаны в стилях для label. Кстати, правый отступ (2em) я выбрал таким, чтобы кнопка не накладывалась на текст.

Заключение

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

Пример тестировался в FireFox 3.0.10, Opera 9.62, IE 7 и Safari 4 beta. Могут быть проблемы с :hover в IE 6 и более ранних.

Если есть замечания, буду рад обсудить.

]]> http://www.simplecoding.org/delaem-radio-knopki-udobnymi.html/feed 16