Multipicker

Multipicker

Multipicker - это jQuery плагин созданный для выбора дней, цифр, месяцев и других элементов поддерживающий выборку нескольких элементов (наподобии checkbox-ов) или одного единственного элемента (наподобии radio buttons).

Использование

Существует несколько способов для подключения плагина:

• с помощью npm: npm install multipicker

• с помощью bower: bower install multipicker

• скачав и распаковав zip архив с github репозитория.

Загрузите последнюю версию jQuery и файлов плагина из папки distв html документ.

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="multiPicker/dist/multipicker.min.js"></script>
<link rel="stylesheet" href="multiPicker/dist/multipicker.min.js"></script>

Базовый пример использования плагина.

<ul id="days">
    <li>Su</li>
    <li>Mo</li>
    <li>Tu</li>
    <li>We</li>
    <li>Th</li>
    <li>Fr</li>
    <li>Sa</li>
</ul>

$("#days").multiPicker({ selector : "li" });

• Su
• Mo
• Tu
• We
• Th
• Fr
• Sa

Параметры

• selector (обязательный) - вид элемента используемый внутри пикера (html тэги такие как li / span / i, checkbox / radio - для checkbox / radio input-ов)
• inputName - название input-а где выбранные значения должны будут хранится. Плагин создаст новый input если его не существует (только для не checkbox / radio элементов).
• valueSource - источник откуда плагин будет брать значения для элементов, возможные значения: index, text, data-* аттрибут, значение по умолчанию index (только для не checkbox / radio элементов)
• prePopulate - строка или массив элементов которые следуют быть выбранными по умолчанию (часто используется для редактирования), может принимать значения index, data-* or text элементов, должно совпадать с valueSource
• isSingle - позволяет пользователю выбрать только один элемент (наподобии input[type="radio"] в чистой html форме) значение по умолчанию false (только для не checkbox / radio элементов)
• cssOptions - объект со свойствами описанными ниже:

Использование с checkbox-ами и radio кнопками.

В случае когда используются тэги наподобии li или span значения будут храниться в input[type="hidden"], значением которого будет строка с разделенными через запятую элементами, наподобии "Su, Mo, Fr, Sa". Вам нужно будет разделить это значение через запятую на сервере (в некоторых случаях и на клиенте), чтобы хранить их в базе данных или чтобы сделать возможным использование этих значений в плагине, в свойстве prePopulate (например когда пользователь хочет изменить свой выбор).

В случаях когда вы используете checkbox-ы или radio кнопки, выбранные элементы будут отмеченны аттрибутом checked как в стандартном html. Picker изменит вашу разметку и вы получите html код похожий на:

для checkbox-ов

<div id="programming-languages">
    <input type="checkbox" name="lang" value="C" checked="true">
    <input type="checkbox" name="lang" value="JS">
    <input type="checkbox" name="lang" value="Swift" checked="true">
    <input type="checkbox" name="lang" value="Java">
    <input type="checkbox" name="lag" value="C#">
    <input type="checkbox" name="lang" value="C++" checked="true" >
    <input type="checkbox" name="lang" value="PHP">
</div>

или единственный выбранный элемент для radio кнопок

<div id="programming-languages">
    <input type="radio" name="lang" value="C">
    <input type="radio" name="lang" value="JS">
    <input type="radio" name="lang" value="Swift" checked="true">
    <input type="radio" name="lang" value="Java">
    <input type="radio" name="lag" value="C#">
    <input type="radio" name="lang" value="C++">
    <input type="radio" name="lang" value="PHP">
</div>

И так вы можете получить выбранные элементы с помощью стандартного подхода, в точности так как бы вы сделали если бы не использовали multipicker.

Примеры использования:

Измените isSingle на true чтобы сделать возможным выбор одного единственного элемента, наподобии radio кнопок в html.

$("#days").multiPicker({
    selector: "li",
    isSingle: true
});

• Su
• Mo
• Tu
• We
• Th
• Fr
• Sa

Добавьте prePopulate массив чтобы сделать некоторые элементы выбранными по умолчанию

$("#days").multiPicker({
    selector : "li",
    prePopulate : ["Tu", "Fr"],
    valueSource : "data-value"
});

• Su
• Mo
• Tu
• We
• Th
• Fr
• Sa

Чтобы сделать пикер вертикальным нужно лишь добавитьcssOptions vertical : true параметр

<div id="days-vertical">
    <span>Su</span>
    <span>Mo</span>
    <span>Tu</span>
    <span>We</span>
    <span>Th</span>
    <span>Fr</span>
    <span>Sa</span>
</div>

$("#days-vertical").multiPicker({
    selector   : "span",
    cssOptions : {
        vertical: true
    }
});

С использованием radio кнопок

<div id="languages">
    <input type="radio" name="language" value="EN">
    <input type="radio" name="language" value="HY">
    <input type="radio" name="language" value="RU">
    <input type="radio" name="language" value="EN">
    <input type="radio" name="language" value="JP">
    <input type="radio" name="language" value="DE">
    <input type="radio" name="language" value="FR">
</div>

$("#languages").multiPicker({ selector : "radio" });

С использованием checkbox-ов

С использованием параметров vertical, quadratic и prepopulated:

<div id="programming-languages">
    <input type="checkbox" name="lang" value="C">
    <input type="checkbox" name="lang" value="JS">
    <input type="checkbox" name="lang" value="Swift">
    <input type="checkbox" name="lang" value="Java">
    <input type="checkbox" name="lag" value="C#">
    <input type="checkbox" name="lang" value="C++">
    <input type="checkbox" name="lang" value="PHP">
</div>

$("#programming-languages").multiPicker({
    selector    : "checkbox",
    prePopulate : ["C", "C++"],
    cssOptions  : {
        quadratic : true,
        vertical  : true
    }
});

Изменение дизайна

Плагин позволяет использовать тэг label для предоставления текста элемента и сохранения его value скрытым. Для изменения дизайна multipicker-а вы можете использовать параметр cssOptions (подробно описанный в разделе параметры).

Например код пикера ниже

будет

<div id="clubs">
    <label for="zero">JAN</label>
    <input id="zero" type="checkbox" name="club" value="0">
    <label for="one">FEB</label>
    <input id="one" type="checkbox" name="club" value="1">
    <label for="two">MAR</label>
    <input id="two" type="checkbox" name="club" value="2">
    <label for="three">APR</label>
    <input id="three"type="checkbox" name="club" value="3">
    <label for="four">MAY</label>
    <input id="four" type="checkbox" name="club" value="4">
    <label for="five">JUN</label>
    <input id="five" type="checkbox" name="club" value="5">
    <label for="six">JUL</label>
    <input id="six" type="checkbox" name="club" value="6">
    <label for="seven">AUG</label>
    <input id="seven" type="checkbox" name="club" value="7">
    <label for="eight">SEB</label>
    <input id="eight" type="checkbox" name="club" value="8">
    <label for="nine">OCT</label>
    <input id="nine" type="checkbox" name="club" value="9">
    <label for="ten">NOV</label>
    <input id="ten" type="checkbox" name="club" value="10">
    <label for="eleven">DEC</label>
    <input id="eleven" type="checkbox" name="club" value="11">
</div>

$("#clubs").multiPicker({
    selector    : "checkbox",
    prePopulate : "1",
    isSingle    : true,
    cssOptions  : {
        size      : "large",
        element   : {
            "font-size"   : "11px",
            "color"       : "#3a3a3a",
            "font-weight" : "bold"
        },
        selected: {
            "border-color" : "#ff4c4c",
            "font-size"    : "14px"
        },
        picker: {
            "border-color" : "#ff4c4c",
        }
    }
});