JavaScript
Парсинг XML файла с помощью jQuery
Этой статьей хочу начать рубрику “Методики” в которой буду рассказывать о своем опыте при решении различных задач.
Часто, в проектах, стоит задача формирования HTML кода документа из стороннего файла с помощью AJAX, и зачастую данные в этих файлах хранятся в XML. Поэтому сегодня хочу рассказать как сделать парсинг XML документа с помощью jQuery.
Что бы описать методику парсинга я выбрал пример наиболее часто встречаемый в проектах, а также который вы встречали не однократно на различных сайтах – это появление подсказок при наборе текста в поисковых запросах. Т.е. перед нами лежит задача написать JavaScript код который отправляет данные набора серверу, который, в свою очередь, формирует XML результат. Парсинг XML документа и формирование на его основе HTML элементов для отображения пользователю.
Подборка плагинов на jQuery
В голове крутится много идей для написания статей, но лень матушка как всегда на коне. Так уж повелось что статьи я пишу по выходным, т.к. среди недели времени на это нет. Поэтому на этой неделе хочу отделаться меньшей кровью :) Но все же статья должна быть интересной.
Хочу познакомить вас с набором плагинов на jQuery, которыми я время от времени пользуюсь.
JavaScript библиотека для работы с изображениями
Последнее время очень модна тенденция web 2.0, и поэтому очень часто слышу пожелания заказчиков максимально приблизить к этому стандарту дизайн и функционал web-сайта.
web 2.0 привнес в жизнь верстальщиков как много интересных решений, так и много каверзных нюансов.
Часто на страницах встречаются картинки на которые применены множество различных эффектов – закругленные уголки, тени, рамки, отражения и т.п. Большинство из этого можно реализовать и с помощью html/css, но т.к. на странице, обычно в большинстве случаев, изображения разных размеров, то верстка крайне затрудняется, нужно применять множество html/css элементов, что приводит к громоздкости кода.
Поэтому сегодня хочу Вас познакомить с прекрасной библиотекой Кристиана Эффенбергера , которая помогает решит ряд проблем с версткой эффектов для изображений.
Лайтбокс на любой вкус
щете лайтбокс… и не находите подходящий? :)
– сдесь найдется любой.
В списке есть лайтбоксы для таких фреймверков:
- Jquery
- Prototype
- Mootools
- YUI
- А также лайтбоксы без фреймверков
Анимированный ховер для навигации на mootools
Последнее время писал много о плагинах, и все они были разработаны на jQuery, хочется немного разбавить эту тематику плагином на mootools. Долго перебирал свои разработки на этом фреймверке и не мог выбрать наиболее интересное, ведь по сути решений на JavaScript написано много – галереи, динамические формы, лайтбоксы, аккордеоны и т.п., поэтому хотелось рассказать о чем-то редком.
Представляю Вам плагин “Анимированный ховер для навигации“. Чем же он интересен?
Прежде всего тем, что основные параметры анимации задаются в css файле!
А также тем, что такой плагин я не встречал, но, правда, видел аналогичные скрипты, которые не обладали универсальностью, а были захардкожены под определенные стили. Если я ошибаюсь, хотел бы увидеть ссылки в комментариях.
По традиции, чтоб было интереснее, сразу покажу пару примеров:
Табслайдер
Табслайдер – является одним из самых распространенных плагинов, есть множество вариантов
написания этого плагина. Наиболее часто для этого используется “Coda-Slider“, он хорошо отлажен, багов в работе я не замечал, вообщем хороший плагин, но есть минус из-за которого я написал свой, а именно он генерирует половину HTML кода сам, что очень затрудняет установку под конкретный дизайн.
Пример №1
Графики средствами JavaScript
Хочу познакомить Вас с прекрасной библиотекой для построения графиков. Я долго искал подходящую библиотеку, но всякий раз они меня не устраивали, то при построениях графика использовался флешь, то очень сложная система API для генерации и самый частый минус – плохая поддержка кроссбраузерности.
Но вот, наконецто, я нашел самую простую и кроссбраузерную библиотеку, которая генерирует графики только средствами JavaScript – это JS Charts.
JS Charts потдержует три разных варианта графиков:
- Гистограмма
- Линейный график
- Круговая диограмма
Пример графиков
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)