disabled link/button jq plugin
by John Allan
HTML
<a href="#button" id="button">click me</a>
<!-- a href="#button" id="button" class="working">click me</a>
<a href="#button" id="button" class="disabled">click me</a -->
<br /><br /><br />
<a href="#disable" id="disable">disable</a> |
<a href="#working" id="working">working</a> |
<a href="#enable" id="enable">enable</a> |
<a href="#getstate" id="getstate">get state</a>
CSS
#button {
background:#999;
display:inline-block;
padding:5px 10px;
position:relative;
color:#FFF;
margin:10px;
}
#button.hcf-Loading{
padding-right:25px;
}
#button.hcf-Loading:after{
display:block;
content: "O";
width:12px;
height:12px;
text-size:10px;
line-height:12px;
color:#FFF;
position:absolute;
right:5px;
top:8px;
overflow:hidden;
}
#button.hcf-Disabled{
background:#cdcdcd;
cursor:default;
}
JavaScript
(function( $ ){
$.fn.hcfButtonDisable = function( working ) {
return this.each(function() {
var $this = $(this);
if (typeof working === 'undefined' || working === false) {
$this.addClass('hcf-Disabled');
} else {
$this
.removeClass('hcf-Disabled')
.addClass('hcf-Loading');
}
});
};
})( jQuery );
(function( $ ){
$.fn.hcfButtonEnable = function( working ) {
return this.each(function() {
var $this = $(this);
$this.removeClass('hcf-Disabled hcf-Loading');
});
};
})( jQuery );
(function( $ ){
$.fn.hcfButtonIsEnabled= function() {
var enabled = true;
var first = this.filter(":first");
if (first.is('.hcf-Disabled,.hcf-Loading')) {
enabled = false;
}
return enabled ;
};
})( jQuery );
$("#disable").click(function (e) {
e.preventDefault();
$("#button").hcfButtonDisable();
});
$("#working").click(function (e) {
e.preventDefault();
$("#button").hcfButtonDisable(true);
});
$("#enable").click(function (e) {
e.preventDefault();
$("#button").hcfButtonEnable();
});
$("#getstate").click(function (e) {
e.preventDefault();
alert("button is enabled | " + $("#button").hcfButtonIsEnabled());
});