Created
March 25, 2014 11:06
-
-
Save bennadel/9759473 to your computer and use it in GitHub Desktop.
Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<title>Enable And Disable jQuery Event Handlers</title> | |
<style type="text/css"> | |
#modal { | |
background-color: #FAFAFA ; | |
border: 1px solid #C0C0C0 ; | |
display: none ; | |
height: 80px ; | |
left: 50% ; | |
margin: -51px 0px 0px -151px ; | |
padding: 20px 20px 20px 20px ; | |
position: absolute ; | |
text-align: center ; | |
top: 50% ; | |
width: 260px ; | |
z-index: 100 ; | |
} | |
</style> | |
<script type="text/javascript" src="jquery-1.3.2.js"></script> | |
<script type="text/javascript"> | |
jQuery(function( $ ){ | |
// Get a reference to the modal window. | |
var modal = $( "#modal" ); | |
// This is a variable to determine if the given event | |
// handler is active or disabled. This will be used | |
// by the event handler for conditional execution. | |
var isHandlerActive = false; | |
// Bind the trigger link to show the modal window. | |
$( "a" ) | |
.attr( "href", "javascript:void( 0 )" ) | |
.click( | |
function( event ){ | |
// Show modal window. | |
modal.show(); | |
// Now that modal window is shown, we need | |
// to activate its event handler. | |
isHandlerActive = true; | |
// Prevent default. | |
event.preventDefault(); | |
} | |
) | |
; | |
// Bind a mouseUp event on the document so that we | |
// can close the modal window when it is open. | |
$( document ).bind( | |
"mousedown", | |
function(){ | |
// Check to see if this event handler is | |
// "active". If it is not, then exit. | |
if (!isHandlerActive){ | |
return; | |
} | |
// Log to console for debugging. | |
console.log( "Event handled." ); | |
// Close the modal window. | |
modal.hide(); | |
// Now that the modal window is hidden, we | |
// need to disable its event handler. | |
isHandlerActive = false; | |
} | |
); | |
// Bind the mousedown event the modal window so we can | |
// stop it from bubbling up to the document (ie. you | |
// should be able to click IN the modal window without | |
// it closing. | |
modal.bind( | |
"mousedown", | |
function( event ){ | |
event.stopPropagation(); | |
} | |
); | |
}); | |
</script> | |
</head> | |
<body> | |
<h1> | |
Enable And Disable jQuery Event Handlers | |
</h1> | |
<p> | |
<a id="trigger">Show modal window</a> | |
</p> | |
<div id="modal"> | |
Hello, this is a modal window. | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Wrap the plugin definition in a callback bubble so we can bind | |
// it to the dollar sign. | |
(function( $ ){ | |
// This jQuery plugin creates proxied event handlers that | |
// consult with an additional conditional callback to see if | |
// the original event handler should be executed. | |
$.fn.bindIf = function( | |
eventType, | |
eventHandler, | |
ifCondition | |
){ | |
// Create a new proxy function that wraps around the | |
// given bind callback. | |
var proxy = function( event ){ | |
// Execute the IF condition callback first to see if | |
// the event handler should be executed. | |
if (ifCondition()){ | |
// Pass the event onto the original event | |
// handler. | |
eventHandler.apply( this, arguments ); | |
} | |
}; | |
// Bind the proxy method to the target. | |
this.bind( eventType, proxy ); | |
// Return this to keep jQuery method chaining. | |
return( this ); | |
}; | |
})( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<title>Enable And Disable jQuery Event Handlers</title> | |
<style type="text/css"> | |
#modal { | |
background-color: #FAFAFA ; | |
border: 1px solid #C0C0C0 ; | |
display: none ; | |
height: 80px ; | |
left: 50% ; | |
margin: -51px 0px 0px -151px ; | |
padding: 20px 20px 20px 20px ; | |
position: absolute ; | |
text-align: center ; | |
top: 50% ; | |
width: 260px ; | |
z-index: 100 ; | |
} | |
</style> | |
<script type="text/javascript" src="jquery-1.3.2.js"></script> | |
<script type="text/javascript" src="jquery.bindif.js"></script> | |
<script type="text/javascript"> | |
// When the DOM is ready, intialize document. | |
jQuery(function( $ ){ | |
// Get a reference to the modal window. | |
var modal = $( "#modal" ); | |
// Bind the trigger link to show the modal window. | |
$( "a" ) | |
.attr( "href", "javascript:void( 0 )" ) | |
.click( | |
function( event ){ | |
// Show modal window. | |
modal.show(); | |
// Prevent default. | |
event.preventDefault(); | |
} | |
) | |
; | |
// Bind a mousedown event on the document so that we | |
// can close the modal window when it is open. | |
$( document ).bindIf( | |
"mousedown", | |
function(){ | |
// Log to console for debugging. | |
console.log( "Event handled." ); | |
// Close the modal window. | |
modal.hide(); | |
}, | |
function(){ | |
return( modal.is( ":visible" ) ); | |
} | |
); | |
// Bind the mousedown event the modal window so we can | |
// stop it from bubbling up to the document (ie. you | |
// should be able to click IN the modal window without | |
// it closing. | |
modal.bind( | |
"mousedown", | |
function( event ){ | |
event.stopPropagation(); | |
} | |
); | |
}); | |
</script> | |
</head> | |
<body> | |
<h1> | |
Enable And Disable jQuery Event Handlers | |
</h1> | |
<p> | |
<a id="trigger">Show modal window</a> | |
</p> | |
<div id="modal"> | |
Hello, this is a modal window. | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function(){ | |
return( modal.is( ":visible" ) ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment