Upload
denaopenevents
View
1.369
Download
0
Embed Size (px)
Citation preview
1
HTML/CSS/JS Creativegroup
12.4.9
2
SPWebUX
12.4.9
3
impress.js
impress.js
HTML
12.4.9
HTML/CSS/JS
JSHTML/CSSJS
Web
4
12.4.9
A.
5
var modal = document.getElementById(modal); modal.style.display = 'block';// modal.style.display = 'none';//
12.4.9
.
B.e.g.
6
var select = document.getElementById('select'); var conrm = document.getElementById('conrm'); var complete = document.getElementById('complete');
// select.style.display = 'none'; conrm.style.display = 'block'; // conrm.style.display = 'none'; complete.style.display = 'block';
12.4.9
..
C.
7
var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); var button3 = document.getElementById('button3');
button1.addEventListener('click', func1, false); button2.addEventListener('click', func2, false); button3.addEventListener('click', func3, false);
12.4.9
8
HTMLHTML CSSCSS
12.4.9
ABCSS
9
HTML
12.4.9
.
10
[A] HTML:
CSS: .modal {display: none;} .scene-modal .modal {display: block;}
JS: var container = document.getElementById('container'); container.className = 'scene-modal';// container.className = '';// // AndroidclassListclassName
12.4.9
..
11
[B] HTML:
12.4.9
CSS
12
[A]CSS: .modal { position: absolute; left: -320px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.2s; }
.scene-modal .modal { -webkit-transform: translate3d(320px, 0, 0); }
12.4.9
..
C data-
13
HTML
12.4.9
.........
14
var elements = document.querySelectorAll('[data-role]'); for (var i = 0, len = elements.length; i < len; i++) { var role = elements[i].getAttribute('data-role'); // AndroiddatasetgetAttribute elements[i].addEventListener('click', methods[role], false); }
var methods = { conrm: function() {}, submit: function() {}, cancel: function() {}, close: function() {}, back: function() {} };
jQueryriddle.jsdelegate delegate
12.4.9
15
var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); var modal1 = document.getElementById('modal1'); var modal2 = document.getElementById('modal2');
button1.addEventListener('click', function() { modal1.style.display = 'block'; }, false);
button2.addEventListener('click', function() { modal2.style.display = 'block'; }, false);
12.4.9
.
16
CSSdelegate
12.4.9
..
17
HTML: 1 2 1 2
CSS: .modal1, .modal2 {display: none;} .scene-modal1 .modal1, .scene-modal2 .modal2 {display: block;}
12.4.9
...
18
JS: riddle.js
// IDcontainer var container = r.id('container');
// data-target-sceneclickdocument.body r(document.body).delegate([data-target-scene]', 'click', function() { container.addClass(r(this).attr(data-target-scene')); });
12.4.9
HTMLCSSJS
HTML/CSS/JSHTML/CSSJS
JS
19
12.4.9
PCWeb
UI/UX
20
12.4.9
21
DeNA