Downloaded 18 times
![Пример tabs -> чистый JS
32
var pages;
window.onload=function() {
var i = 0;
var container = document.querySelector("#tabs");
var navitem = document.querySelector("#tab-2");
pages = container.querySelectorAll(".tab");
var nav = container.querySelectorAll(“.menu-internal");
navitem.parentNode.setAttribute("class", "active");
for (i = 0; i < pages.length; i++) { pages.item(i).style.display="none"; }
for (i = 0; i < nav.length; i++) { nav[i].onclick=displayPage; }
};
function displayPage() {
for (var i = 0 ; i < pages.length; i ++) { pages[i].style.display="none"; }
var id = this.querySelector(".menu-internal").getAttribute('href');
document.querySelector(id).style.display = 'block';
}](https://image.slidesharecdn.com/web-150716132330-lva1-app6891/85/WEB-32-320.jpg)
![Пример tabs -> jQuery
33
$(document).ready(function() { // when DOM ready
$('#tabs > div').hide(); // hide all child divs
$('#tabs div:nth-child(2)').show(); // show second child dive
$('#tabsnav li:nth-child(2)').addClass('active');
$('.menu-internal').click(function(){
$('#tabsnav li').removeClass('active');
var currentTab = $(this).attr('href');
$('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active');
$('#tabs > div').hide(); $(currentTab).show();
});
});](https://image.slidesharecdn.com/web-150716132330-lva1-app6891/85/WEB-33-320.jpg)
![Пример tabs -> jQuery UI
35
$( "#tabs" ).tabs();
var pages;
window.onload=function() {
var container = document.querySelector("#tabs");
var navitem = document.querySelector("#tab-2");
navitem.parentNode.setAttribute("class", "active");
pages = container.querySelectorAll(".tab");
for (var i = 0; i < pages.length; i++) {
pages.item(i).style.display="none";
}
var nav = container.querySelectorAll(“.menu-internal");
for (var i = 0; i < nav.length; i++) {
nav[i].onclick=displayPage;
}
};
function displayPage() {
for (var i = 0 ; i < pages.length; i ++) {
pages[i].style.display="none";
}
var id = this.querySelector(".menu-internal").getAttribute('href');
document.querySelector(id).style.display = 'block';
}](https://image.slidesharecdn.com/web-150716132330-lva1-app6891/85/WEB-35-320.jpg)
Uploaded byDataArt
Александр Кашеверов - Коротко про WEB
Документ посвящен языку программирования JavaScript и его развитию с 1995 года. Рассматриваются основные технологии, связанные с фронтенд-разработкой, а также представлены примеры кода и реализации с использованием JavaScript и jQuery. В заключение приведены ссылки на ресурсы для изучения и дополнительного чтения.
More Related Content
Similar to Александр Кашеверов - Коротко про WEB
Александр Кашеверов - Коротко про WEB
- 1.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. JavaScript - это •На следующем слайде скриншот Yahoo за 1996 год • Брендан Айк из компании Netscape в 1995 году внедрил язык программирования в браузер Netscape (сегодняшний firefox) • Цель - изменение структуры без перезагрузки страницы • В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный Jscript 10
- 11.
- 12.
- 13. JavaScript - развитие •1995 – начало • 2005 – ajax, prototype.js, jQuery, Mootools, Dojo • 2010 – JavaScript MVC • evolutionoftheweb.com история развития • Сейчас WEB без JS невозможен! 13
- 14. Front-End - это 14 HTML CSS JavaScript jQuery CSS3 HTML5 ajax BackboneIEsvg Angular Twitter Bootstrap WebStorage D3.js prototype mootools sencha Responsive layout WebWorker Cookies Gulp Grunt Coffeescript JSON HTTP flash Canvas Polymer ReactJS
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. Пример html +css + js
- 23.
- 24.
- 25.
- 26.
- 27. Статистики с DOU.ua,январь 2015 27
- 28. Статистики с DOU.ua,январь 2015 28
- 29. Статистики с DOU.ua,январь 2015 29
- 30.
- 31. Пример tabs ->html разметка 31 <div id="tabs"> <ul class="tabs" id="tabsnav"> <li><a href="#tab-1" class="menu-internal">Tab One</a></li> <li><a href="#tab-2" class="menu-internal">Tab Two</a></li> <li><a href="#tab-3" class="menu-internal">Tab Three</a></li> <li><a href="#tab-4" class="menu-internal">Tab Four</a></li> </ul> <div id="tab-1“ class="tab"> <p>Tab1 Content</p> </div> <div id="tab-2“ class="tab"> <h2>Tab 2</h2> <p>Tab 2 content</p> </div> <div id="tab-3“ class="tab"> <p>Tab 3 content</p> </div> <div id="tab-4“ class="tab"> <p>Tab 4 content.</p> </div> </div>
- 32. Пример tabs ->чистый JS 32 var pages; window.onload=function() { var i = 0; var container = document.querySelector("#tabs"); var navitem = document.querySelector("#tab-2"); pages = container.querySelectorAll(".tab"); var nav = container.querySelectorAll(“.menu-internal"); navitem.parentNode.setAttribute("class", "active"); for (i = 0; i < pages.length; i++) { pages.item(i).style.display="none"; } for (i = 0; i < nav.length; i++) { nav[i].onclick=displayPage; } }; function displayPage() { for (var i = 0 ; i < pages.length; i ++) { pages[i].style.display="none"; } var id = this.querySelector(".menu-internal").getAttribute('href'); document.querySelector(id).style.display = 'block'; }
- 33. Пример tabs ->jQuery 33 $(document).ready(function() { // when DOM ready $('#tabs > div').hide(); // hide all child divs $('#tabs div:nth-child(2)').show(); // show second child dive $('#tabsnav li:nth-child(2)').addClass('active'); $('.menu-internal').click(function(){ $('#tabsnav li').removeClass('active'); var currentTab = $(this).attr('href'); $('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active'); $('#tabs > div').hide(); $(currentTab).show(); }); });
- 34. Пример tabs ->jQuery UI 34 $( "#tabs" ).tabs();
- 35. Пример tabs ->jQuery UI 35 $( "#tabs" ).tabs(); var pages; window.onload=function() { var container = document.querySelector("#tabs"); var navitem = document.querySelector("#tab-2"); navitem.parentNode.setAttribute("class", "active"); pages = container.querySelectorAll(".tab"); for (var i = 0; i < pages.length; i++) { pages.item(i).style.display="none"; } var nav = container.querySelectorAll(“.menu-internal"); for (var i = 0; i < nav.length; i++) { nav[i].onclick=displayPage; } }; function displayPage() { for (var i = 0 ; i < pages.length; i ++) { pages[i].style.display="none"; } var id = this.querySelector(".menu-internal").getAttribute('href'); document.querySelector(id).style.display = 'block'; }
- 36. “You should definitelyuse jQuery” 36
- 37.
- 38. Домашнее задание Движение планетвокруг Солнца 38 • https://htmlacademy.ru/ • https://learn.javascript.ru/ Что почитать • https://github.com/kashesandr • https://twitter.com/kashesandr Где меня найти