Рубрика «jquery» - 45

В первой части статьи рассказывалось об использовании плагина DataTables для вывода больших таблиц данных в режиме обработки данных на стороне сервера и применении дополнения Column Filter для индивидуальной фильтрации по столбцам
В этой части речь пойдет о более продвинутом использовании дополнения Column Filter, включающем:

  1. создание фильтров в виде списков с множественным выбором (т.е. с возможностью выбора нескольких значений);
  2. построение цепочек зависимых списков фильтрации.

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

Под катом находится сравнительно небольшая подборка СSS3 и СSS3+JQuery меню. Некоторые из них уже могли встретится пользователям на просторах Интернета, некоторые-нет. Весь обзор представлен в виде скриншотов и демо-ссылок, а также ссылок на закачку сырцов, там, где это возможно.
Читать полностью »

Введение

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

Идея

Расширить функциональность элемента до уровня 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.
В ходе процесса написания бизнес-логики для веб-приложения возникла необходимость грамотно построить код для дальнейшего развития и рефакторинга проекта. Поскольку это был первый опыт работы в «веб-индустрии», решено было идти напролом. Спустя некторое время, стало понятно, что время на поиск необходимого фрагмента уходит гораздо больше, нежели на разработку. Далее хотелось бы предложить свое видение правильной организации и структуризации JQuery-кода.
Читать полностью »

Kartograph — это новый фреймворк для создания интерактивных картографических веб приложений без использования Google Maps/Bing Maps или любого другого сервиса. Он создавался с учетом потребностей дизайнеров и журналистов.

Можно поглядеть на демки, чтобы узнать на что способен Kartograph. Читать полностью »

Веб-разработчики довольно часто сталкиваются с задачей отображения на странице данных в табличной форме с возможностью их сортировки, поиска/фильтрации, разбиения на страницы и удобной навигации по ним. Например, для меня это стало актуально при создании админки для одного сайта. Каждый разработчик решает эту задачу по-своему. Многие не сильно с этим заморачиваются и в результате получаются интерфейсы в стиле ранних версий phpMyAdmin, с полным обновлением страницы после любого клика мышью. Но сейчас уже не начало 2000-х, а значит, пора уже и админки переводить на AJAX и jQuery. Мне в этом очень помог замечательный плагин DataTables, который избавил меня от необходимости изобретать велосипед и писать тонны кода. С его помощью я смог в сжатые сроки придать админке современный вид. Теперь я хочу поделиться некоторым опытом, накопленным за время использования этого плагина.Читать полностью »

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

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

Привет!
Хочу поделиться способом организации красивых подсказок для плагина валидации на jQuery. Для этих целей будем использовать еще один плагин создания красивых информационных сообщений — qtip.
JavaScript / Красивые подсказки для jQuery Validation с помощью qtip
JavaScript / Красивые подсказки для jQuery Validation с помощью qtip

Для работы нам понадобиться:
форма на которой будем настраивать валидацию

  <form action="" method="post" id="register_form" name="form_reg">  	Логин: <input title=""Читать полностью »

В позавчерашнем выпуске «Mozilla Hacks Weekly» увидал гиперссылку «Morris.js», пошёл по ней, почитал, порадовался — а теперь и вам поведаю.

Morris — это легковесный джаваскрипт (всего-то 3052 байта после миниатюризации) с открытым исходным кодом (распространяемым по упрощённой лицензии BSD), который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий, наподобие такого:

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


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