Преобразование пиклиста в слайдер
Сегодня сделаем одну красивую штукау – слайдер 🙂 Это такой ползунок, который можно перетаскивать влево-вправо. А чтобы он не был сам по себе, привяжим его значения к значениям пиклиста на форме 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';
- Пожалуй все 🙂 можем смотреть 🙂
почему-то не работает! в Iframe просто отображается пустой picklist (((
Расскажите поподробнее что делаете 🙂
Все как по инструкции, но Iframe делаю в бизнес-партнере (account),
1 picklist содержит цифирные значения (0-10, 10-25 и т.д.) — в этом случае объект просто не открывается, грузится постоянно а потом експлорерр не отвечает приходится перезагружать его.
2 если пиклист брать с буквенными значениями, то в Iframe отображается маленький пиклист пустой, и ни какого слайдера.
немного подправил код 🙂 теперь должно работать 🙂
В общем все те же симптомы
Попробовал на другом поле на другой форме — отлично работает 🙂
Завтра если получится попробую на другой машине 🙂