Разработчики и дизайнеры используют все больше и больше JavaScript в современном дизайне.

Иногда это может быть помехой для пользователей и отнять у простота конструкции, а также в других случаях это может добавить значительный вклад в user’ Опыт с.Ключ), добавив нужное количество JavaScript, и б), используя правильные методы JavaScript.У нас есть already collected various JavaScript techniques В прошлом – Сейчас it’ время для новой порции JavaScript.

Спасибо Web’ широкое внедрение х JavaScript, JavaScript библиотеки появились, чтобы помочь сделать дизайн и разработка легче.Вот несколько основных библиотек JavaScript, которые разработчики используют: jQuery, Prototype, Scriptaculous, MooTools, Dojo.Эти структуры имеют процветающие общины, члены которой были разработаны бесчисленные плагины, которые могут значительно добавить в JavaScript framework.

Тем не менее, иногда нам необходимо наличие решения, которые являются немного более сложный и специфический.Вот 75 более удобной наличие techniques, которые сделали веб-сайтов намного более гладким и более interesting.

Вы можете взглянуть на следующие статьи:

• 80 AJAX-решения для профессиональных Coding
• 60 Подробнее AJAX и Javascript решения для профессиональных Coding
• 30 сценариев для галереи, слайд-шоу и Lightboxes
• 40 подсказки скриптов с AJAX, JavaScript & CSS
• сетки данных с AJAX, DHTML и JavaScript

75 Полезные JavaScript Techniques

расстановка переносов в Web
Этот проект собирает рабочих решения для автоматической расстановки переносов в (X) HTML страницы.Для разных языках человеческих и сценарий, сервера и на стороне клиента.JavaScript-решения,называется Hyphenator.js доступны, как хорошо.Hyphenator.js приносит на стороне клиента переносов из HTML-документов на каждый браузер, вставляя мягкий дефис использованием переносы и Франклин М. Liangs алгоритм переносов известно из латекса и Openoffice.

SocialHistory.js
SocialHistory.js позволяет определить, какие сайты социальных закладок используют ваши посетители.Он не может позволить вам увидеть все истории пользователя.Он проверяет, в 20-вопросы стиля, если пользователь был к определенному URL: Это попало.SocialHistory.js имеет большой список наиболее популярных социальных закладок на сайты, которые он проверяет против. альтернативная approach.

Textboxlist Auto-Completion
Одна из наиболее привлекательных особенностей является наличие весьма полезные автозавершения.Ни один другой сайт делает автозавершение лучше, чем Facebook.Они создали элегантный способ для поиска других пользователей Facebook использовании функции автозаполнения.После того как пользователь найден, его имя добавляется в план и “ X” ссылку, чтобы удалить имя.TextboxList была имитировать эту функцию и создал небольшой скрипт для downloading.

addSizes.js
Этот небольшой JavaScript заботится об автоматическом ссылку на размер файла поколения… Например, если у вас есть большой mp3-или PDF-файлы, предлагаемые на вашу страницу, скрипт автоматически проверяет размер файла и отображается формат и размер файла в brackets.

syntaxhighlighter
SyntaxHighlighter здесь, чтобы помочь разработчику / кодер чтобы получить возможность отправлять фрагменты кода в Интернете с легкостью и у меня выглядеть красиво.It’ на 100% Java Script основе, и это doesn’ волнует, что у вас на server.

samaxesjs
samaxesJS это набор утилит и управления, написанные в JavaScript, для создания интерактивных веб-приложений.Контроль TOC динамически строит оглавление из заголовков в документе и добавляет правовых стиле номера раздела для каждого из рубрики: добавляет нумерацию перед всеми заголовками, генерирует HTML содержание, деградирует изящно, если JavaScript не доступно/ enabled.

Шаг за Step
Этот скрипт позволяет показывать и объяснять посетителям, что ваша страница имеет для них.Вы, возможно, сталкивались интерактивные демонстрации, созданные с Screencasting и screengrabbing программного обеспечения, которые объясняют интерфейс для пользователей шаг за шагом.Это именно то, что делает этот сценарий для веб sites.

MoreCSS
MoreCSS небольшой, кросс-браузерный JavaScript библиотека, которая позволяет создавать вкладки меню, таблиц и списков с «зебре» стиле, как если бы вы использовали регулярные CSS.It’ достаточно, чтобы включить библиотеку в HTML и CSS использовать для общей цели дизайн elements.

Facelift изображения Replacement
Facelift Image Replacement (или FLIR, выраженный презрительный взгляд) является сценарий замены изображения, который динамически генерирует изображение представления текста на веб-странице в шрифтах, которые иначе не могли бы быть видны посетителям.Созданный файл будет автоматически вставлен в веб-страницы с помощью Javascript и видимым для всех современных браузерах.Любой элемент с текстом можно заменить: от заголовки (h1, h2, и т.д.) для пролетных элементов и все между ними

CSS Sprites2
Кросс-браузер функциональность немного халявы; JQuery работыв большинстве современных браузеров, так что все, что вы видите здесь работает в IE6, Firefox, Safari, Opera и т.д. Кроме того, мы составили несколько изящная деградация scenarios.

jParralax
“ параллакса [JQuery библиотеку,] поворачивает выбранный элемент в ‘ window’ или просмотра, и все его дети в абсолютно позиционируемых слоев, которые можно увидеть в иллюминатор.Эти слои двигаться в ответ на мышь, и, в зависимости от их размеров (и варианты слой инициализации), они перемещаются на разные величины, в parallaxy вид way.” Подумайте, глядя в камеру и имеющий слои объектов наразличные расстояния передвигаться.Эта библиотека позволяет достичь этой цели с помощью нескольких использованием статических изображений, по одному для каждой layer.

DdMenu – Контекстное меню Script
ddMenu простой MooTools основе сценария для создания you’ Re собственные контекстные меню.Нажмите Crtl-ключ и щелкните правой кнопкой мыши для переключения между ddMenu и браузер по умолчанию контекстного меню.Нажмите Shift-ключ и щелкните правой кнопкой мыши, чтобы открыть ddMenu рядом контексте браузера по умолчанию menu.

JS-hotkeys
jQuery.Hotkeys плагин позволяет легко добавлять и удалять обработчики событий клавиатуры в любом месте вашего кода поддержки практически любой комбинации клавиш.Она занимает одну строку кода, чтобы связать / развязать комбинации горячих клавиш. Альтернативная approach.

BarackSlideshow
элегантный, легкий сценарий слайд-шоу.Он работает с MooTools 1.2 и поддерживает все виды формы преобразования (верхней и левой координаты и высота и ширина свойств), что означает, что теперь можно использовать с вертикальным, горизонтальным или даже нерегулярное lists.

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

История Keeper
unFocus История хранителя является наличие на основе библиотеки для управления историю браузера (кнопка Назад) и оказание поддержки глубокие ссылки для вспышки и Ajax приложений.Это позволяет кнопку назад поддержку для приложений на стороне клиента, имеет хэш на основе глубокие ссылки (Anchor Стиль – index.html # Foo = бар) и управляется событиями – Абоненту шаблону.В настоящее время сценарий хорошо работает во всех современных browsers.

date.js
Datejs является обширным открытым исходным кодом JavaScript Дата библиотека для анализа, форматирования и время обработки и dates.

Lightview
Lightview другой скрипт, который создает модальных окон на веб-сайте.Он имеет встроенный предварительной загрузки изображений, регулируемая закругленными углами, без формате PNG и содержание изменяется, чтобы всегда поместится на экране.Сценарий может быть использован для проведения презентаций, отдельные изображения, QuickTime-файлов, форм, Iframes, Inline содержание и Flash-files.

Coda всплывающее окно bubbles

Panic программного обеспечения компании есть любимая приложений Mac разработчики называют Coda.Coda имеет очень элегантный дизайн, и одна из тонких эффектов JavaScript, которые были добавлены к ней стилизованное всплывающих пузырьков.Блог JQuery для Designers создал скрипт, который сочетает в себе JQuery с пользовательских code реплицировать функции, используемые на сайте Coda.Эффект тонким и элегантным и значительно добавляет к user’ S experience.

AJAX im
С ростом популярности веб-клиентов, IM, как meebox, многие разработчики хотят добавить клиента IM наличие своих собственных.Ajax IM является библиотека, посвященная созданию Ajax IM клиент, который работает из коробки.Сценарий является относительно большой, но это может быть хороший эффект для некоторых сайтов, которые нуждаются в большем взаимодействии с их users.

LiveValidation

Это удобная находка для любого веб-разработчика, который использует формы.Попытка создать интуитивно-форме может быть случайная работа с разными типами проверки, которые должны произойти.Кроме того, создание более быстрый, более интуитивно понятной форме с JavaScript может быть сложно, слишком.К счастью, LiveValidation взяла догадки из процесса и создал крошечный, ненавязчивый сценарий, который может взять на себя страдания от формы проверки.Если you’ Re Рубин на Rails разработчик, LiveValidation выпускается в двух формах: либо с Prototype (идеально подходит для Рубин на рельсы) или тот, который может быть использован в качестве автономного package.

Ajax AutoSuggest
Как TextboxList’ S автозавершения сценарий, Ajax Автоперевода это со вкусом и изысканным автозаполнением сценарий.Сценарий совсем крошечные, весом чуть менее 9k, и добавляет очень приятно прикасаться к любой поисковой form.

FancyUpload
Это Загрузить скрипт, который показывает прогресс файлы, которые вы загружаете.It’ идеально подходит для любой формы загрузки и позволяет даже для загрузки нескольких одновременно.Вы можете ограничить размер загружаемого файла, а также ограничить типы файлов, которые могут быть загружены.Единственное требование, что FancyUpload имеет то, что ваши пользователи не установлен Flash, которая имеет 95% проникновения среди веб-users.

Taggify
Taggify немного отличаются в реализации, чем другие JavaScripts в списке.Taggify представляет собой серверное решение для добавления всплывающих виджетов на фотографии.Вместо того, чтобы скачать скрипт и разместить его на Вашем сайте, вы можете просто добавить крошечные < include> в ваших тегов и you’ придется силой Taggify установлена ​​на Вашем сайте.Использование Taggify интересно, он добавляет, заметки и другую полезную информацию photos.

Думайте об этом как форсированным вариантом записки, добавив функцию для фотографий Flickr.Вы можете добавить любой HTML в Taggify внимание, что создание хорошей информационной странице, чтобы сопровождать любое изображение, которое требуется немного больше explanation.

AmberJack
Amberjack является одним из наиболее интересных и убедительных методов JavaScript.Сайт туры являются чрезвычайно полезными, поскольку они могут помочь ознакомить пользователей, рекламные возможности и продукты, и многое другое.Возможно, лучшая часть о Amberjack, что ничего не должен быть установлен или узнал, чтобы начать создание сайта туров.Amberjack предоставляет возможность для сайта и продуктов владельцам быстро и легко создать веб-сайт туры с JavaScript.It’ с удивительно крошечные скачать, всего в 4 KB.

раздвижные Tabs
Это другой сценарий, вдохновленный Coda.По сути, it’ SA гладкой прокрутки вкладке система, которая делает переключение между панелями легко и удобно работать.Вы можете посмотреть демо-раздвижные Tabs here.Раздвижные Tabs построен прочь JavaScript MooTools рамки. Альтернативная solution.

наличие изображенияLoader
Если you’ ищете более интуитивный способ для пользователей, для загрузки и просмотра изображений на вашем веб-сайте, изображения JavaScript Loader ( demo) может отвечать всем требованиям.Погрузчик наличие изображения является отличным способом, чтобы показать пользователям изображения, прежде чем он загружен, и это может также предоставить другую информацию об изображении, если desired.

swfIR
swfIR является интересной концепцией, как он использует сочетание вспышки и JavaScript и добавляет функциональность для работы с изображениями на него.После swfIR установлен, он добавляет < span> с классом “ swfir” вокруг изображения.swfIR можете добавлять практически любые манипуляции с изображением.Особенно полезной особенностью сценария является его способность автоматически изменять размер изображений на основе размера страницы.При изменении размера текста на странице, изображение изменяется пропорционально макета.По изменение размера фотографии вместе с текстом, дизайн чувствует себя намного более cohesive.

MooFlow
Для любителей Apple’ с функцией Cover Flow в Leopard, MooFlow берется непосредственно из Apple’ S PlayBook.MooFlow это сценарий JavaScript галерее, которая использует MooTools и добавляет немного наличие магии, чтобы сделать красивые галереи изображений, в комплекте с ползунком, который имитирует обложки Flow.

Так же, как с Cover Flow, вы можете манипулировать MooFlow’ S макетов и функциональность.Вы можете переключаться в полноэкранный режим, изображение отражение и автозапуск.MooFlow вполне настраивается и прост в настройке, потому что просто захватывает все изображения в element.

amCharts
Этот сценарий является схема генератора, который убегает из комбинации вспышки и JavaScript.Вы можете создать практически любой тип графика или диаграммы со сценарием, и даже может использовать. CSV и XML-файлов для извлечения данных из.С amCharts, вы можете создать графики в виде колонки & Bar, Pie & Donut, линия & Площадь и Scatter & Bubble.

GreyBox
GreyBox’ автора приветствует наличие всплывающем окне, как “ всплывающем окне, что doesn’ T сосать, ” и не зря.GreyBox делает все, чтобы модальное окно should сделать.Он может отображать фотографии, веб-сайты, и почти любой другой контент вы можете думать of.

Использование GreyBox невероятно легко, потому что однажды you’ ве включить JavaScript файла в заголовке, осталось только настроить, добавив < rel> теги к тому, что элемент, который вы хотите увидеть в window.

Mailist
В то время как Mailist isn’ та полномасштабный AJAX контакт form, крошечный скрипт именно то, что большинство веб-разработчиков необходимо быстро сохранять адреса электронной почты для вещей, как бета регистраций и других выражений изинтерес форм.Он даже имеет задний конец для введения вещи, как электронная почта резервного копирования и редактирования внешнего вида form.

SWFObject
SWFObject это маленький флэш-плеер, который использует JavaScript, чтобы преодолеть многие препятствия, которые can’ т быть решена путем разметки в одиночку.Игрок является крошечный скачать, только 9,5 KB (или 3,8 KB GZIP’ ред.)SWFObject гордится тем, что его совместимость с современными браузерами, и это на самом деле использует JavaScript, чтобы помочь определить, какая версия Flash Player в использовании и, чтобы избежать вспышки устаревших плагинов, которые нарушают вспышки content.

PlotKit
PlotKit является наличие диаграмм построение сценария, который основан на крошечной наличие рамках Moochikit.PlotKit является исключительной библиотеки для быстрого построения всех видов graphs.

наличие tabifier
наличие tabifier это отличный небольшой скрипт, который позволяет быстро и легко создавать вкладки для вашего содержания.Все, что требуется использовать tabifier является включение JavaScript и добавить < div> с классом “ tabber” окружающих вкладками содержимое, а затем добавить класс “ tabbertab” и название для < div> в, что показывает, как tab’ название с.Вы даже можете использовать передовые технологии, такие как добавление печенье с вкладками, динамически меняющихся вкладки и настройки по умолчанию tab.

FancyZoom 1.1
Предназначен для просмотра полноразмерной фотографии и изображения, как встроенные, не требуя отдельного нагрузки веб-страницы, FancyZoom обеспечивает гладкую, чистую, по-настоящему Mac-подобные effect.

Он ориентирован на гладкой, полированной масштабирование анимации и автоматически масштабирует изображения с любым изображением ссылке, без HTML изменения.Сц …

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