JQuery плагины и библиотеки для веб-разработки

Плагин - это многократно используемый инструмент кода, написанный в стандартном файле JavaScript. Эти файлы предоставляют полезные методы jQuery, которые можно использовать вместе с методами фреймворка jQuery.

Давайте посмотрим некоторые доступные плагины и примеры того, как их использовать

Плагин PagePilling или Сложенная Страница
PagePiling.js - это плагин jQuery для перемещения между разделами веб-сайта с помощью мыши, как если бы они были слайдами по меню, с помощью клавиш со стрелками или с помощью колесика мыши, все разделы находятся на одном веб-сайте., Смещение вертикальное, поэтому страница сложена.

 $ (document) .ready (function () {$ ('# page'). pagepiling ({menu: '#menu', якоря: ['start', 'section', 'section' ', sectionColor: [' # # 9aceed ', ' # 2ebe21 ', ' # 2C3E50 '], навигация: {' position ':' right ', ' tooltips ': [' Start ', ' Section A ', ' Section B ']}});}) ; .section {text-align: center; } #section .layer {position: absolute; z-индекс: 5; ширина: 100%; слева: 0; верх: 35%; высота: 100%; } #section h1 {color: #fff; размер шрифта: 60 ​​пикселей; тень текста: 2px 2px # 000000; } #section p {color: # 333; размер шрифта: 40 пикселей; ; } #menu {background: # b1e958; положение: фиксированное; верх: 0; слева: 0; высота: 55 пикселей; z-индекс: 70; ширина: 100%; отступы: 0; поле: 0; } #menu li {display: inline-block; поле: 10px; цвет: # 000; фон: #fff; фон: RGBA (255 255 255, 0, 5); -webkit-border-radius: 10 пикселей; радиус границы: 10 пикселей; } #menu li.active {background: # 666; фон: ргба (0, 0, 0, 0, 5); цвет: #fff; } #menu li a {text-украшение: нет; цвет: # 000; } #menu li.active a: hover {color: # 000; } #menu li: hover {background: rgba (255, 255, 255, 0, 8); } # menu li a, #menu li.active a {padding: 9px 18px; дисплей: блок; } #menu li.active a {color: #fff; } 
 инициирование
 повестка дня
 JQuery
презентация 
Цель этого урока - представить плагины. 
из библиотеки JQUERY JavaScript
повестка дня 
1 - Введение в jQuery
2 - Основы программирования с помощью jQuery
3 - Расширенные эффекты с JQuery
Jquery Framework 
Библиотека JavaScript, чтобы писать меньше и делать больше

пример

Конфигурирование выполняется путем вызова функции подкачки страниц, где мы указываем идентификатор меню, затем мы указываем имя каждого раздела, мы указываем цвет фона для каждого раздела, а затем в правой части навигации мы указываем имя, которое будет отображаться.

 $ ('# page'). pagepiling ({menu: '#menu', якоря: ['start', 'section', 'section' ', sectionColor: [' # 9aceed ', ' # 2ebe21 ', ' # 2C3E50 '], навигация: {' position ':' right ', ' tooltips ': [' Start ', ' Section A ', ' Section B ']} 

Класс section - это тот, который используется плагином JQuery для распознавания каждого раздела, а вводный класс - это то, что мы указываем для запуска содержимого раздела.

Сортируемый плагин для сортировки списков
Этот плагин очень полезен для изменения порядка списков путем перетаскивания мышью и обмена элементами. WordPress CMS использовать этот плагин для изменения порядка категорий, сообщений и страниц.

Давайте приведем пример. Предположим, у нас есть список команды игроков и замещающей команды, у нас также есть список резервных игроков. Мы сделаем эти три списка и с помощью сортируемого плагина мы сможем обмениваться игроками списка, просто перетаскивая их имя мышью в список, который мы хотим поместить, или изменив их положение в том же списке.

 jQuery Sortable - Список игроков #equipotitular, #equiposuplente, #reserva {border: 1px solid #eee; ширина: 142 пикселей; минимальная высота: 20 пикселей; list-style-type: нет; поле: 0; отступы: 5px 0 0 0; плавать: слева; верх: 0px; } #equipotitular li, #equiposuplente li, #reserva li {margin: 0 5px 5px 5px; обивка: 5px; размер шрифта: 14 пикселей; курсор: указатель; } #equipotitular li {border: solid 1px # 00aadc; list-style-type: нет; } #equiposuplente li {border: solid 1px # af4901; list-style-type: нет; } #reserve li {border: solid 1px # 96aa33; list-style-type: нет; } td {vertical-align: top; граница: 1px сплошной черный; } table {border: 1px solid black; } $ (function () {$ ("#equipotitular, #equiposuplente, #reserva") .sortable ({connectWith: ".lists"}). disableSelection ();});
jQuery Sortable - игрок равноправный 
Ксавье
знак
Даниил
Хенаро
Марио
Фернан
гиацинт
Manuel
леший
пример
Как создать свой собственный плагин jQuery? 
Плагин jQuery - это скрипт или новый метод, который мы используем для создания новой функциональности, расширяя или облегчая возможности, которые предлагает нам jQuery. Чтобы создать плагин, мы должны объявить функцию и запрограммировать ее в общем виде, чтобы ее можно было повторно использовать на любой странице или веб-сайте.
Мы должны проанализировать и иметь в виду, что при включении нашего плагина в jQuery у нас нет конфликта с какой-либо другой библиотекой или функцией или даже с файлами CSS, которые могут изменить производительность нашего плагина. jQuery позволяет нам определять плагины по-разному. Элементы веб-сайта не могут быть обработаны безопасно, пока документ полностью не загружен в браузер. jQuery обнаруживает этот статус, чтобы определить, когда HTML-элементы могут быть доступны.
Событие .ready () будет выполнено только после загрузки Интернета и до его отображения в браузере, .ready () предназначен для выполнения некоторой функции сразу после загрузки всего HTML-документа, гарантирующего, что наш код выполняться на элементах, которые отображаются.
$config[ads_text5] not found
Формат этой функции: 
 // Эти функции будут доступны после завершения загрузки web $ (document) .ready (function () {function mifuncion () {// код функции}}); 
 Если вместо функции я применяю селектор CSS. Эта строка будет выполнена автоматически после завершения загрузки страницы, например, после загрузки страницы, все ссылки будут выделены зеленым цветом и размером 14 пикселей. 
 $ (document) .ready (function () {$ ('a'). css ({'color': green, 'font-size': '14px'});}); 
 Далее мы создадим плагин, который удаляет все письма, опубликованные в списке комментариев на сайте.
$config[ads_text6] not found
Заголовки команды
Замена команды
Резервные игроки
Хосе
Alberto
Carlos
Пункт 4
 
Отзывы пользователей
Комментарий Lorem Ipsum 1 - пятница 01/04/2016 12:35
$config[ads_text5] not found
 Lorem Ipsum - это просто текст для печатных машин и текстовые файлы. 
 Комментарий Lorem Ipsum 2 - пятница 01/04/2016 12:35
 Lorem Ipsum - это просто текст для печатных машин и текстовые файлы. 
 function QuitaMail () {// Регулярное выражение электронной почты var ExpresionRegular = /(\w+([-+.']\w+)*@\w+([-.[\w+)*\.\w+([-.] \ w +) *) /; // Я ищу в столбце любой текст, который соответствует формату mail $ ("table td"). Filter (function () {return $ (this) .html (). Match (ExpresionRegular);}). Each (function () {// Если я нахожу его, я удаляю его и помещаю пустой $ (this) .html ($ (this) .html (). Replace (ExpresionRegular, ""));}); }; // Я вызываю функцию при загрузке страницы $ (document) .ready (function () {QuitaMail ();}); 

• 
• 0