Показаны сообщения с ярлыком javascript. Показать все сообщения
Показаны сообщения с ярлыком javascript. Показать все сообщения

четверг, 22 сентября 2011 г.

Подсказки в input и textarea (placeholder)

Еще одна довольно частая задача в веб-проектах - это показывать подсказки в input и textarea, чтобы сэкономить место, да и просто для красоты.
Например, такие:

До HTML5 это приходилось решать примерно так:
<input onblur="if (!this.value) {this.style.color= '#ccc';this.value = this.defaultValue}" onfocus="if (this.value == this.defaultValue) {this.value = ''; this.style.color= '#ccc'}" style="color: #ccc;" type="text" value="Поиск" />
Для тех, кто не знает про замечательный атрибут defaultValue, поясню - в нём сохраняет то значение, которое было у поля при загрузке страницы.
На самом деле уже заметно, что делается это нетривиально, но на этом сложности не заканчиваются.
При сабмите формы нужно тоже смотреть, если у поля this.value == this.defaultValue, то нужно сбрасывать это значение, чтобы оно не было отправлено на сервер.
В итоге получаем, что для решения задачи нам нужно написать несколько строк javascript, которые ну никак не красят код страницы + без JS это работать не будет.

К счастью, в HTML5 позаботились об этом и ввели атрибут placeholder http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-placeholder-attribute
И теперь достаточно указать этот атрибут, чтобы получить подсказки для полей:
<input placeholder="Подсказка" type="text" />
Рабочие примеры:

четверг, 8 сентября 2011 г.

Лучшая минификация javascript с помощью Closure Compiler

Практически в любом веб-проекте возникает необходимость минификации javascript.
На мой взгляд, на сегодняшний день лучше всех остальных с этой задачей справляется Closure Compiler http://closure-compiler.appspot.com
Помимо онлайн-инструмента, есть также REST API, которое позволяет автоматизировать процесс.
Но проще всего использовать скрипт, написанный на Java, который можно скачать здесь:
http://code.google.com/intl/ru-RU/closure/compiler/docs/gettingstarted_app.html
В простейшем случае (SIMPLE_OPTIMIZATIONS) достаточно выполнить команду:
java -jar compiler.jar --js file1.js file2.js --js_output_file file.min.js
Более подробно об уровнях сжатия и оптимизации можете прочитать здесь: http://code.google.com/intl/ru-RU/closure/compiler/docs/compilation_levels.html