Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2016, 16:04
Новичок на форуме
Отправить личное сообщение для iorvgoqa Посмотреть профиль Найти все сообщения от iorvgoqa
 
Регистрация: 13.10.2016
Сообщений: 4

Страница с динамическим измерением размеров
Добрый день.

Я нуб в javascript, но по работе надо сделать... поэтому прошу подсказать. (если ошибся разделом, сори)

Есть задача, графически отобразить процесс нарезки изделия (прямоугольной формы).

Хочется хтмл, чтобы на нем отобразить, условно, изделие (размеры) и "ползунками" отметить линии реза, получив при этом размеры выходных изделий. "Ползунки" сделать динамическими, чтобы можно было двигать и при этом менялись размеры.

Подскажите, пожалуйста, куда капнуть для реализации данной задачи?
Благодарю.
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2016, 10:24
Новичок на форуме
Отправить личное сообщение для iorvgoqa Посмотреть профиль Найти все сообщения от iorvgoqa
 
Регистрация: 13.10.2016
Сообщений: 4



Необходимо только установить линии, по которым будет выполнен рез и рассчитать размеры
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2016, 10:54
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

может ExtJS поможет http://examples.sencha.com/extjs/6.0...#layout-border

убрать заголовки и отображать размеры областей при изменении - это легко
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2016, 12:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

раскрой материала, динамическое изменение размеров
iorvgoqa, в ie требуется правка. исправлено
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rez {
     width: 400px;
     height: 300px;
     border: 2px groove #000000;
      position: relative;
      padding: 0;
  }
  .rez span {
    margin: 0;
    position: absolute;
    left 0;
    top: 0;
    background-color: #000000;
  }

  .rez span.v {
    left: 200px;
    width: 1px; height: 300px;
  }
  .rez:before{
     position:  absolute;
     top: 15px;
     left: 20px;
     content: attr(data-a);
  }

   .rez:after{
     position:  absolute;
     top: 15px;
      right: 20px;
     content: attr(data-b);
  }

  .rez span.g {
    width: 200px; height:1px;
    left: 200px; top : 150px;
  }
  .rez span.g:after{
     position:  absolute;
     display: block;
     top: 15px;
     right: 20px;
     content: attr(data-c);
     z-index: 100;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
  var rez = document.querySelector('.rez'),
      span = document.querySelectorAll('.rez span'),
      range = document.querySelectorAll('input.v,input.g');
      arr = [];
      [].forEach.call(range, function(item, i) {
              arr[i]= +item.value;
              var foo = function() {
              arr[i]= +item.value;
              span[0].style.left = arr[0]+"px";
              span[1].style.left = arr[0]+"px";
              span[1].style.width = (400 - arr[0])+"px";
              span[1].style.top = arr[1]+"px";
              rez.setAttribute("data-a", arr[0] ? arr[0] + " x 300" : "");
              rez.setAttribute("data-b", arr[0] != 400 && arr[1] ? (400 - arr[0]) + " x " + arr[1] : "");
              span[1].setAttribute("data-c", arr[0] != 400 && arr[1] != 300 ?(400 - arr[0]) + " x " + (300 - arr[1]) : "");
              }
              item.addEventListener('change', foo);
              item.addEventListener('input', foo);
      });

    });
  </script>
</head>

<body>

<div class="rez" data-a="200 x 300" data-b="200 x 150" ><span class="v"></span><span class="g" data-c="200 x 150"></span></div>
<input type="range" min="0" max="400" step="10" value="200" class="v">
<input type="range" min="0" max="300" step="10" value="150" class="g">
</body>
</html>

Последний раз редактировалось рони, 14.10.2016 в 13:26.
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2016, 12:32
Новичок на форуме
Отправить личное сообщение для iorvgoqa Посмотреть профиль Найти все сообщения от iorvgoqa
 
Регистрация: 13.10.2016
Сообщений: 4

Сообщение от Pavel M. Посмотреть сообщение
может ExtJS поможет http://examples.sencha.com/extjs/6.0...#layout-border

убрать заголовки и отображать размеры областей при изменении - это легко
Спасибо.

Сообщение от рони Посмотреть сообщение
iorvgoqa, в ie требуется правка.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rez {
     width: 400px;
     height: 300px;
 ...
Большое спасибо) не хочу показаться наглым, но какие правки для ие необходимы?
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2016, 13:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

iorvgoqa,
смотрите выше вариант с учётом ie

Последний раз редактировалось рони, 14.10.2016 в 13:25.
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2016, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

iorvgoqa,
up
Ответить с цитированием
  #8 (permalink)  
Старый 14.10.2016, 14:49
Новичок на форуме
Отправить личное сообщение для iorvgoqa Посмотреть профиль Найти все сообщения от iorvgoqa
 
Регистрация: 13.10.2016
Сообщений: 4

Сообщение от рони Посмотреть сообщение
iorvgoqa,
смотрите выше вариант с учётом ie
Все огонь!!! Благодарю!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Гифка лоадер должна появляться пока страница обрабатывается Jesus1 jQuery 2 16.02.2016 14:56
Грузится вся страница вместо данных из базы johnsnow91 AJAX и COMET 10 15.04.2014 10:39
Переключение url из списка предыдущая, следующая страница polepropilen Элементы интерфейса 12 05.04.2014 11:36
jQuery UI Tabs и Joomla - зависает страница при открытии!! Sevchik jQuery 2 05.12.2012 09:23
Динамическое изменение размеров фоновой картинки ячейки shaitan Элементы интерфейса 4 15.04.2010 13:30