Linux, кодинг, митолл и прочая хрень :)

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

Скачать

Демо

4.64 avg. rating (91% score) - 11 votes
Твитнуть

35 комментариев

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

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

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

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

  • Элементарно, Ватсон )
    Пустая форма
    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>

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

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

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

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

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

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

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

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

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

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

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

    • By Vlad

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

    • By proff

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

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

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

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

    • By Vesb

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

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

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

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

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

    • By Vesb

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

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

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

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

    • By Vesb

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

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

    • By alexpts

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

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

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

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

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

    • By Nick

  • Лучше не менять ссылки. Они специально для определенного радио!
    Вот первый скрипт:
    [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]

    • By 123123123

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

    • By Mike

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

    • By Mike

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

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

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

    • By QwerT

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

    • By Alena
css.php