Опубликован: 28.02.2016 | Доступ: свободный | Студентов: 1887 / 174 | Длительность: 11:48:00
Специальности: Программист, Архитектор программного обеспечения, Разработчик интернет-проектов
Лекция 11:
Дополнение
Дополнение
Еще чуть-чуть о полезном инструментарии: есть такой классный плагин – jQuery-inlog [http://prinzhorn.github.com/jquery-inlog/] – основное его назначение — дать нам чуть-чуть больше понимания о происходящем внутри самого jQuery, вот кусочек HTML:
<body> <div class="bar"> <div class="bar"> <div id="foo"></div> </div> </div> <div id="bacon"></div> </body>
А вот и код, который его обслуживает:
$l(true);
$("#foo").parents(".bar").next().prev().parent().fadeOut();
$l(false);Какие-то странные манипуляции, для какого же элемента будет применён метод "fadeout()"? Для выяснения оного наш код обёрнут в вызов метода "$l()". "$l()" — это и есть собственно вызов плагина, результат его работы можно найти в консоли:
У данного плагина есть ещё настройки, которые регулируют объём информации выводимой в консоль.
Пример и скриншот взять с официальной документации по плагину
jQuery UI
jQuery UI представляет из себя набор виджетов и плагинов от самих разработчиков jQuery. По моему мнению, данный инструмент необходимо изучить настолько, насколько это требуется чтобы не писать свои "велосипеды". Скачать-почитать о данной надстройке над jQuery можно на домашней страницы проекта – http://jqueryui.com/
Что нам необходимо знать о виджетах и плагинах? Первое – это какие они есть, и второе – как работают. На этих двух моментах я и постараюсь остановиться.
Интерактивность
Начну с полезных плагинов, которые могут упростить жизнь при создании интерактивных интерфейсов:
- Draggable [http://jqueryui.com/position/] – данный компонент позволяет сделать любой DOM элемент перетаскиваемым при помощи мыши
- Droppable [http://jqueryui.com/droppable/] – это логичное продолжение draggable компонента, необходим для работы с контейнерами, внутрь которых можно перетаскивать элементы
- Resizable [http://jqueryui.com/resizable/] – как следует из название – даёт возможность растягивать любые DOM элементы
- Selectable [http://jqueryui.com/selectable/] – позволяет организовать "выбор" элементов, удобно использовать для организации менеджмента картинок
- Sortable [http://jqueryui.com/sortable/] – сортировка DOM элементов
Виджеты
Виджеты – это уже комплексное решение содержащие не только JavaScript код, но и некую HTML и CSS реализацию:
- Accordion – данный виджет следует использовать если у вас уже
используется jQuery UI в проекте, сам по себе основной его функционал
можно реализовать в несколько строк:
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Accordion</title> <link rel="profile" href="http://gmpg.org/xfn/11"/> <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/> <link rel="stylesheet" href="css/styles.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/code.js"></script> <script type="text/javascript"> $(function(){ var toDisplay = 1; $("article h2").click(function(){ var $this = $(this); $this .next("p") .slideToggle("slow") .siblings("p:visible") .slideUp("slow"); $this.toggleClass("active"); $this.siblings("h2").removeClass("active"); }) .eq(toDisplay).addClass("active") .next().show(); }); </script> <style type="text/css"> article h2 { background: #e9e7e7 url(images/arrows.png) no-repeat 618px 7px; padding: 7px 15px; margin: 0; border: solid 1px #c4c4c4; border-bottom: none; cursor: pointer; } article h2:hover { background-color: #e3e2e2; } article h2.active { background-position: 618px -23px; } article p { display: none; margin: 0; padding: 10px 15px 20px; } </style> </head> <body> <div id="content" class="wrapper box"> <menu> <a href="index.html" title="go prev" class="button alignleft" rel="prev">← Back </a> <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a> <a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a> <a href="tabs.html" title="go next" class="button alignright" rel="next">Next →</a> </menu> <header> <h1>Реализация аккордиона</h1> <h2>На jQuery без использования jQuery UI</h2> </header> <article> <h2>Article Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum, lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis, tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p> <h2>Article Title</h2> <p>Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel. Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue. Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis libero. Fusce et ultrices lectus.</p> <h2>Article Title</h2> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dapibus, dui in consequat pulvinar, nunc erat consequat ipsum, ut blandit nulla eros ac purus. In at justo sed lorem consequat fermentum. Nunc scelerisque purus sed neque rutrum adipiscing. Sed vehicula tristique dolor, quis porttitor magna dictum eu. Cras tristique erat non orci aliquam tempor. In hac habitasse platea dictumst. Nam eget sodales neque. Aenean adipiscing consequat diam, eu molestie diam dictum eu.</p> </article> <footer> ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a> </footer> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1669896-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> </body> </html> - Autocomplete – как и следует из название, данный виджет отвечает за добавление функции автодополнения к полям ввода, естественно с поддержкой AJAX
- Button – создание кнопок используя JavaScript – ещё тот моветон, но возможно пригодится, если вы сильно завязались на jQuery UI:
- Datepicker – если ваш браузер не поддерживает в полной мере спецификацию HTML5 и <input type="date"/> в частности, то потребуется эмуляция данной возможности с помощью виджета datepicker:
- Dialog – виджет предназначенный для создания слегка неуклюжих диалоговых окон:
- Menu – создание меню из списка, с поддержкой вложенности
- Progressbar – название говорит само за себя, и да в HTML5 он тоже включён:
- Slider – ещё один виджет для устаревших браузеров:
- Spinner – ещё один удобный контрол для форм, опять же – в HTML5 уже есть:
- Tabs – они же табы – достаточно популярный элемент в web-разработке,
и так же как и "accordion" вполне заменяем простым кодом
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tabs</title> <link rel="profile" href="http://gmpg.org/xfn/11"/> <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/> <link rel="stylesheet" href="css/styles.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/code.js"></script> <script type="text/javascript"> $(function(){ var hash = window.location.hash; $("article li a").click(function(){ var $this = $(this); var $pan = $("article").find($this.attr('href')); if (!$this.hasClass('active')) { $("article li a").removeClass("active"); $("article p").hide(); $this.addClass("active"); $pan.show(); window.location.hash = $this.attr('href'); } return false; }); if (hash && $("article li a[href="+hash+"]").length) { $("article li a[href="+hash+"]").click(); } else { $("article li a").eq(0).click(); } }); </script> <style type="text/css"> article ul { padding: 0 15px 0; margin-bottom: -1px; overflow: hidden; } article li { float:left; list-style: none; margin: 0 4px; } article li a { display: block; padding: 4px 8px; background: #f5f5f5; font-size: 14px; border: 1px solid #ccc; border-radius: 2px 2px 0 0; } article p { clear: both; display: none; margin: 0 4px; padding: 10px 15px 20px; border: 1px solid #ccc; border-radius: 2px; } article a.active { background: #fff; border-bottom: 1px solid #fff; } </style> </head> <body> <div id="content" class="wrapper box"> <menu> <a href="accordion.html" title="go prev" class="button alignleft" rel="prev">← Prev </a> <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a> <a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a> <a href="widget.html" title="go next" class="button alignright" rel="next">Next →</a> </menu> <header> <h1>Реализация закладок</h1> <h2>На jQuery без использования jQuery UI</h2> </header> <article> <ul> <li><a href="#pan1">First Article</a></li> <li><a href="#pan2">Second Article</a></li> <li><a href="#pan3">Third Article</a></li> </ul> <p id="pan1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum, lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis, tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p> <p id="pan2">Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel. Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue. Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis libero. Fusce et ultrices lectus.</p> <p id="pan3">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dapibus, dui in consequat pulvinar, nunc erat consequat ipsum, ut blandit nulla eros ac purus. In at justo sed lorem consequat fermentum. Nunc scelerisque purus sed neque rutrum adipiscing. Sed vehicula tristique dolor, quis porttitor magna dictum eu. Cras tristique erat non orci aliquam tempor. In hac habitasse platea dictumst. Nam eget sodales neque. Aenean adipiscing consequat diam, eu molestie diam dictum eu.</p> </article> <footer> ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a> </footer> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1669896-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> </body> </html> - Tooltip – вот и последний виджет – всплывающие подсказки, простой и должен быть востребован, ну а там жизнь покажет
На этом обзор виджетов можно считать законченным, вернёмся к плагинам.
Все виджеты и плагины завязаны на ядро jQuery UI, но есть так же зависимости между самими плагинами и стоит о них помнить. Но не переживайте – при сборке jQuery UI пакета все зависимости проверяются автоматически, т.е. когда вам потребуется доселе неподключенный виджет, лучше скачать сборку заново.
