Метка «jquery plugins» - 4

[скриншот]Стал известен скрипт lake.js — плагин jQuery, который берёт иллюстрацию (элемент <img>) и помещает её на холст (вставляет элемент <canvas>), располагая сразу под нею зеркальное отражение, идущее волнами — будто в воде озера.

Речь идёт не о застывших волнах, а об идущих по воде волнах — их фаза динамически изменяется джаваскриптом. (Понятно, что на Хабрахабре этот эффект не воспроизводим, так что я вставляю статический скриншот.)

Холст имеет ту же ширину, что и обрабатываемая иллюстрация, и вдвое бóльшую высоту.

Вызов плагина выглядит сравнительно просто и самоочевидно:

<script src="jquery.js"></script>
<script src="lake.js"></script>
<script>
$(function() {
   $('#lake-img').lake({
      'speed': 1,
      'scale': 0.5,
      'waves': 10
   });
});
</script>
...
<img id="lake-img" src="lake.png" style="display: none;"/>

Читать полностью »

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

Поскольку времени для реализации было достаточно, и долгое время таится желание написать хоть что-то, что может помочь другим разработчикам. Оформил все это дело в совсем малюсенький и простой plugin для jquery. Надеюсь, теперь этот код могут прочесть не только я и мой кот Борис, если же это и вовсе кому-то поможет в работе то я совсем не против использования его в ваших проектах, изменения копирования редактирования и т.д.
Читать полностью »

Классный jQuery плагинчик может применить blur на любой html элемент.

Работает в canvas используя алгоритм StackBlur.

Blur JS

www.blurjs.com/

Читать полностью »

в 13:16, , рубрики: jquery, jquery plugins, uploader, метки: , ,

Ура! Еще один, свеженький… чем он лучше других?

jQuery File Upload

а) Новенький! Всегда кто берется что-то делать, то обычно смотрит, есть ли смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, Прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload/
Читать полностью »

Введение

В сети существует огромное количество плагинов для реализации какого рода расширений. К сожалению (к счастью ?) все они (возможно я плохо искал ?), предлагают некое законченное решение в разметкой и стилями. Если Вам нужен только функционал, то этот плагин для Вас.

Идея

Расширить функциональность элемента до уровня combobox. Только функционал без разметки и стилей. Организовать взаимодействие стандартными способом.
Для запросов к серверу использовать get ajax запрос, передавая на вход значение элемента.
Настраивать элемент через атрибуты:

<input id="comboBox" data-options='{"url":"Home/Load","lengthText": 4,"timeWait":300 }' type="text" />
или
<input id="comboBox1" data-url="Home/Load" type="text" />

Где:
url – адрес сервиса
lengthText –минимальное количество символов после которого производится запрос (умолчание 3)
timeWait – время в мсек по истечении которого производится запрос (умолчание 300)

Оповещения разработчика о состоянии запроса организовать через систему событий.

query_start – старт запроса
query_end – окончание запроса
query_data – получение результата запроса
query_reset – сброс результатов
query_error – ошибка запроса

Обернуть все в плагин jQuery (v 1.7) — query()

$().ready(function () {
    $("#comboBox")
    .query()
    .bind("query_data", function (e, data) {
	// вывести куда то результат – например в <div id=”panel”/>
    })
    .bind("query_error", function (e, data) {
	// сообщить об ошибке
    })
    .bind("query_reset", function () {
	// очистить <div id=”panel”/>
    })
    .bind('query_start query_end', function (e) {
        //  как то показать что идет запрос – здесь меняем фон элемента
        $(this).css({ backgroundColor: e.type == "query_start" ? "#fdf5e6" : "#FFF" });
    });
});

Читать полностью »

Введение

В сети существует огромное количество плагинов для реализации какого рода расширений. К сожалению (к счастью ?) все они (возможно я плохо искал ?), предлагают некое законченное решение в разметкой и стилями. Если Вам нужен только функционал, то этот плагин для Вас.

Идея

Расширить функциональность элемента до автокомплит. Только функционал без разметки и стилей. Организовать взаимодействие стандартными способом.
Для запросов к серверу использовать get ajax запрос, передавая на вход значение элемента.
Настраивать элемент через атрибуты:

<input id="comboBox" data-options='{"url":"Home/Load","lengthText": 4,"timeWait":300 }' type="text" />
или
<input id="comboBox1" data-url="Home/Load" type="text" />

Где:
url – адрес сервиса
lengthText –минимальное количество символов после которого производится запрос (умолчание 3)
timeWait – время в мсек по истечении которого производится запрос (умолчание 300)

Оповещения разработчика о состоянии запроса организовать через систему событий.

query_start – старт запроса
query_end – окончание запроса
query_data – получение результата запроса
query_reset – сброс результатов
query_error – ошибка запроса

Обернуть все в плагин jQuery (v 1.7) — query()

$().ready(function () {
    $("#comboBox")
    .query()
    .bind("query_data", function (e, data) {
	// вывести куда то результат – например в <div id=”panel”/>
    })
    .bind("query_error", function (e, data) {
	// сообщить об ошибке
    })
    .bind("query_reset", function () {
	// очистить <div id=”panel”/>
    })
    .bind('query_start query_end', function (e) {
        //  как то показать что идет запрос – здесь меняем фон элемента
        $(this).css({ backgroundColor: e.type == "query_start" ? "#fdf5e6" : "#FFF" });
    });
});

Читать полностью »

В справочнике jquery.page2page.ru появилась документация jQuery UI. Помимо подробного описания каждого плагина, она содержит статьи о фабрике виджетов, с помощью которой можно создавать собственные подобные плагины, правилах темизации (оформления) виджетов UI, собственной системе позиционирования UI, а так же о расширенных анимационных эффектах, доступных при подключении jQuery UI к сайту. Ну и конечно же есть вводная статья с которой можно начать изучение jQuery UI.

Кроме этого, обновлена карта функций, вЧитать полностью »

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

Недавно на хабре проскакивал Selectik — довольно неплохой плагин, но не без недостатков. Работа над ним, судя по GitHub, ещё идёт, но покаЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js