itsalif / ezmark Goto Github PK
View Code? Open in Web Editor NEWA small jquery plugin gives the ability to stylize checkbox and radiobuttons
Home Page: http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin
License: MIT License
ezmark's People
Contributors
Stargazers
Watchers
Forkers
akkuma jamesmorrish erichummel first-developer johnkoht chavesmoox alex-lia runningman tricki dzmlimited perrtang bortez kukunin rebase-master passatgt kentandre xvilain jumpski cyberbob2500 phuongit demidovitransition decibelinsight ku3mich yajinn liquidlabs jeffersonpl sehuo lajefa engmmagdy aradesh okgo sanjaykmp rasghul tahmoor123 f4hdtajik batmanhero bangmod bertyhell sigysmund singod josephjlee i4aezmark's Issues
Wrapped Labels Do Not Trigger Change (IE)
When wrapping an input / checkbox with a label the default browser behaviour fails in IE.
< label > < input > demo < / label > FAILS
< input > < label > demo < / label > WORKS
Plugin does not work on IE-9
The image replacement on checkbox & radiobutton works, but the click event fails. When a checkbox or radiobutton is clicked, it doesn't get checked/selected properly in IE-9 (tested on developer's preview edition).
How to set state with jQuerz
Hi,
I was wondering how I set a radio button as selected. I have 3 radio buttons, when I set the checked attribute, nothing gets reflected in the wrapper. I added the ez-selected class to the wrapper but that didn't uncheck the other radio buttons.
Is it possible to style the FOCUS state.
Hello, I'm using ezMark in some projects for some time now and it works great!
For accessibility reasons I also wanted to style the focus state of the input.
But sadly I cannot see a class like "ez-focus" being applied to the element when the input is focussed.
As there is no such thing as a parent selector in CSS, which allows me to style the element depending on the input state I see no way to styling it. :\
Is there a way I could do that?
Bower support
What do you think about adding package management and to be available package in bower?
How to use the disable option
Does the disable option for checkboxes work?
Demo links broken.
Oops! That page can’t be found.
It looks like nothing was found at this location. Maybe try one of the links below or a search?
Reset form behaviour
Could I suggest you these modifications, in order to use reset button in forms:
if( $this.attr('type') == 'checkbox') {
var defaultState = '';
if( $this.is(':checked') ) {
$this.parent().addClass(defaultOpt.checkedCls);
defaultState = 'checked';
}
var item = $this.addClass(defaultOpt.hideCls).wrap(wrapTag);
item.change(function() {
console.log("EZMARK checkbox changed");
if( $(this).is(':checked') ) {
$(this).parent().addClass(defaultOpt.checkedCls);
}
else {
$(this).parent().removeClass(defaultOpt.checkedCls);
}
});
if(item.parents("form").find("[type=reset]").length>0){
item.parents("form").find("[type=reset]").click(function(){
console.log("EZMARK form reset");
if(defaultState=='checked'){
item.parent().addClass(defaultOpt.checkedCls);
}else{
item.parent().removeClass(defaultOpt.checkedCls);
}
});
}
}
else if( $this.attr('type') == 'radio') {
var defaultState = '';
if( $this.is(':checked') ) {
$this.parent().addClass(defaultOpt.selectedCls);
defaultState = 'checked';
}
var item = $this.addClass(defaultOpt.hideCls).wrap(wrapTag);
item.change(function() {
console.log("EZMARK radio changed");
// radio button may contain groups! - so check for group
$('input[name="'+$(this).attr('name')+'"]').each(function() {
if( $(this).is(':checked') ) {
$(this).parent().addClass(defaultOpt.selectedCls);
}
else {
$(this).parent().removeClass(defaultOpt.selectedCls);
}
});
});
if(item.parents("form").find("[type=reset]").length>0){
item.parents("form").find("[type=reset]").click(function(){
console.log("EZMARK form reset");
if(defaultState=='checked'){
item.parent().addClass(defaultOpt.selectedCls);
}else{
item.parent().removeClass(defaultOpt.selectedCls);
}
});
}
}
Firefox issues - unchecking does not reflect
The plugin (header * @Version 1.0 * @Date June 27, 2010 ) does not seem to work on firefox (version 6.0) even though it works fine on webkit
Basically when you click a checked checkbox, the checked state is not reflected (and vice versa). But the checking itself (i.e. the event is fired perfectly)
I did an inspect and when i click on a checked checkbox (thereby unchecking it) the class of the div is still
"ez-checkbox-green ez-checked-green"
In chrome, this changes to only "ez-checkbox-green"
Is this a easily fixable issue ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.