Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
pickout
Advanced tools
Readme
Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped.
DEMO PAGE
For syntax of the previous version click here
npm install pickout --save
bower install pickout --save
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>
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>
<!-- 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>
data-icon
: Icon code, for example: "e602", simply use data-icon=""
;
<!-- 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>
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 (#)
Field to search options within the modal, default is false
pickout.to({
el: '.country',
search: true
});
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');
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
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'
});
theme - Modify the visual style, customized through CSS.
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
});
<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');
v2.0.1
Yes ✔ | Yes ✔ | 9+ ✔ | Yes ✔ | 8+ ✔ |
v2.0.1
v1.3.3
v1.3.1 / v1.3.2
v1.3.0
v1.2.1
v1.2.0
v1.1.3
If you want a faster communication, find me on @ktquez
thank you
FAQs
Cool efect for field select on form
The npm package pickout receives a total of 23 weekly downloads. As such, pickout popularity was classified as not popular.
We found that pickout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.