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="♠" value="Spade">Spade</option>
<option data-icon="♣" value="Club">Club</option>
<option data-icon="♥" value="Heart">Heart</option>
<option data-icon="♦" value="Diamond">Diamond</option>
</select>
</div>
</div>
Attributes
data-icon : Icon code, for example: "e602", simply use data-icon="";
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
