Select-m NPM | npm.io

Select-M

This is jQuery-plugin for <select> element.

Select-M is very simple for usage:

First you should create styles for your design.
Then add js and css files into html.
Then add DOM element with data-slm attribute around <label> and <select>.

It's simple!

Usage

I. Creating styles for `<select>`

You should create your styles like select-m.default.css or take it from examples.

Notify! You can take select-m.default.scss file from /src for using SASS.

II. Adding js and css files into html

Add styles into <head>:

<head>
    ...
    <link rel="stylesheet" href="css/select-m.css">
    <link rel="stylesheet" href="css/select-m.default.css">
    ...
</head>

Add script into <body> under jquery and content:

<body>
    ...
    <script src="js/jquery.js"></script>
    <script src="js/select-m.js"></script>
</body>

III. Adding wrapper with `data-slm` attribute

Wrap <label> and <select>:

<div data-slm>
    <label for="categories">Categories:</label>
    <select id="categories">
        <option value="">All</option>
        <option value="1">Category 1</option>
        ...
        <option value="n">Category N</option>
    </select>
</div>

<div data-slm="">
    <label>
        Types:
        <select>
            <option value="">All</option>
            <option value="1">Type 1</option>
            ...
            <option value="n">Type N</option>
        </select>
    </label>
</div>

Please, see examples!