Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Поле ввода с убирающейся подсказкой

20.04.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:
  1. <label for="search">Поиск по сайту:</label>
  2. <input type="text" name="search" id="search" value="что ищем?"
  3.        onfocus="if(this.value==this.defaultValue){this.value='';}"
  4.        onblur="if(this.value==''){this.value=this.defaultValue;}">
Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

Читать статью целиком »
Просмотров: 18656 | Комментариев: 19

Методы parseInt и parseFloat: особенности и альтернативы

28.03.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Для преобразования строки в число в JavaScript используются два метода: parseInt - для целых чисел и parseFloat для чисел с плавающей запятой. В официальной документации про parseInt сказано примерно следующее:


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


И почти то же самое про parseFloat:


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


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

Читать статью целиком »
Просмотров: 13248 | Комментариев: 6

PCL's JS_Protect 1.0

27.01.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Небольшой класс на PHP для шифрования скриптов JavaScript. Изначально задумывался как дополнительная мера противодействия спамботам, но пока успешно работают более простые методы, и PCL's JS_Protect остался в качестве proof of concept. Класс позволяет шифровать исходные тексты скриптов JavaScript с целью затруднения их автоматического анализа. Любителей всякой малвары и шаровары сразу огорчу: JS_Protect легко снимается вручную при помощи Eval JavaScript Unpacker. Главный недостаток этой защиты в том, что зашифрованный скрипт очень сильно увеличивается в размерах.
  1. // Подключение модуля
  2. include "js_protect.php";
  3.  
  4. // Создание класса
  5. $js_protect = new JS_Protect;
  6.  
  7. // Исходный код скрипта для шифрования
  8. $js_protect->js_source=$code;
  9.  
  10. // Уровень вложенности шифровки. Рекомендуется 1, максимум 2
  11. $js_protect->code_level=1;
  12.  
  13. // Количество внутренних функций. Повышают надежность, но значительно
  14. // увеличивают размер получаемого кода
  15. $js_protect->func_level=rand(0,6);
  16.  
  17. // Выполнить URL-кодирование защищенного скрипта или нет
  18. $js_protect->enable_raw=false;
  19.  
  20. // Запуститиь процедуру шифрования
  21. echo $js_protect->protect();
Вложенность шифрования не рекомендуется выставлять более 2, потому что в этом случае размер скрипта вырастет до совсем недопустимых размеров. Опция "использовать внутренние функции" дает дополнительную защиту, но также увеличивает размер получаемого скрипта. Если эта опция не нужна, то установите значение func_level = 0. URL-кодирование также дает дополнительную защиту и скрывает обработанный текст, но при этом еще больше увеличивает размер.

Читать статью целиком »
Просмотров: 3998 | Комментариев: 2

Обработка колесика мыши на JavaScript

12.10.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Сейчас трудно представить мышь без хотя бы одного колесика. Оно используется для прокрутки страницы, для изменения масштаба каких-либо элементов, листания списков и других действий. В основном полная обработка колесика выполняется только в стационарных приложениях, а на сайтах дело ограничивается штатными средствами браузеров. Мы не будем отставать от прогресса, и сегодня разберем как грамотно обрабатывать колесико мыши в современных web-приложениях. Начинаем с теории.


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


Вращение колесика мышки - это тоже событие, значит его тоже можно обработать. Но тут есть особенность: в разных браузерах событие вращения колесика обозначается по-разному. Причину этого я объяснить не могу, впрочем как и многие другие танцы с бубнами для достижения полноценной кроссбраузерности. Сперва напишем функции установки и отмены события для любого элемента страницы, причем сделаем их универсальными, они нам еще не раз пригодятся в будущем. В браузере Internet Explorer обработчики добавляются функцией attachEvent, а названия событий имеют вид 'on'+событие, например, 'onclick', 'onload', 'onmousewheel' и т.д. В браузерах на движке Gecko (Mozilla, Firefox), на движке WebKit (Chrome, Safari) и Opera обработчики добавляются функцией addEventListener, а названия событий никак не меняются, то есть 'scroll', 'keypress', 'mousewheel'. И отдельно в этом списке стоит имя события от колесика мышки для браузеров на движке Gecko, оно единственное и уникальное - 'DOMMouseScroll'. Теперь попробуем все эти данные собрать в кучу.

Читать статью целиком »
Просмотров: 20838 | Комментариев: 8

PCL's Floating Window 1.0.0

06.08.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Для очередного проекта мне понадобился скрипт для создания плавающего окна, которое можно перетаскивать по экрану мышкой. Готовые скрипты или не имели нужного мне функционала, или же были слишком громоздкие, а таскать за собой чужеродные фреймворки ради одной функции - слишком дорогое удовольствие. В результате нескольких часов работы появился скрипт PCL's Floating Window.

Описание и возможности PCL's Floating Window:
  • Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 6.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.5-9.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.

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

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

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

  • Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Floating Window за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов!
Если в каком-нибудь из заявленных браузеров скрипт будет работать некорректно, то просьба сообщить в комментариях точную версию браузера и настройки подключения скрипта.

Читать статью целиком »
Просмотров: 5008 | Комментариев: 7

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 3 (0.0035 сек.) / Память: 4.5 Mb
Наверх