JS_3. Формы. Графики. GitHub. Трубочкина Н.К.

Size: px

Start display at page:

Download "JS_3. Формы. Графики. GitHub. Трубочкина Н.К."

Debra Carter
5 years ago
Views:

1 JS_3. Формы. Графики. GitHub Трубочкина Н.К. 2018

3 Работа с формами

5 Пример.

24 З а д а ч а

25 Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.

26 H T M L <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <link rel="stylesheet" href="bagua.css"> <link rel="stylesheet" href="my.css"> <p>кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p> <table id="bagua-table"> <tr> <th colspan="3"><em>bagua</em> Chart: Direction, Element, Color, Meaning</th> </tr> <tr> <td class="nw"><strong>northwest</strong> <br>metal <br>silver <br>elders </td> <td class="n"><strong>north</strong> <br>water <br>blue <br>change </td> <td class="ne"><strong>northeast</strong> <br>earth <br>yellow <br>direction </td> </tr> <tr> <td class="w"><strong>west</strong> <br>metal <br>gold <br>youth </td> <td class="c"><strong>center</strong> <br>all <br>purple <br>harmony </td> <td class="e"><strong>east</strong> <br>wood <br>blue <br>future </td> </tr> <tr> <td class="sw"><strong>southwest</strong> <br>earth <br>brown <br>tranquility </td> <td class="s"><strong>south</strong> <br>fire <br>orange <br>fame </td> <td class="se"><strong>southeast</strong> <br>wood <br>green <br>romance </td> </tr> </table> <script src="script.js"></script> </body> </html>

27 C S S.edit-td.edit-area { my.css border: none; margin: 0; padding: 0; display: block; resize: none; /* remove resizing handle in Firefox */ outline: none; /* remove outline on focus in Chrome */ overflow: auto; /* remove scrollbar in IE */ }.edit-controls { position: absolute; }.edit-td { position: relative; padding: 0; } /* общие стили для таблицы */ th { text-align: center; font-weight: bold; } td { width: 150px; white-space: nowrap; text-align: center; vertical-align: middle; padding: 10px; }.nw { background-color: #999; }.n { background-color: #03f; color: #fff; }.ne { background-color: #ff6; }.w { background-color: #ff0; }.c { background-color: #60c; color: #fff; }.e { background-color: #09f; color: #fff; }.sw { background-color: #963; color: #fff; }.s { background-color: #f60; color: #fff; }.se { background-color: #0c3; color: #fff; } bagua.css

28 J S var table = document.getelementbyid('bagua-table'); var editingtd; table.onclick = function(event) { var target = event.target; while (target!= table) { if (target.classname == 'edit-cancel') { finishtdedit(editingtd.elem, false); return; } if (target.classname == 'edit-ok') { finishtdedit(editingtd.elem, true); return; } if (target.nodename == 'TD') { if (editingtd) return; // already editing maketdeditable(target); return; } target = target.parentnode; } } function maketdeditable(td) { editingtd = { elem: td, data: td.innerhtml }; td.classlist.add('edit-td'); // td, not textarea! the rest of rules will cascade var textarea = document.createelement('textarea'); textarea.style.width = td.clientwidth + 'px'; textarea.style.height = td.clientheight + 'px'; textarea.classname = 'edit-area'; textarea.value = td.innerhtml; td.innerhtml = ''; td.appendchild(textarea); textarea.focus(); td.insertadjacenthtml("beforeend", '<div class="edit-controls"><button class="edit-ok">ok</button><button class="edit-cancel">cancel</button></div>' ); } function finishtdedit(td, isok) { if (isok) { td.innerhtml = td.firstchild.value; } else { td.innerhtml = editingtd.data; } td.classlist.remove('edit-td'); // remove edit class editingtd = null; }

29 parse-form - микро библиотека на js для получения значений формы

30 way.js - js скрипт хранит введенные данные в формы в localstorage и отображает их на лету в нужном месте 8-wayjs-js-skript-hranitvvedennye-dannye-vformy-v-localstorage-iotobrazhet-ih-na-letu-vnuzhnom-meste.html

35 Создайте свой персональный аккаунт на GitHub

37 Туториал -

38 Upload files

39 Перетаскиваем файлы на GitHub

40 Ractive.js - js плагин для разработки динамичных web интерфейсов ua/1659-ractivejs-jsplagin-dlyarazrabotkidinamichnyh-webinterfeysov.html

Flotr2 - Скрипт построения графиков http://veselov.

41 Flotr2 - Скрипт построения графиков ua/858-flotr2-skriptpostroeniyagrafikov.html

Elycharts - скрипт для рисования графиков с помощью js jquery http://veselov.

43 Elycharts - скрипт для рисования графиков с помощью js jquery elycharts-skriptdlya-risovaniya-grafikovs-pomoschyu-jsjquery.html

46 Пример JS web-приложения

49 Задание Создайте несколько форм для своего приложения Создайте любой график или диаграмму

Stamp Builder. Documentation. v1.0.0

Stamp Builder. Documentation. v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you