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.
zebra_transform
Advanced tools
Changelog
version 3.0.1 (February 12, 2022)
update
method for updating styling after a checkbox or radio button's status is manually updatedReadme
A tiny jQuery plugin for replacing and beautifying checkboxes, radio buttons, and select boxes in IE7+
This plugin is mainly intended to be used for styling checkboxes, radio buttons and select boxes in older versions of Internet Explorer, like IE7 and IE8, but it can also be used in other browser if you want to consistently style these form controls cross browser.
Zebra TransForm is a tiny (~5KB minified) jQuery plugin for styling the appearance of check boxes, radio buttons and select boxes without sacrificing functionality and accessibility. This jQuery plugin works by overlaying stylable elements over the native controls. It works in sync with the form's original elements copying the attached event handlers, preserving the tabindex, giving visual feedback when focused, being accessible via keyboard, and looking and behaving in the same way in all major browsers – Chrome, Firefox, Safari, Edge, Opera and Internet Explorer 7+ (in IE6 it will not replace original elements).
Your support means a lot and it keeps me motivated to keep working on open source projects.
If you like this project please ⭐ it by clicking on the star button at the top of the page.
If you are feeling generous, you can buy me a coffee by donating through PayPal, or you can become a sponsor.
Either way - Thank you! 🎉
See the demos
Zebra TransForm has no dependencies other than jQuery 1.7.1+
Zebra TransForm is available as an npm package. To install it use:
# the "--save" argument adds the plugin as a dependency in packages.json
npm install zebra_transform --save
Zebra TransForm is also available as a Bower package. To install it use:
# the "--save" argument adds the plugin as a dependency in bower.json
bower install zebra_transform --save
Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.5.0.js"><\/script>')</script>
Load the Zebra TransForm plugin
<script src="path/to/zebra_transform.js"></script>
Alternatively, you can load Zebra TransForm from JSDelivr CDN like this:
<!-- for the most recent version, not recommended in production -->
<script src="https://cdn.jsdelivr.net/npm/zebra_transform@latest/dist/zebra_transform.min.js"></script>
<!-- for a specific version -->
<script src="https://cdn.jsdelivr.net/npm/zebra_transform@3.0.0/dist/zebra_transform.min.js"></script>
<!-- replacing "min" with "src" will serve you the non-compressed version -->
Load the style sheet file from a local source
<link rel="stylesheet" href="path/to/zebra_transform.css" type="text/css">
...or from JSDelivr CDN
<!-- for the most recent version -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/zebra_transform@3.0.0/dist/css/zebra_transform.min.css">
<!-- replacing "min" with "src" will serve you the non-compressed version -->
Now, within the DOM-ready event do
$(document).ready(function() {
// style all checkboxes, radio buttons and selects on the page
var transform = new $.Zebra_TransForm();
// unless you're planning on using the "update" method
// you can instantiate the plugin without the "new" keyword
// and without assigning it to a variable:
$.Zebra_TransForm();
// style checkboxes only
$.Zebra_TransForm($('input[type="checkbox"]'));
// style checkboxes and radio buttons only
$.Zebra_TransForm($('input[type="checkbox"], input[type="radio"]'));
// style checkboxes, radio buttons and selects (same as first example)
$.Zebra_TransForm($('input[type="checkbox"], input[type="radio"], select'));
// style checkboxes of a specific parent
$.Zebra_TransForm($('#element input[type="checkbox"]'));
// style only a specific element
$.Zebra_TransForm($('#element'));
// if you plan on reverting elements to their original state
// you must instantiate the plugin with the "new" keyword
// and assign it to a variable
var zt = new $.Zebra_TransForm();
// revert elements to their original state
zt.remove();
});
Property | Type | Default | Description |
---|---|---|---|
style_disabled_labels | boolean | true |
If set to true , labels attached to disabled checkboxes and radio buttons will also be styled to
look disabled.
|
remove()
Call this method if you want to revert elements to their original state .
var zt = new $.Zebra_TransForm();
zt.remove();
update()
Call this method to update element styling after manually changing a checlbox or a radio button's status.
var zt = new $.Zebra_TransForm();
zt.update();
Cross browser/device testing is done with
FAQs
A tiny jQuery plugin for replacing and beautifying check boxes, radio buttons, and select boxes in IE7+
The npm package zebra_transform receives a total of 0 weekly downloads. As such, zebra_transform popularity was classified as not popular.
We found that zebra_transform 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.