By masster
Очень свежая, нужная и весьма оригинальная идея - автоматически разбить форму на сайте с большим количеством полей на несколько форм, каждая из которых представляет собой логический шаг по заполнению.
Ниже приводим подробный урок, как это сделать с помощью jQuery.
Скачать
Демо
Задача
Если вы по какой либо причине должны иметь на сайте большую форму для заполнения с большим количеством полей, то ее следует семантически разбить на отдельные группы полей (fieldsets). Каждая такая группа полей должна иметь четкое и ясное название. И хотя множество примеров в инете сегодня выглядят совершенно по разному, этому правилу все же надо стараться следовать.
Таким образом можно сказать, что каждая группа полей представляет собой подзадачу одной более большой задачи - заполнения вебформы. Следовательно, каждая подзадача может стать логическим шагом со своим названием (или описанием), полями ввода и навигацией “вперед” и “назад”, являющейся отличительной чертой мастера (визарда) заполнения форм. Весь процесс заполнения форм разбивается на несколько простых шагов.
Создаем “шаги”
Теперь поясним код, приведенный ниже. Чтобы определить, сколько должно быть шагов, нам необходимо выделить все группы полей (fieldsets) и получить размер этого набора групп полей. Затем мы проходим по этому набору (который возвращает как раз все группы полей), чтобы определить количество шагов. Каждую группу полей мы с помощью jQuery на лету помещаем в слой (div) и присоединяем к нему HTML элементы “параграф”(<p></p>), которые как раз и будут кнопками “веред” и “назад”.
Read more »
By masster
Это классная штучка для розыгрыша! Оказывается, с помощью описанного ниже букмарклета (bookmarklet) можно заставить все картинки в выдаче Google на закладке “Картинки” (Images) кружиться в хороводе! Для этого проделайте следующие шаги:
1. Откройте Google
2. Щелкните по закладке “Картинки” (”Images”)
3. Найдите любое изображение ( я набрал в строке запроса слово “sun”)
4. Введите в адресную строку следующий код:
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24;
x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.images; DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute';
DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5;
DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++ }setInterval('A()',5); void(0);
5. Нажмите “Enter”
Розыгрыш? Все просто - надо у того, кого хотите разыграть, подменить одну из закладок в браузере на закладку со скриптом и посмотреть на его (или ее?) реакцию.
Источник: http://computerhelper-vandan.blogspot.com
STEP 5 : HIT ENTER
By masster
Этот календарь, который представлен компанией DHTMLX по функциональности напоминает известные решения для календарей событий сходные с Microsoft Outlook Calendar, Apple’s iCal или Google Calendar. Благодаря динамической загрузке с помощью Ajax добавление, внесение изменение и удаление событий происходит без перезагрузки страницы. Технология drag-n-drop позволяет пользователям легко менять дату и время события простым перетаскиванием или изменением размеров графических блоков событий. Сам календарь можно просматривать в помесячном, понедельном режимах, и естественно в режиме отображения конкретного дня. Сам скрипт очень мало весит - всего 19Kb в сжатом виде (gzipped) . Чтобы сохранять данные в базе данных, необходим скрипт для серверной части - для этого можно воспользоваться dhtmlxConnector или написать такой скрипт самостоятельно. Благодаря API функциям можно реализовать собственную обработку событий календаря. Разработчики могут добавлять собственные события или изменять существующие, настраивать стиль отображения, менять формат даты и язык.
Источник: http://www.dhtmlx.com
By masster
Популярные JavaScript фреймворки по всей видимости могут удовлетворить любым запросам разработчика. Возможность расширять функциональные возможности с помощью плагинов делает их еще более мощными. Однако возможны случаи, когда вы по тем или иным причинам не хотите использовать фреймворки или отсутствуют нужные вам специализированные функции. Существует большое количество библиотек JavaSacript которые могут помочь при разработке проектов.
W3Avenue подготовила подборку реально полезных JavaScript библиотек, которые смогут выручить вас, когда ваши любимые фреймворки, такие как Prototype, jQuery, MooTools и др. не могут решить узкоспециальных задач, стоящих перед вами, или которые вы по некоторым причинам предпочитаете не использовать.
Animation
- JSTweener
Библиотека для создания анимации движения, основанная на классе Tweener, используемом в ActionScript (Flash) для программирования анимации движения
- $fx() - JavaScript Animation Library
$fx()очень малеькая (менее 4 KBs) и в тоже время удивительно гибкая библиотека для анимации HTML элементов. Она позволяет вам изменять любое CSS свойство на временном отрезке, передавая просто конфигурационный хэш. Более того, вы можете комбинировать, группировать эффекты в виде цепочек и запускать их параллельно (асинхронно). Вы также имеете возможность устанавливать различные функции обратного вызова, что дает еще большую гибкость при использовании этой библиотеки.
- Facebook Animation Эта библиотека позволяет разработчикам с помощью одной-двух строчек кода существенно улучшить интерфейс. Вся анимация базируется на CSS, поэтому практическое знание CSS реально выручит вас при работе с этой библиотекой. Версия FBJS Animation с открытым кодом будет работать и на страницах, не входящих в социальную сеть Facebook.
- Другие библиотеки: FX, Bytefx, Animator.js
Audio / Video
- SoundManager
JavaScript библиотека SoundManager охватывает и расширяет Flash Sound API и реализует их на JavaScript. Flash скрыт и прозрачен как для разработчиков, так и для пользователей .
- Flowplayer JavaScript API Flowplayer JavaScript API дает вам возможность управлять и контролировать экземплярами Flowplayer на вашей веб странице. Flowplayer состоит из двух частей : из объекта Flowplayer SWF object, который является оберктой объекта Flash, и библиотеки JavaScript, которая транслирует простые в использовании команды APIв более сложный механизм взаимодействия Flowplayer SWF object, который в свою очерель управляет объектом Flash.
Продолжение следует
Перевод статьи “List of Really Useful JavaScript Libraries” (автор Khan)
By masster
Это еще конечно не реквием флэшу, но выход в третье измерение, согласитесь, впечатляет:
Демо
Тот же пример, но с текстурами:
Демо
