jquery-range-picker

Инструмент для выбора диапазонных значений в виде независимого компонента jQuery

1. Демо

1. Адрес:

http://sandbox.runjs.cn/show/aphyogeq

2. Пример экрана:

## 2. Как использовать ### 1. Включение библиотек <script type="text/javascript" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.event.drag-2.2.js"></script> <script type="text/javascript" src="jquery.event.drag.live-2.2.js"></script> <script type="text/javascript" src="jquery.range-pikcer.js"></script> ### 2. Добавление DOM-узлов ### 3. Активация плагина jquery-range-picker и конфигурация параметров <script type="text/javascript"> $(function(){ picker = $(".daisy-range-picker").range_picker({ // Отображение разделителя show_seperator: false, // Анимация animate: false, // Начальное значение начала диапазона from: 2, // Начальное значение окончания диапазона to: 5, // Ширина области выбора picker_width: 14, // Диапазонные значения ranges: [1, 2, 3, 4, 5, 6, 7], onChange: function(from_to) { $(".msg").html(from_to[0] + '~' + from_to[1]); }, onSelect: function(index, from_to) { $(".msg").html(from_to[0] + '~' + from_to[1]); }, afterInit: function() { var picker = this; var ranges = picker.options.ranges; $(".msg").html(ranges[0] + '~' + ranges[ranges.length - 1]); } }); }); </script> ## 3. Описание параметров `from`: начальное значение диапазона (по умолчанию: 0) `to`: конечное значение диапазона (по умолчанию: ∞) `ranges`: диапазонные значения (по умолчанию: [0,1000,2000,5000,10000,'∞']) `axis_width`: ширина оси (по умолчанию: 200) `picker_width`: ширина области выбора (по умолчанию: 8) `show_separator`: отображение разделителя (по умолчанию: true) `animate`: использование анимации (по умолчанию: false) `on_select`: вызывается при завершении события drag и выборе диапазона (например: this — текущий экземпляр компонента, index — номер выбранной области, from_to — массив значений диапазона)```markdown on_select: function(index, from_to) { var self = this; var from = from_to[0]; var to = from_to[1]; } `before_init`: вызывается перед инициализацией компонента (this — текущий экземпляр компонента) `after_init`: вызывается после инициализации компонента (this — текущий экземпляр компонента)`picker.options`: picker — это экземпляр компонента, `picker.options` — все конфигурационные параметры ```