Кастомизация
02
Авг
6

Преобразование пиклиста в слайдер

Сегодня сделаем одну красивую штукау – слайдер 🙂 Это такой ползунок, который можно перетаскивать влево-вправо. А чтобы он не был сам по себе, привяжим его значения к значениям пиклиста на форме CRM (куда кстати и поместим наш слайдер). Для реализации проекта воспользуемся решением на jQuery: Slider from a Select Element (локальное зеркало версии 1.7).

Приступим:

  • Создайте в папке ISV сайта CRM подпапку slider и поместите в нее содержимое архива slider.zip;
  • В архиве помимо js-файлов, реализующих базовый функционал слайдера «Slider from a Select Element» и служебных CSS-файлов, находится файл index.html, который собственно нам и нужен, т.к. в нем и реализовано само решение. Если Вы откроете файл index.html в каком-нибудь текстовом редакторе, то увидите там следующий код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>jQuery UI Slider</title>
    	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    	<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
    	<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>
    	<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
    	<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />
    </head>
    
    <body>
        <form action="#" name="slider">
        <fieldset>
            <select name="Select" id="select" onchange="alert('asd')">
            </select>
        </fieldset>
    	</form>
    
        <script type="text/javascript">
            // Получаем опции пиклиста, переданного через URL
            var p = eval('window.parent.document.crmForm.' + location.search.substr(1));
            var aOptions = p.Options;
            
            var s = document.forms["slider"].select;
            
            // Просматриваем опции искходного пиклиста и добавляем аналогичные в динамический пиклист
            for (var items in aOptions) {
                var item = aOptions[items];
               
                if (item['Text'] != "") {
                    if (p.DataValue == item['DataValue']) {
                        s.options[item['DataValue']] = new Option(item['Text'], item['DataValue'], true, true);
                    } else {
                        s.options[item['DataValue']] = new Option(item['Text'], item['DataValue']);
                    }
                }
            }
            
            // Создаем из дублирующего пиклиста слайдер
            $(function() {
                $('select#select').selectToUISlider({
                    labels: aOptions.length,
                    labelSrc: 'text',
                    sliderOptions: {
                    stop: function() { p.DataValue = s.value; } 
                    }
                }).hide();
            });
    	</script>
    </body>
    </html>
    

    Тут происходит следующее:

    • Сначала подключаются внешние js-файлы и CSS-стили;
    • Затем объявляется пустой «пиклист» – это служебный писклист – он нужен только для преобразования в слайдер, после чего он будет скрыт;
    • Далее происходит считывание значений покслиста формы CRM, имя которого мы передаем в строке URL;
    • После чего считанные значения CRM’ного пиклиста динамически заносятся в «местный» пиклист;
    • Ну, и в конце-концов вызываем jQuery-функцию преобразующую пиклист в слайдер.
  • Создайте на форме Контакта iFrame и задайте для него следующие значения:
    • Имя: slider;
    • URL:
      /isv/slider/index.html?<имя_пиклиста>

      где имя_пиклиста – имя пиклиста с формы CRM, который необходимо преобразовать в слайдер;

    • Снимите галку запрещающую использование скриптов;
    • Количество строк: 3;
    • Уберите полосы прокрутки.
  • На онлоад формы повесьте скрипт скрывающий преобразуемый пиклист. Например:
    crmForm.all.address1_addresstypecode_d.style.display = 'none';
    crmForm.all.address1_addresstypecode_c.style.display = 'none';
    
  • Пожалуй все 🙂 можем смотреть 🙂




Комментарии (6)
  • Николай 02.08.2010

    почему-то не работает! в Iframe просто отображается пустой picklist (((

  • slivka_83 02.08.2010

    Расскажите поподробнее что делаете 🙂

  • Николай 02.08.2010

    Все как по инструкции, но Iframe делаю в бизнес-партнере (account),
    1 picklist содержит цифирные значения (0-10, 10-25 и т.д.) — в этом случае объект просто не открывается, грузится постоянно а потом експлорерр не отвечает приходится перезагружать его.
    2 если пиклист брать с буквенными значениями, то в Iframe отображается маленький пиклист пустой, и ни какого слайдера.

  • slivka_83 02.08.2010

    немного подправил код 🙂 теперь должно работать 🙂

  • Николай 02.08.2010

    В общем все те же симптомы

  • slivka_83 02.08.2010

    Попробовал на другом поле на другой форме — отлично работает 🙂
    Завтра если получится попробую на другой машине 🙂

*

code