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

Интерактивные решения для лайтбоксов, формы проверки, навигация, загрузка, автоматическое заполнение, изображения кадрирование, слайд-шоу, всплывающие подсказки, слайдеры и таблиц в настоящее время разрабатываются, что использование отличный JavaScript и AJAX scripts.

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

jQuery MooTools Prototype и script.aculo.us используемые в этих примерах, поэтому любой вкус получает свою due.

1.Календари и сроки: Примеры и Demos

TimeframeНажмите и перетащите сроки, с функцией определения диапазонов.Лучший календарь.Проверьте демо- here.

Создайте удивительное ICAL типа календарей с jQueryКак и в iPhone приложение календаря, с описанием события, которое появляется при наведении мыши.Самая сложная часть делает ваши изображения бесшовных и использованию единого образа для всех графику, чтобы по возможности уменьшить время загрузки.Проверьте демо- here.

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

Элегантный анимированные еженедельно timelineЭто руководство объясняет, как создавать элегантные и анимированные еженедельный график, с ежедневным аннотации, которые можно настроить и использовать быстро в ваших веб-проектов.Проверьте демо- here.

Ненавязчивый DatePicker widgetЭтот ненавязчивый DatePicker (календарь), которая доступна с помощью клавиатуры, не требуется наличие встроенного блока, не использует всплывающие окна и подходит для использования в документах служила приложением / XHTML XML.Проверьте демо- here.

Дата PickerВыбор даты JQuery плагин позволяет пользователям выбрать дату или диапазон дат легко.Она включает в себя много вариантов: несколько календарей; одного, нескольких, и выбор диапазона; маркировке специальными, в выходные дни и особые даты; простой в настроить внешний вид с помощью CSS; пользовательского день, чтобы начать неделю, подходят с viewport.

2.Навигация Примеры и Demos

автоматическая прокрутка страниц navigationУзнайте, как создать автоматическую прокрутку страниц навигация с помощью script.aculo.us.Проверьте демо- here.

Создание “фильтруемых” портфель с jQueryВ этом уроке вы узнаете, как сделать “ фильтрация по category” немного более интересным с помощью всего лишь немного jQuery.

Создать простой, мощной подсветки продукт с MooToolsУзнайте, как создать гибкий инструмент, чтобы выделить ваш сайт продуктов и услуг с использованием MooTools JavaScript рамки.Проверьте демо- here.

Ext AccordionВиджет аккордеон и его InfoPanel являются компоненты, которые используют Ext JS Library.Он может быть использован для навигации по страницам, окна инструментов, скрыть-возможности подробно, войдите в формы, варианты диалогов, заметки и more.

JQuery ListNav Plug-InЭто JQuery плагин обеспечивает простой способ ненавязчиво добавить письмо навигации, основанной на виджет для любого < ul> или < ol> список.Легко стилизованных (через CSS) навигационной панели отображается над списком, показывая буквы от А до Z. При нажатии одной из букв фильтрует список, чтобы показать только те пункты, начинающиеся с этой буквы.При наведении курсора письмо (опционально) показывает количество над буквой, указывающий, сколько элементов содержится в этом списке.Проверьте демо- here.

3.Подсказка Примеры и Demos

Дублируйте JQuery главной странице подсказки использованием MooToolsJQuery страница имеет довольно обходительный подсказка-эффект, как показано выше.Вот как достичь того же эффекта, используя MooTools.

PrototipПрототип позволяет Вам легко создавать как простые и сложныеподсказки с помощью платформы Prototype JavaScript.Вы можете легко настроить его, контролировать положение подсказки и получить настраиваемые закругленными углами (без PNG изображений требуется)

SimpletipSimpletip представляет собой плагин для популярной библиотеки JQuery JavaScript.Это позволяет создавать всплывающие подсказки с легкостью для любого элемента на странице, используя силу jQuery’ селекторы с и управления событиями.Подсказки может быть статическим, динамическим или даже загружается через AJAX с различными визуальными effects.

Coda всплывающем bubblesПовторное создание Coda’ S ‘ puff’ всплывающих пузырьков, показанный при наведении указателя мыши на загружаемые image.

4.Меню Примеры и Demos

Гладкий анимированные меню с jQueryХорошее меню JQuery с гладкой анимационный эффект перехода.Проверьте демо- here.

Затухание меню – Замена ContentНапример странице ниже есть три меню для трех областей содержания: “ Главная, ” “ About” и “ Contact.” Когда пункт меню выбран, его меню графического показано на полную непрозрачность и соответствующей области содержимогоПоказано, в то время как другие пункты меню исчезли, и их областей содержание скрыто.С jQuery, вы можете исчезать in пункт меню нажатия, исчезать out все остальные пункты меню, display соответствующей области содержания и hide во всех других областях содержание.Проверьте демо- here.

JQuery Контекстное меню плагина inJQuery Контекстное меню представляет собой контекстное меню плагин для jQuery.Он предназначен, чтобы осуществление функций контекстного меню легко, и это требует минимальных усилий по настройке.Проверьте демо- here.

e24TabMenu — AJAX раскрывающегося вкладке menue24TabMenu представляет собой плагин написан для script.aculo.us.Это вкладка меню, которое можно разворачивать и сворачивать гладко.Проверьте демо- here.

5.Slider Примеры и Demos

MooTools Слайдер с двумя knobsЭто MooTools Слайдер с двумя ручками (т.е. дважды возлагали слайдер), с диапазоном индикатора.Проверьте демо- here.

MooTools CSS-стиля прокрутки barНебольшой кусочек JavaScript, который создает CSS-стиля полосы прокрутки с MooTools “ slider” класса.Проверьте демо- here.

Ultra-универсальный слайдер для websitesПростой шаг за шагом учебник для реализации ультра-универсальная слайдер с горизонтальной прокруткой и анимационные эффекты с помощью MooTools.Проверьте демо- here.

лучшую разбивку Небольшой скрипт, который может превратить уродливый вид номеров нумерация страниц в красивый слайдер использованием MooTools.Проверьте демо- here.

6.Слайд-шоу Примеры и Demos

noobSlideДругой слайдер плагин создан с помощью MooTools.

Easy SliderEasy Slider позволяет изображения или любого содержания, чтобы скользить по горизонтали или вертикали на кнопку.Особенности: автоматическое слайд, непрерывное скольжение, “ К first” и “ К last” пуговицы, скрывая управления, опциональный разметки упаковка для кнопок управления, вертикальные раздвижные, несколько ползунков на одной странице.Проверьте демо- here.

Supersized – полноэкранного фона / слайд-шоу JQuery плагин inSupersized является JQuery плагин, который автоматически изменяет размер (фонового) изображения размером браузер и запускает их как слайд-шоу.Он легкий и хорошо играет со всеми браузерами.Проверьте демо- here.

Анимированные наличие slideshowНовые возможности для этой динамической слайд-шоу JavaScript включать в себя описание поддержка, поддержка ссылок, ни имен ограничений, поддержка портретного образа, изящная деградация и активное состояние миниатюр.Проверьте демо- Here.

Перемещение BoxesJQuery слайдер с кнопками для изменения панелей и панелей увеличивать и уменьшать масштаб.Проверьте демо- here.

Prototype карусель с script.aculo.us На основе прототипа, карусели, что позволяет п-пункт подкачки.Элементы внутри карусели могут быть извлечены из самой HTML и поэтому могут быть проиндексированы поисковыми системами.Она также позволяет для вертикальных, горизонтальных и сгруппированы подкачки.Проверьте демо- here.

7.Обрезка изображения Примеры и Demos

UvumiTools CropЭто простой инструмент дает пользователям возможность создавать выделенную область, которую можно использовать, чтобы обрезать изображение в прямом эфире на своем сайте.Вы можете установить минимальный размер для выбора, просмотр в реальном времени, поддержка HTML изменение размеров, включения и выключения переключает, CSS стилей и more.

KropprНенавязчивый скрипт, который позволяет пользователям поворачивать, масштабировать и обрезать изображения, с незначительными изменениями, чтобы ваши website.

Jcrop Jcrop это быстрый и простой способ добавить изображения обрезка функциональность для веб-приложения.Она сочетает в себе простоту использования типичных JQuery плагина с мощным кросс-платформенный DHTML обрезка двигатель, который является верным знакомы графику рабочего стола applications.

8.Изображение предварительного просмотра примеров и Demos

ImgPreviewImgPreview плагин позволяет пользователям просматривать изображения перед кнопкой мыши и загружае …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров