Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
dist
.gitignore
README.md
bower.json
example.html
gulpfile.js
license-mit.md
package.json

README.md

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

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
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