AjaxBlog » JavaScript

Гаджет из фотошопа

admin — Wed, 21 Oct 2009 11:28:40 +0000

Для одного рабочего проекта нужно было создать «по быстрому» прототип системы. Основная логика интерфейса была, все что видеть пользователь – это гаджет. К сожалению интерфейс не был одобрен руководством, а прототип остался, по этому, если кто-то использует его в своем проекте, я не буду против. Обращаю ваше внимания, так как это прототип делали «по быстрому» – то дизайн и логика поведения была взята с одной очень уважаемой мною программы.

И так что он умеет:

Двигаться по странице (move)
Изменять размеры (resize)
Имеет возможность настроить максимальную ширину панели (max width)
Имеет два состояния: нормальное (normal) и компактное (compact)
Имеет возможность сортировать гаджеты внутри панельки (sort)
Просмотр в компактном режиме

Нормальный режим

Компактный режим

Смотрим: рабочий пример гаджета

Технология: jQuery + UI, CSS, HTML – все просто. Если кому-то нужно будет доработать гаджет или адаптировать к своим требованием, пишите – договоримся.

Select Box Factory – очумелый плагин для jQuery.

admin — Mon, 20 Oct 2008 09:47:59 +0000

Я являюсь тайным фанатом библиотеки для javascript – jQuery. Это библиотека предоставляет для разработчика фантастические возможности для реализации задуманного им функционала.

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

Вот об одном из них я и расскажу. Select Box Factory –поистине очумелый плагин для создание списков с выбором.

Что он умеет:

строить списки на основе уже существующей DOM – структуры

var dropdown = new sFac({
	id : "fromMemory",
	container : "dropdownContainer"
});	


	 Lynx 
	Cheetah
	Bobcat

Получать самому списочный массив с сервера с помощью JSON или прописать его в коде

var dropdown = new sFac({
	id : "fromTheServerSide",
	container : "dropdownContainer",
	choices :
		[
			['leopard','leopard','Leopard',false,0,["spots"," ears"]],
			['tiger','tiger','Tiger',false,0,[" tail","nose"]],
			['serval','serval','Serval',true,0,["tail","nose"]],
		]
});

Списки поддерживают следующие свойства: dropdown, показать один только список без шапки, мультивыбор значений списка, изменений размеров списков (resize)
Плагин поддерживает фильтрование значений списка и создание списков из картинок
Создание списков с подкрашенными значениями, с последующей возможностью применить к ним фильтр
Поддержка скинов для списков

Скажи «здравствуй» Blackbird и «до свидание» alert()

admin — Thu, 16 Oct 2008 12:37:57 +0000

Вот такой громкий заголовок венчает сайт авторов Blackbird.

Что такое Blackbird – это js скрипт который позволяет забыть о существовании оператора JavaScript’а – alert(). Для разработчика javascript – интересный инструмент дебагинка кода.

Конечно, «монстры» JavaScript программирования скажут, зачем нам это нужно. Когда есть Firebug с его console.log(message). Для отладки кода в браузерах отличном от Firefox, есть от встроенных средств браузера до Firebug Lite.

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

Как подключить

скачать код
прописать в html файле следующие строчки

Что умеет

log.toggle(): Скрыть/Показать Blackbird
log.move(): Перемещение Blackbird к следующей фиксированной позиции: верхней-левой, верхней-правой, нижней-левой, нижней-правой.
log.resize(): Развернуть / Свернуть Blackbird
log.clear(): Очистить от содержимого Blackbird
log.debug(message): Добавить отладочную информацию в Blackbird
log.info(message): Добавить сообщение в Blackbird
log.warn(message): Добавить предупреждение в Blackbird
log.error(message): Добавить ошибку в Blackbird
log.profile(label): Профайлер кода. Это метка должна стоять в начале и конце тестируемого кода. Очень удобно чтобы узнать время выполнение вашего кусочка кода.

Какие клавиши понимает

F2: Скрыть/Показать
Shift+F2: Переместить
Alt+Shift+F2: Очистить Blackbird от сообщений

Drosera – отладчик javascript для Safari

admin — Tue, 05 Aug 2008 09:48:51 +0000

Webkit – движок Safari получил мощный javascript отладчик – Drosera. Это сообщение было опубликовано на блоке Safari. Загрузив последнюю ночную сборку Webkit вы сразу получите этот инструмент. По функциональности он не сильно уступает известному Firebug.

Теперь, кто сможет сказать, что javascript – не настоящий язык программирования.

240 удивительных плагинов для jQuery

admin — Fri, 25 Jul 2008 06:58:51 +0000

jQuery одна из моих любимых JavaScript библиотек. Одно из сильных сторон этот библиотеки – поддержка сторонних расширений (плагинов). А нашему брату только дай по расширять

В этом посту приведен список более чем 200 отобранных плагинов для jQury на каждый случай. Правда не мной, а Jürgen Koller.

File upload

Form Validation

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Js Decoder или как распутать запутаный код

admin — Fri, 11 Jul 2008 11:02:51 +0000

Нашел в сети замечательный онлайн инструмент Js Decoder. Он позволяет декодировать обфускационный код.

Часто можно встретить код такого вида
var base_code='';var jsdecoder;var jscolorizer;var code='';var time=0;function decode() {code='';base_code='';jsdecoder=new JsDecoder();jscolorizer=new JsColorizer();if($('msg').innerHTML.length){do_clean_init();}else{jsdecoder.s=$("a1").value;do_decode_init();}} function do_decode_init() {$('msg').innerHTML+='Decoding .. ';setTimeout(do_decode,50);}...

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

Вот для того что-бы привести код в человекопонятный вид и служит этот инструмент.

Meteora – новый javascript фреймворк

admin — Wed, 09 Jul 2008 07:31:55 +0000

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

Я хочу поговорить о достаточно новом проекте Meteora построенной на библиотеке mootools. Основная идея – создание уже готовых виджетов.

Как пишут сами разработчики:

Meteora сборка кросс браузерных виджетов и элементов управления, который позволяет Вам быстро писать богатые и настраиваемые web-приложения, без необходимости напрасно тратить время, читая страницы документации или программируя чрезмерный javascript, отладка которого в каждом браузере является мучением.

Немного корявый перевод, но я старался близко к тексту оригинала

Текущая сборка содержит:

Для каждого есть демо версия и документация, что в целом производит хорошее впечатление. Хотя я больше сторонник jQuery UI, но скорее всего я попробую использовать этот фреймворк в своей работе.

Firebug для Internet Explorer

admin — Fri, 04 Jul 2008 17:16:25 +0000

Firebug стал инструментом номер один web-разрабочиков. Я уже не представляю себе работу без него (да и до него уже вспоминаю как кошмарный сон).

Все хорошо было бы, но к моему великому сожалению есть еще «осел». И для него microsoft не сделало инструмента аналогичного firebug`у.

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

Представляю на Ваш суд один из таких инструментов – дебагер от Azer Koçul.

Как видем функционал еще сильно недотягивает до полноценого firebug`а, но начало положено хороше.

Как это работает, все очень просто. Вставляете следующию строчку в вашу страничку и все.

Полезные ссылки

JS – эффекты для ваших фотографий

admin — Tue, 01 Jul 2008 12:08:15 +0000

Не когда не думал, что с помощью только Javascript и CSS, можно сделать такое.

Вот прекрасный образец не недооцененным js. Ребята с этого сайта предлагают всевозможные эффекты для ваших фотографий. Вот лишь некоторые из них. Те что мне больше всего понравились.

И так…

Эффект «Полароид»
Помните такой был фотоаппарат. Теперь вы можете подключив js-файл, свои фотографии превратить фотокарточки от «Полароида». Смотриться красиво.
Уголки
«Бедные уголки», кто их уже не делал. Эти меня подкупили тем, что они «живые». При наведение мышки уголок распрямляется или наоборот заворачивается. Все дела в настройках. а там достаточно их много, что-бы можно было настроить на свой вкус.
Эффект «зеркальное отражение»
Добавляет отражение для фотографии. Фотография выглядит так, как будто она стоит на полированной поверхности. Впечатляет.

Всплывающей подсказки или tooltip

admin — Mon, 23 Jun 2008 08:29:52 +0000

В Интернете наблюдается определенная модная тенденция к использованию на сайте всевозможных всплывающих подсказок (tooltip).

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

Я давно уже хотел на своем сайте задействовать их. И вот смотрим…

Идея подсказки, взята с одного известного сайта.
Скрипт полностью написан с нуля, так-так их вариант не устраивал по ряду причин.
Скрипт пока еще «сырой», но если появиться интерес то доведу его до кондиции плагина к WordPress`у

Здесь можно посмотреть демо работу скрипт, а здесь скачать.