Our Favorite jQuery Plugins and Libraries For Spring 2015. Nick Anastasov Web development is hard and there is much to learn. 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. This is an interesting library which allows you to scroll a web page by tilting your smartphone. Interdimensional 4. Unite Gallery is multipurpose JavaScript gallery based on jQuery. Unite Gallery 5. Scrollify is a jQuery plugin that assists scrolling and smoothly snaps to sections. Scrollify 6. SweetAlert is a beautiful replacement for javascript’s alert. 7.
50 Amazing jQuery Plugins That You Should Start Using Right Now. jQuery has a wonderful community of programmers that create incredible things. 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. Alertify (github) is small library for presenting beautiful dialog windows and notifications. Alertify.alert("Message"); alertify.confirm("Message", function (e) { if (e) { } else { } }); 2. jQuery Avgrund jQuery Avgrund (github) is another cool dialog solution.
Forms Forms are tedious and boring. 3. iCheck iCheck (github) is a jQuery plugin that enhances your form controls. 4. 5. jQuery File Upload 6. 7. jQuery Knob 8. $('.datepicker').pickadate(); 9. 10. 11. jQuery считается вредным. Хех, мне всегда хотелось написать один из этих «Х считается вредным» постов. Прежде чем я начну, позвольте сказать следующее: я считаю что jQuery оказал просто невероятное влияние на продвижение Web. Он дал возможность разработчикам делать такие вещи, которые ранее считались немыслимыми. Заставил производителей браузеров реализовать многие фичи нативно (без jQuery у нас наверное никогда бы не появился document.querySelectorAll). jQuery всё еще нужен тем, кто не может положиться на современные плюшки и вынужден поддерживать реликты вроде IE8 или хуже. Тем не менее, как бы я не сочувствовала этим бедным ребятам, они в меньшинстве.
Да, скорее всего, он вам не нужен... Определенно я далеко не первая, кто обращает внимание на то, что почти всё, что умеет jQuery, сегодня умеет и нативный JavaScript. . … но это всё же не та причина чтобы отказаться от его использования Чтобы избежать расширения прототипов нативных объектов, jQuery использует собственные обертки над этими объектами. Правила эффективного использования jQuery. Здесь приведен ряд очень простых правил, следуя которым, ваше сотрудничество с jQuery не будет омрачено скрежетом напрягшегося браузера. Конечно, не так часто случается, что скорость работы javascript’а оказывается критичной, однако такое все же может произойти, и произойти в самый неподходящий момент. Поэтому, лучше держать эти правила в голове и не пренебрегать ими. 1. Эффективный поиск элементов Быстрее всего происходит поиск элементов по идентификатору: $('#someId'), вторым по быстродействию, является поиск по имени тега: $('tagName').
Высокая скорость их выполнения связана с тем, что для их реализации используются внутренние функции javascript: getElementById() и getElementsByTagName(). В связи с этим, появляются несколько правил. (Для большей наглядности, укажу текст страницы, к которому будут применен JS-код из примеров) 1. 2. 3. И еще, не пытайтесь улучшить поиск по id с помощью следующих комбинаций:$('tagName#someId') $('#wrapId #someId') Это только замедлит выполнение поиска. 2. Сортировка данных на JavaScript. Сортировка html таблицы средствами JavaScript. Задача сортировки строк таблицы встречается довольно часто и ее можно решить без раздражающей перезагрузки страницы.
Почему-то некоторые склонны относить данное решение к AJAX, но это далеко не всегда так. При небольших объемах таблицы (а это, как показывает практика, 90% случаев) достаточно штатных средств JavaScript. Это означает, что сортировка будет производиться на клиентской машине, поэтому размер таблицы прямо пропорционален загрузке ЦП пользователя. Таким образом, если таблица содержит более 50 строк, рекомендуется обратиться к другим способам сортировки, одним из которых, безусловно, является использование технологии AJAX.
Пример (для сортировки нажмите на заголовок колонки): Свойства интерфейса Node 01<table class="spc" border="0" cellspacing="2" cellpadding="2" width="98%"> 02 <tr> 03 <td class="thd" onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Свойство</td> 05 <td class="thd" title="Нажмите на заголовок, чтобы отсортировать колонку">Модель</td> Сортировка таблицы на jquery без плагинов. Встала задача отсортировать таблицу на яваскрипте по любому столбику. Известный всем плагин tablesorter у меня не заработал, и я решил, что быстрее и удобнее будет написать свой скрипт.
Вот, что получилось через час:+ Прямая и обратная сортировка таблицы по разным столбикам Демо Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Ещё одно отличие: подготовительные операции для сортировки происходят по клику; это имеет смысл, потому что сортировка нужна не всем. Первым делом нужно присвоить идентификаторы каждой строчке таблицы. <tr id="z_1" ><td> ... Теперь идентификатор будет привязан к строке с данными, и если её переставить в другое место, ничего не перепутается Сортировка массива В интернете можно найти решения, где таблица целиком переводится в многомерный массив, а затем этот массив сортируется, после чего формируется и выводится новая таблица на место старой. На примере моей таблицы: Сортируем массив по второму значению Перестановка строк таблицы. DataTables | Table plug-in for jQuery.
jQuery UI Учебник - Виджеты. jQuery UI предоставляет набор готовых виджетов для построения пользовательского интерфейса. Виджет tabs как и виджет accordion используется для группировки информации на странице с целью экономии места. Синтаксис: Пример $(document).ready(function() { $("#tabs").tabs();}); С помощью метода dialog Вы можете превратить выбранный элемент в диалоговое окно. Диалоговое окно отображается поверх текста страницы и содержит заголовок и поле с содержимым. Диалоговое окно можно перетаскивать, растягивать и закрывать с помощью иконки "х" в верхнем правом углу окна.
$(document).ready(function() { $("#dialog1").dialog();}); С помощью опции width и height Вы можете устанавливать высоту и ширину диалоговых окон. Опция modal позволяет сделать диалоговое окно модальным. Модальные окна используются для привлечения дополнительного внимания со стороны пользователей. Опция autoOpen устанавливает должно ли окно быть открыто автоматически после создания (значение true) или нет (значение false). /* 1. // 1.