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