pickout

Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE

For syntax of the previous version click here

How to use

npm

npm install pickout --save

bower

bower install pickout --save

Inserting HTML

Include the style

<link rel="stylesheet" href="./path/to/pickout.min.css">
...
</head>

Include the script

<script src="./path/to/pickout.min.js"></script>
...
</body>

Or Using CDN

Taking advantage that cdn provides, you can use the pickout in cdnjs to include the files in your page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickout/2.0.1/pickout.min.css">
...
</head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pickout/2.0.1/pickout.min.js"></script>
...
</body>

Example of block the select field

<!-- Normal use -->
<div class="form-group">
    <label for="option">Option:</label>
    <div class="pk-form">
        <select name="option" id="option" class="option all" placeholder="Select a option">
            <option value=""></option> <!-- If the check is not required, submit a default value empty -->
            <option value="opt1">Option 1</option>
            <option value="opt2">Option 2</option>
            <option value="opt3">Option 3</option>
            <option value="opt4">Option 4</option>
        </select>       
    </div>
</div>


<!-- Using with icons -->
<div class="form-group">
    <label for="suit">Suit:</label>
    <div class="pk-form">
        <select name="suit" id="suit" class="suit all" placeholder="Select a suit">
            <option value=""></option> <!-- If the check is not required, submit a default value empty -->
            <option data-icon="&spades;" value="Spade">Spade</option>
            <option data-icon="&clubs;" value="Club">Club</option>
            <option data-icon="&hearts;" value="Heart">Heart</option>
            <option data-icon="&diams;" value="Diamond">Diamond</option>
        </select> 
    </div>      
</div>

Attributes

data-icon : Icon code, for example: "e602", simply use data-icon="&#xe602";

Field selection with option group

<!-- Option group -->
<div class="form-group">
    <label for="country">Country</label>
    <div class="pk-form">
        <select name="country" id="country" class="country all" placeholder="Select a Country">
            <option value=""></option> <!-- If the check is not required, submit a default value empty -->
            <optgroup label="America">
                <option value="EUA">EUA</option>
                <option value="Brazil" selected>Brazil</option>
                <option value="Canada">Canada</option>                      
            </optgroup>
            <optgroup label="Europe">
                <option value="Ireland">Ireland</option>
                <option value="Spanish">Spanish</option>
                <option value="Italy">Italy</option>
                <option value="Portugal">Portugal</option>                      
            </optgroup>
        </select> 
    </div>          
</div>

Set the select

pickout.to('.country');

Another option

pickout.to({
  el: '.country'
});

OBS: Do not forget to declare the characters responsible dial if class use (.) If ID using the (#)

Search field

Field to search options within the modal, default is false

pickout.to({
  el: '.country',
  search: true
});

Set all at once

You can assign to selects separately, however you can apply all at once, simply declare a class in common to all selects and inform the plugin, for example:

pickout.to('.all');

Selecting multiple options

Simply enter the multiple HTML attribute in the field select what you want

<div class="form-group">
    <label for="Skills"><h3>Your skills</h3></label>
    <div class="pk-form">
        <select name="skills[]" id="skills" multiple class="skills" placeholder="Add your Skills">
            <option value=""></option> <!-- If the check is not required, submit a default value empty -->     
            <option value="PHP">PHP</option>
            <option value="Ruby">Ruby</option>
            <option value="C++">C++</option>
            <option value="Scrum">Scrum</option>
            <option value="Java">Java</option>
            <option value="Cobol">Cobol</option>
            <option value="Javascript">Javascript</option>
            <option value="AngularJS">AngularJS</option>
            <option value="Ionic">Ionic</option>
            <option value="VueJS">VueJS</option>
            <option value="ReactJS">ReactJS</option>
            <option value="React Native">React Native</option>
        </select>
    </div>           
</div>

to set the select to pickout

pickout.to('.skills');

For options already selected by default, uses the method

pickout.updatedMultiple('.skills');

With this method the pickout already initializes the tags of options with the selected attribute

Customize styles

To customize, simply add in your CSS rule with this pattern:

.pk-input.-MySelector{
    // my customization 
}
.pk-arrow.-MySelector{
    // my customization 
}

And the definition of pickout informs the theme

pickout.to({
  el: '.city',
  theme: 'MySelector'
});

Themes

theme - Modify the visual style, customized through CSS.

• clean (Default)

OBS: You can check or contribute more topics customizam the pickout completely. Theme styles

pickout.to({
  el: '.state',
  theme: 'dark' // For dark theme, available in dir style themes
});

Select with default values

<div class="form-group">
    <label for="state">State:</label>
    <div class="pk-form">
        <select name="state" id="state" class="state all" placeholder="Select to option">
        <!-- Option selected by default -->
            <option value="opt1" selected>Option 1</option>
            <option value="opt2">Option 2</option>
        </select>  
    </div>     
</div>

It uses the updated function

pickout.updated('.city');

Current version stable

v2.0.1

Browser Support

| | | | | | |:---:|:---:|:---:|:---:|:---:| | Yes ✔ | Yes ✔ | 9+ ✔ | Yes ✔ | 8+ ✔ |

ChangeLog

v2.0.1

• New CSS class to wrap form
• New syntax: add div tag before select
• Bugfix: Search with spaces (by @alexsmonte)

v1.3.3

• Fix the arrow style

v1.3.1 / v1.3.2

• Add link Demo Page
• Styles themes
• Correction in modal

v1.3.0

• Multiple options

v1.2.1

• New Style theme
• Correction in modal css

v1.2.0

• Support to option group
• Optimizing for support to IE
• Separation of style themes css files

v1.1.3

• Search field

Contributing

• Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
• Fork repository, make changes, add your name and link in the authors session readme.md
• Send a pull request

If you want a faster communication, find me on @ktquez

thank you