background preloader

Jquery

Facebook Twitter

Our Favorite jQuery Plugins and Libraries For Spring 2015. Nick Anastasov Web development is hard and there is much to learn.

Our Favorite jQuery Plugins and Libraries For Spring 2015

Developers and designers need to be on top of a lot of emerging technologies and trends. But the community is buzzing with activity and it creates awesome libraries and plugins that can help us do our work. Here are some of our favorites. Not all of them were released this year, but all of them were updated in the last few months and are a great addition to your bookmarks. 1. Animsition is a simple and easy jQuery plugin for CSS animated page transitions. Animsition 2. Waves is a plugin that recreates the on-click ink effect as seen in Google’s Material Design. Waves 3. 50 Amazing jQuery Plugins That You Should Start Using Right Now. Martin Angelov jQuery has a wonderful community of programmers that create incredible things.

50 Amazing jQuery Plugins That You Should Start Using Right Now

However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Enjoy! Dialogs The browser’s built-in dialogs are easy to use but are ugly and non-customizable. 1. jQuery считается вредным. Хех, мне всегда хотелось написать один из этих «Х считается вредным» постов.

jQuery считается вредным

Прежде чем я начну, позвольте сказать следующее: я считаю что jQuery оказал просто невероятное влияние на продвижение Web. Он дал возможность разработчикам делать такие вещи, которые ранее считались немыслимыми. Заставил производителей браузеров реализовать многие фичи нативно (без jQuery у нас наверное никогда бы не появился document.querySelectorAll). jQuery всё еще нужен тем, кто не может положиться на современные плюшки и вынужден поддерживать реликты вроде IE8 или хуже. Тем не менее, как бы я не сочувствовала этим бедным ребятам, они в меньшинстве.

Сегодня существуют уже тонны разработчиков, которым не нужно поддерживать старые браузеры с их мизерной долей на рынке. Да, скорее всего, он вам не нужен... Определенно я далеко не первая, кто обращает внимание на то, что почти всё, что умеет jQuery, сегодня умеет и нативный JavaScript. Правила эффективного использования jQuery. Здесь приведен ряд очень простых правил, следуя которым, ваше сотрудничество с jQuery не будет омрачено скрежетом напрягшегося браузера.

Правила эффективного использования jQuery

Конечно, не так часто случается, что скорость работы javascript’а оказывается критичной, однако такое все же может произойти, и произойти в самый неподходящий момент. Поэтому, лучше держать эти правила в голове и не пренебрегать ими. 1. Эффективный поиск элементов Быстрее всего происходит поиск элементов по идентификатору: $('#someId'), вторым по быстродействию, является поиск по имени тега: $('tagName'). (Для большей наглядности, укажу текст страницы, к которому будут применен JS-код из примеров) 1. 2. 3. Из всего сказанного, можно вывести два основных правила: 1) Для поиска одного элемента, используйте поиск по id: $('#someId') 2) При поиске группы элементов, старайтесь придерживаться следующей формулы: $('#someId tagName.someClass') 2. $('#myElement').bind('click', function(){...}); . . . 3. Гораздо эффективнее будет вставить сразу все элементы: 4.

Сортировка данных на JavaScript. Сортировка html таблицы средствами JavaScript. Задача сортировки строк таблицы встречается довольно часто и ее можно решить без раздражающей перезагрузки страницы.

сортировка html таблицы средствами JavaScript

Почему-то некоторые склонны относить данное решение к AJAX, но это далеко не всегда так. При небольших объемах таблицы (а это, как показывает практика, 90% случаев) достаточно штатных средств JavaScript. Это означает, что сортировка будет производиться на клиентской машине, поэтому размер таблицы прямо пропорционален загрузке ЦП пользователя. Таким образом, если таблица содержит более 50 строк, рекомендуется обратиться к другим способам сортировки, одним из которых, безусловно, является использование технологии AJAX. Пример (для сортировки нажмите на заголовок колонки): Сортировка таблицы на jquery без плагинов.

Встала задача отсортировать таблицу на яваскрипте по любому столбику.

Сортировка таблицы на jquery без плагинов

Известный всем плагин tablesorter у меня не заработал, и я решил, что быстрее и удобнее будет написать свой скрипт. Вот, что получилось через час:+ Прямая и обратная сортировка таблицы по разным столбикам Демо Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Первым делом нужно присвоить идентификаторы каждой строчке таблицы. <tr id="z_1" ><td> ... Теперь идентификатор будет привязан к строке с данными, и если её переставить в другое место, ничего не перепутается Сортировка массива В интернете можно найти решения, где таблица целиком переводится в многомерный массив, а затем этот массив сортируется, после чего формируется и выводится новая таблица на место старой.

Можно обойтись простым массивом (ключ => значение), где ключ отвечает за номер строки. Table plug-in for jQuery. jQuery UI Учебник - Виджеты. jQuery UI предоставляет набор готовых виджетов для построения пользовательского интерфейса.

jQuery UI Учебник - Виджеты

Виджет tabs как и виджет accordion используется для группировки информации на странице с целью экономии места. Синтаксис: Пример $(document).ready(function() { $("#tabs").tabs();}); С помощью метода dialog Вы можете превратить выбранный элемент в диалоговое окно. Диалоговое окно отображается поверх текста страницы и содержит заголовок и поле с содержимым. Диалоговое окно можно перетаскивать, растягивать и закрывать с помощью иконки "х" в верхнем правом углу окна.

$(document).ready(function() { $("#dialog1").dialog();}); С помощью опции width и height Вы можете устанавливать высоту и ширину диалоговых окон. Опция modal позволяет сделать диалоговое окно модальным. Модальные окна используются для привлечения дополнительного внимания со стороны пользователей.