20 AJAX скриптов для сайта

Весьма гламурные библиотеки, позволяющие сделать из простых вещей довольно симпатичные эффекты. Ребята из NETTUTS+ постарались собрать, а я перевел.

1. Image Menu

Создает горизонтальное меню из картинок, выезжающих при наведении мышки.

1
Демо

2.ImageFlow

Эффект напоминает док для макоси. При перелистывании картинки увеличиваются, потом уменьшаются.
2
Демо

3.Instant.js

Добавляет рамку для изображения + немного поворачивает само изображение
3
Демо

3.Glassbox

Библиотека по типу lightbox, но добавляет эффект прозрачного стекла для рамки
4
Демо

4.Search Field CSS/JS

Эта библиотека представляет из себя красивую форму поиска + автозаполнение. Весьма полезная штука. На сайте разрабов еще есть интересная статейка, про то как улучшить форму поиска на сайте.
5
Демо

5.Protoload

Предзагрузчик с конфигурируемыми параметрами, например установка фона, текста и т.п.
6
Демо

7. jwysiwyg

Как следует из названия, это яваскрипт wysiwyg (What You See Is What You Get, что видишь то и получаешь) редактор. Примечателен размер скрипта — 7кб.
7
Скачать

8. jquery.biggerlink 2

Данный скрипт делает текст ссылок большим, позволяет манипулировать нажатием на ссылки, управлять поведением окон при нажатии, показывать определенный контент в соответствии с нажатой ссылкой.
8
Скачать
Демо

9. jQuery Tag Suggestion

Еще один скрипт автозаполнения,  отличия в том, что совпадения появляются не выпадающим списком, а кнопочками в стороне от формы.

9

Скачать

Демо

10. Facebox

Интересный скрипт подсказок. При нажатии на ссылку во всплывающих окошках показывается текст. По словам разработчиков, может показывать  картинки, дивы или целые страницы в стиле Facebook.

10

Скачать

Демо

11. Humanized Messages

Человекизированные сообщения это скрипт для вывода исчезающей информации на экран. Ведет историю сообщений .

11

Скачать

Демо

12. LightWindow v2.0

Скрипт в стиле лайтбокса, но заточен под мультимедиа. Можно просматривать видео, сохраненное локально, картинки, pdf, видео с ютуба, страницы и даже просто контент с другого сайта. Функционал ,вобщем, потрясный.

12

Скачать

Демо

13. Unobtrusive Table Actions

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

13

Скачать

Демо

14. jQuery checkbox

Нестандартные чекбоксы, можно сделать а-ля чекбоксы в сафари в макоси. Или просто как ползунки на старых плеерах )

14

Скачать

Демо

15. iCarousel

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

15

Скачать

Демо

16. MochaUI

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

16

Скачать

Демо

17. jTip

Всплывающие подсказки на яваскрипте. Активируются при наведении.

17

Скачать

Демо

18.Uni-Form

Создает формы, модифицирует их, подгоняет под стандарты XHTML.  Также проводит валидацию форм.

18

Скачать

Демо

19. Validation Hints

Подсказки по заполнению похож на jTip. Указывает на рекомендуемые значения при заполнении формы.

19

Скачать

Демо

20. Control Tabs

Управляемые вкладки (табы, ухи) позволяют создавать/редактировать/управлять закладками на странице. Могут быть как в виде картинок, в виде выпадающего списка и т.п. Часть LivePipeUI, еще один интерфейс пользователя на явескрипте.

20

Скачать

Демо

Еще несколько ссылочек.

Web, Скрипты

,

Май 5th, 2009

35 responses

35 responses


Do you want to comment?

Comments RSS and TrackBack Identifier URI ?

Los Pirata

Отлично ))) А не подскажешь, как при помощи JavaScript задать проверку заполнение формы?

Май 5, 2009 3:23 пп

Alex Volkov

А вот подскажу. Только ты бы уточнил, на что проверять то?
вот на длинну поля
if (form.name.value.length < 4) {
alert( «Неверно заполнено поле \u00ABВаше имя\u00BB!» );
}

Май 5, 2009 3:32 пп

Александр

Хороший наборчег. Взял пока редактор… посмотрю на сколько валидный код выдает. Мне для проекта надо…

Май 5, 2009 3:52 пп

Los Pirata

Alex, проверка на пустые формы и проверка, например, на знак «@» в поле. Спасибо.

Май 5, 2009 6:44 пп

Alex Volkov

Элементарно, Ватсон )
Пустая форма
function SomeFunct(){
if (form.FieldName.value.length = «») {
alert( «Пустое поле!» );
}
}
На кнопку или на онсабмит формы ее вешаешь.
Вариант 2
if (form.FieldName.value.length < 1(или нужная тебе длинна) ) {
alert( «Пустое поле!» );
Чтоб не забивали имена больше N символов ставь ограничение LENGTH=N в поля

Проверка на собаку
<script language = «Javascript»>
function echeck(str) {

var at=»@»
var dot=».»
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert(«Invalid E-mail ID»)
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert(«Invalid E-mail ID»)
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert(«Invalid E-mail ID»)
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert(«Invalid E-mail ID»)
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert(«Invalid E-mail ID»)
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert(«Invalid E-mail ID»)
return false
}

if (str.indexOf(» «)!=-1){
alert(«Invalid E-mail ID»)
return false
}

return true                   
}

function ValidateForm(){
var emailID=document.frmSample.txtEmail

if ((emailID.value==null)||(emailID.value==»")){
alert(«Please Enter your Email ID»)
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=»"
emailID.focus()
return false
}
return true
}
</script>
<form name=»frmSample» method=»post» action=»#» onSubmit=»return ValidateForm()»>
<p>Enter an Email Address :
<input type=»text» name=»txtEmail»>
</p>
<p>
<input type=»submit» name=»Submit» value=»Submit»>
</p>
</form>

Май 5, 2009 7:02 пп

Алик Кириллович

>jwysiwyg. Как следует из названия, это ява wysiwyg редактор
Не Java, а JavaScript. Это совершенно разные языки.

Пожалуйста, поправьте.

Май 5, 2009 7:20 пп

Alex Volkov

В статье вроде бы понятно, про какую яву (js) идет речь, но если принципиально, то поправлю

Май 5, 2009 7:31 пп

Алик Кириллович

>В статье вроде бы понятно, про какую яву (js) идет речь, но если принципиально, то поправлю
Спасибо.

Кстати, в названии «jWysiwyg» буква «j»произошла не от Java, и даже не от JavaScript, а от библиотеки jQuery. Дело в том, что jWysiwyg — это не автономный скрипт, а именно плагин для jQuery.

Май 5, 2009 7:53 пп

Alex Volkov

>>а от библиотеки jQuery
А jQuery не яваскрипт? ))

Май 5, 2009 7:54 пп

Профессор

Не совсем понятно, почему в подборку попала МочаУИ. ИМХО, она из ряда Qooxdoo, YUI и т.п.

Конкретно сейчас меня заинтересовал Facebox. Было бы здорово добавить в описание предложение о том, что размеры «фейс-окошка» само подстраивается под размер содержимого.

Спасибо за подборку!

Май 6, 2009 6:47 дп

Alex Volkov

Профессор, ну как бы захвачено отовсюду понемножку. Мало ли у кого какие потребности )

Май 6, 2009 12:02 пп

Vlad

Спасибо! Качать пока не буду, но в закладках пригодится! =)

Май 6, 2009 2:11 пп

proff

В закладки однозначно, в хозяйстве всё пригодитьсяю. Александр спасибо за подборку!

Май 7, 2009 2:32 пп

Борис

Так и не понял в итоге, как в Uni-Form задавать проверку полей. Судя по описанию здесь скрипт сам это в состоянии делать. Однако, понять как — мне не удалось. Форму мучу здесь  http://legser.ru/moscow

Думал достаточно тыкнуть в «отправить» для теста валидации, но фиг :( Пока же получается, что применяются стили, все стройненько и выделяются поля при фокусе. Мало как-то..

Одновременно необходимо написать скрипт обработки (в моем случае отправка на 2 адреса эл почты), но хотелось бы чтоб этот скрипт получал уже проверенные данные.

Май 11, 2009 7:12 пп

Vesb

А будет скрипт «20. Control Tab» работать на narod.ru ?

Май 16, 2009 6:19 пп

Alex Volkov

Vesb, это не серверные скрипты, они выполняются в браузере пользователя.

Май 16, 2009 7:47 пп

Vesb

Спасибо! я понимаю, что здесь уже для можно сказать для прогеров. я совсем новичок. Могли бы вы пояснить.  Сорри за нубские вопросы =)

это не серверные скрипты

Значит все-таки будет работать? =). что значит не серверные скрипты? не значит ли это что все скрипты будут лежать не на моем сайте, а у меня будет только запрос к ним?
Меня интересует имеено галерея. Там просто про многое написано. Вот например про Control.Tabs — это имеет какое-нибудь отношение к галереи?
А нет ли у вас более подробной инструкции по установки этой галерии.

Спасибо. Ваш блог добавлен в избранное =)

Май 22, 2009 1:18 пп

Alex Volkov

Серверные это которые выполняются на сервере. Например этот блог — серверный скрипт.

>>Вот например про Control.Tabs — это имеет какое-нибудь отношение к галереи?

А где там галерея? Там вкладки

Май 22, 2009 3:19 пп

Vesb

а картинки которые там есть? http://alexvolkov.ru/wp-content/uploads/2009/05/20.jpg
мне например очень бы подошла такая галерея с миниатюрами, если наводишь курсор, то мгновенно появляется фото в большую величину =)

Май 22, 2009 10:50 пп

Alex Volkov

Пример графических табов ))

Май 23, 2009 12:09 дп

alexpts

по jQuery прочитал книгу, очень впечатлен. Теперь подумываю javascript попробывать поучить.  Но говорят это намного сложнее, чем jQuery

Июнь 12, 2009 7:47 пп

Alex Volkov

jquery и есть яваскрипт

Июнь 15, 2009 10:50 пп

Константин

А подскажите я не могу найти книгу вы не сможите помочь в этом?

Июнь 19, 2009 10:46 дп

Alex Volkov

Константин, какую именно книгу?

Июнь 20, 2009 12:52 пп

Михаил

Подскажите где взять аякс типа как в уконтакте. Чтобы на картинки делать подписи

Октябрь 6, 2009 12:15 пп

Nick

Humanized Messages еще не встерчал. А некоторые другие усердно применяю на сайтах :)

Октябрь 31, 2009 10:20 дп

123123123

Лучше не менять ссылки. Они специально для определенного радио!
Вот первый скрипт:
[color=red](Популярная версия Windows Media Player)[/color]
[color=yellow]С выбором формата проигрывание[/color]
[color=blue]<DIV align=center><IMG alt=»" src=»http://ne7.eu/templates/x40/images/radio22.jpg» border=0></DIV>
<DIV align=center><SELECT name=href onchange=»sel(this.value);»> <OPTION value=»" selected>Выбирай формат!<OPTION value=http://inter-avtoradio.my1.ru/playlist.m3u>64kb/s
<OPTION value=http://77.37.138.10:10000/inter123.m3u>128kb/s
</OPTION></SELECT> </DIV>
<DIV id=mus align=center></DIV><script>
function sel(href){
if(href==») mus.innerHTML=»";
else mus.innerHTML=»<EMBED type=application/x-mplayer2 src=»+href+» width=180 height=45>»;
}
sel(»);
</script>[/color]
 
Вот второй скрипт:
[color=red](Стандартная версия Windows Media Player)[/color]
[color=blue]<OBJECT
ID=»MediaPlayer» classid=»CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″
CODEBASE=
«http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701»
width=150 height=50
standby=»Loading Microsoft Windows Media Player components…»
type=»application/x-oleobject»>
<PARAM NAME=»FileName» VALUE=»http://77.37.138.10:10000/inter123.m3u«>
<PARAM NAME=»TransparentAtStart» Value=»true»>
<PARAM NAME=»AutoStart» Value=»false»>
<PARAM NAME=»AnimationatStart» Value=»false»>
<PARAM NAME=»ShowStatusBar» Value=»true»>
<PARAM NAME=»ShowControls» Value=»true»>
<PARAM NAME=»autoSize» Value=»false»>
<PARAM NAME=»displaySize» Value=»0″>
<Embed type=»application/x-mplayer2″
pluginspage=
«http://www.microsoft.com/Windows/MediaPlayer/»
src=»http://77.37.138.10:10000/inter123.m3u»
Name=MediaPlayer
AutoStart
Width=200
Height=50
transparentAtStart
autostart
animationAtStart
ShowStatusBar=1
ShowCont rols=1
autoSize
displaySize></embed>
</OBJECT>[/color]

Январь 18, 2010 5:17 пп

Mike

 
Привет незнаеш случайно решения как на jquery сделать чтото подобное карусели на ImageFlow?
 

Февраль 4, 2010 1:47 дп

Alex Volkov

Ну, поковырять например вот этот вариант http://sorgalla.com/projects/jcarousel/examples/static_controls.html

Февраль 4, 2010 12:15 пп

Mike

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

Февраль 5, 2010 10:05 пп

Александр

Спасибо за подборку скриптов, очень пригодилось

Апрель 24, 2010 5:09 пп

Михаил

А не можете подсказать, как ограничить длину сообщения в textarea? И, вообще, я искал скрипт на AJAX, который будет в режиме реального времени отображать окно моего мини-чата на сайте…

Май 10, 2010 6:04 пп

Alex Volkov

Михаил, http://psacake.com/web/js.asp http://blog.offbeatmammal.com/post/2006/10/26/MaxLength-on-a-Textarea.aspx

Май 11, 2010 8:18 дп

QwerT

Всем хелло. Сразу извинюсь за может наглый вопрос (за спрос как грится в глаз не бьют))))) Alex Volkov подскажи пожалуйста (может есть наработки) как сделать небольшой опросник на аяксе. Тип теста психологического, отвечают на вопросы, а потом результат выдается.
Готов даже финансово помочь)))) чисто символически правда, но тем не менее.
Ответь на мыло пожалуйста.

Август 16, 2010 8:29 дп

Alena

Очень интересные скрипты

Март 18, 2011 8:21 пп

Comment now!
















Trackbacks

1