Опубликован: 28.02.2016 | Доступ: свободный | Студентов: 1887 / 174 | Длительность: 11:48:00
Лекция 11:

Дополнение

< Лекция 10 || Лекция 11: 123456

Дополнение

Еще чуть-чуть о полезном инструментарии: есть такой классный плагин – 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 пакета все зависимости проверяются автоматически, т.е. когда вам потребуется доселе неподключенный виджет, лучше скачать сборку заново.

< Лекция 10 || Лекция 11: 123456
Наталья Маркова
Наталья Маркова
Ярослав Гаевой
Ярослав Гаевой

10 марта 2016 c 20:13 до 22:39 я сдавал экзамен. Однако, за два месяца статус не изменился: "Задание не проверено"

Когда ожидать проверки?