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

Alan Ktquez

Last update: Sep 20, 2022

Related tags

Effect pickout

Overview

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

Cool tips to design UI/UX on Leaflet maps.

Map Effects 100 Map Effects 100 has cool tips to design UI/UX on your Map. Map? Leaflet Quick Start git clone https://github.com/muxlab/map-effects-10

Sep 21, 2022

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022

Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Dec 18, 2022

Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

/** * DHTML Snowstorm! JavaScript-based Snow for web pages * -------------------------------------------------------- * Version 1.44.20131208 (Prev

Dec 24, 2022

Small but good javascript smoke effect 🌬💨

Demo You can play with a live demo here → Installation Basic Copy the smoke.js file into your project and use it with a script tag: script src="smoke

Dec 28, 2022

Javascript Sound Effect Generator

This is a JavaScript library for sound effect generation and is supported on most current browsers. Generation speed is approximately 1s audio = 10ms

Oct 31, 2022

🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look

Dec 9, 2022

This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.

SomaFM Music Player Web-App This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channe

Dec 27, 2022

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Jul 27, 2022

Comments

Setar selecionados anteriormente

Eu salvei os que foram selecionados em um momento anterior em um Array, há como colocá-los como ativos logo queo Pickout iniciar? Para que o 'input' que ele cria, seja preenchido com o nome do item + close;

opened by romuloinnocencio 4
A estrutura

Estava analisando o seu projeto e antes de mexer gostaria de saber algumas coisas, essa estrutura ela deve ser assim mesmo ? caso sim, acredito que é bom deixar livre o desenvolvedor principalmente os que usam framework

opened by alexsmonte 4
Search field ok, but bug on IE (is being fixed)

Search field to facilitate the search for options until the ok time: Firefox (ok) Chrome (ok)

With problems: Internet Explorer (is being fixed, for v1.1.1)

opened by ktquez 2
Utilizar com Vue

Eu tenho um select normal, que quando seleciono um nova opção atraves do v-on-change é disparado um evento, entretanto quando uso o pickout o mesmo evento não é disparado,existe algo que eu possa fazer para conseguir usar ou fazer com q o Vue veja que mudou algo?

opened by alexsmonte 1