Last active
July 31, 2017 17:52
-
-
Save OlehRovenskyi/83bcecc8e5e583962a71a631598b8a39 to your computer and use it in GitHub Desktop.
jQuery events
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <body> | |
| <div class="info"> | |
| Size page: <p class="info__size-page"></p> | |
| Date: <p class="info__date"></p> | |
| </div> | |
| <button class="btn">Button</button> | |
| <button class="btn__date">Get Date</button> | |
| <button class="btn__on">on</button> | |
| <button class="btn__one">one</button> | |
| <button class="btn__on-with-off">on with off</button> | |
| <div> | |
| <h2>jQuery trigger</h2> | |
| <div class="result"></div> | |
| <button class="btn__get-date">Get Date</button> | |
| </div> | |
| <div> | |
| <h2>jQuery triggerHandler</h2> | |
| <form id="MyForm" method="POST" action=""> | |
| Field1:<input type="text" id="field1" value="" /> | |
| Field2:<input type="text" id="field2" value="" /> | |
| <input type="submit" value="send" /> | |
| </form> | |
| <button class="trigger-button">Trigger</button> | |
| </div> | |
| <div> | |
| <h2>on() and off()</h2> | |
| <button id="theone">Does nothing...</button> | |
| <button id="bind">Add Click</button> | |
| <button id="unbind">Remove Click</button> | |
| <div style="display:none;">Click!</div> | |
| </div> | |
| <div> | |
| <h2>on()</h2> | |
| <button class="btm__click-me">Click On me</button> | |
| <span class="flash" style="display:none;">Click!</span> | |
| </div> | |
| <div> | |
| <h3>Template</h3> | |
| <div class="new-menu"></div> | |
| </div> | |
| <script type="text/template" id="menu-template"> | |
| <div class="menu"> | |
| <span class="title"><%-title%></span> | |
| <ul> | |
| <% items.forEach(function(item) { %> | |
| <li><%-item%></li> | |
| <% }); %> | |
| </ul> | |
| </div> | |
| </script> | |
| <script | |
| src="http://code.jquery.com/jquery-3.2.1.js" | |
| integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" | |
| crossorigin="anonymous"></script> | |
| <script src="events.js"></script> | |
| <script src="templates.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var $infoSizePage = $('.info__size-page'); | |
| $(window).resize(function (e) { | |
| $infoSizePage.text('Width: ' + window.innerWidth + ' Height: ' + window.innerHeight); | |
| }); | |
| $('.btn').click(function(e) { | |
| $(this).text('Change text'); | |
| // $(e.target).text('change text') | |
| }); | |
| $('.btn__on').on( 'click', function() { | |
| console.log( "This will be displayed." ); | |
| }); | |
| $('.btn__one').one( 'click', function() { | |
| console.log( "This will be displayed only once." ); | |
| }); | |
| $('.btn__on-with-off').on( 'click', function(event) { | |
| console.log( "This will be displayed only once." ); | |
| $( this ).off( event ); | |
| }); | |
| }); | |
| // using module | |
| (function ($) { | |
| $(document).ready(function () { | |
| var $dateInfo = $('.info__date'); | |
| var $btnGetDate = $('.btn__date'); | |
| function displayDate (e) { | |
| console.log(this); | |
| $dateInfo.text(new Date().toDateString()); | |
| } | |
| $btnGetDate.click(displayDate); | |
| }); | |
| }(window.jQuery)); | |
| // trigger() | |
| (function ($) { | |
| $(document).ready(function () { | |
| var $btnGetDate = $('.btn__get-date'); | |
| function displayDate () { | |
| var result = $('.result'); | |
| result.text(new Date().toDateString()); | |
| } | |
| $btnGetDate.click(displayDate); | |
| // $btnGetDate.click(); | |
| //or | |
| $btnGetDate.trigger('click'); | |
| }); | |
| }(window.jQuery)); | |
| // triggerHandler() | |
| (function ($) { | |
| if (!$) { | |
| return; | |
| } | |
| $(document).ready(function () { | |
| var $myForm = $('#MyForm'); | |
| $myForm.on('submit', function () { | |
| console.log('Form Submit'); | |
| }); | |
| $('.trigger-button').on('click', function () { | |
| $myForm.triggerHandler('submit'); | |
| }); | |
| }); | |
| }(window.jQuery)); | |
| // on() and off() | |
| (function ($) { | |
| $(document).ready(function () { | |
| function flash () { | |
| $('div').show().fadeOut('slow'); | |
| } | |
| $('#bind').on('click', function () { | |
| $('body') | |
| .on('click', '#theone', flash) | |
| .find('#theone') | |
| .text('Can Click!'); | |
| }); | |
| $('#unbind').on('click', function () { | |
| $('body') | |
| .off('click', '#theone', flash) | |
| .find('#theone') | |
| .text('Does nothing...'); | |
| }); | |
| }); | |
| }(window.jQuery)); | |
| // on() | |
| (function ($) { | |
| if(!$) { | |
| return; | |
| } | |
| function flash (event) { | |
| $('.flash').text(event.target.className + ' ' + event.target.nodeName).show().fadeOut('slow'); | |
| } | |
| function addButton () { | |
| if ($('.test').length) { | |
| return; | |
| } | |
| $('body').append('<button class=\'test\'>Click Meeee</button>'); | |
| } | |
| // SET HANDLER | |
| $('body').on('click', '.test', flash); | |
| // READY | |
| $(document).ready(function () { | |
| $('.btm__click-me').click(addButton); | |
| }); | |
| }(window.jQuery)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var dataMenu = { | |
| title: "Сладости", | |
| items: [ | |
| "Торт", | |
| "Печенье", | |
| "Пирожное" | |
| ] | |
| }; | |
| var $template = $('#menu-template'); | |
| var compiled = _.template($template.html()); | |
| var $menu = $('.new-menu'); | |
| $menu.html(compiled(dataMenu)); | |
| // https://lodash.com/docs/4.17.4#template | |
| // https://codepen.io/matthewbeta/pen/ZGaYXW | |
| // https://learn.javascript.ru/template-lodash |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment