Кастомизация
06
Фев
0

Диапазонный слайдер

Одноранговый слайдер мы уже как то делали, теперь сделаем диапазонный:

  • Создайте для нужного объекта два целочисленных поля, в которых мы будем хранить диапазон чисел заданных в слайдере. Задайте для них равный диапазон чисел. Вынесите эти поля на форму и скройте их;
  • Создайте в CRM следующие Веб-ресурсы:
    • JS:
    • CSS: jslider.css;
    • PNG: jslider.png;
    • HTML, с таким кодом:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      	<title>Слайдер</title>
      	<link rel="stylesheet" href="/WebResources/new_jslider.css" type="text/css" />
      	<script type="text/javascript" src="/WebResources/new_jquery_1.4.2.min.js"></script>
      	<script type="text/javascript" src="/WebResources/new_jquery.dependClass.js"></script>
      	<script type="text/javascript" src="/WebResources/new_jquery.slider_min.js"></script>
      	
      	<style type="text/css" media="screen">
              BODY { background: #f6f8fa; margin: 0px; padding: 0px 5px 0px 0px }
              .layout { padding: 10px }
              .layout-slider { margin-bottom: 60px; width: 50% }
          </style>
      </head>
      <body>
          <div class="layout">
              <div class="layout-slider" style="width: 100%">
                  <span style="display: inline-block; width: 100%; padding: 0 5px;">
                      <input id="Slider"/>
                  </span>
              </div>
          </div>
          <script type="text/javascript" charset="utf-8">
              // Получаем ссылки на поля переданные в URL
              var fields = unescape(location.search.split("=")[1]).split("|");
              var fromField = window.parent.Xrm.Page.getAttribute(fields[0]);
              var toField = window.parent.Xrm.Page.getAttribute(fields[1]);
      
              // Передаем текущие значения полей в слайдер
              var fromValue = fromField.getValue() ? fromField.getValue() : 0 ;
              var toValue = toField.getValue() ? toField.getValue() : 0 ;
              jQuery("#Slider").val(fromValue + ';' + toValue)
      
              var min = fromField.getMin(); var max = toField.getMax();
              var diapason = Math.round((max - min) / 10);
              
              // Формируем шкалу 
              var scaleArr = new Array(); var x = 0;
              for (var i = min; i <= max; i = i + diapason) {
                  if (x % 2 == 0)
                      scaleArr[x++] = i;
                  else
                      scaleArr[x++] = "|";
              }
      
              // Формируем слайдер
              jQuery("#Slider").slider({
                  scale: scaleArr,
                  from: min,
                  to: max,
                  step: 1,
                  smooth: true,
                  round: 0,
                  callback: function (value) {
                      var values = value.split(";");
                      fromField.setValue(parseInt(values[0]));
                      toField.setValue(parseInt(values[1]));
                  }
              });
          </script>
      </body>
      </html>
      

      Итак, что тут происходит:

    • Для начала мы тянем необходимые JS- библиотеки и CSS-стиль;
      • Определяем DIV-, SPAN- контейнеры и поле ввода, которые будут использоваться для построения слайдера;
      • Далее «подключаемся» к CRM, чтобы контактироваться с полями, в которых хранятся значения для слайдера;
      • Заполняем массив, в котором будем хранить значения шкалы для слайдера;
      • Ну и формируем сам слайдер.
  • Вынесите на форму CRM созданный выше HTML Веб-ресурс с такими параметрами:
    • Пользовательский параметр: имя поля, в котором хранится начальное значение + «|» + имя поля, в котором хранится конечное значение;
    • Снимите галку ограничивающую использование скриптов;
    • Число столбцов: 2;
    • Число строк: 2;
    • Прокрутка: никогда;
    • Снимите галку «Отображать границу».
  • Ну, и идем смотреть…



З.Ы. Остальные настойки этого jQuery-плагина Вы может посмотреть тут: http://hmelyoff.github.com/jslider/.

Комментарии (0)

*

code