Skip to content
Browse files

Fire custom events when <details> elements are opened or closed

  • Loading branch information...
1 parent 67e08e3 commit 00754e987648c2134fc2c761e176740e7a01d47e @mathiasbynens committed Feb 7, 2012
Showing with 58 additions and 9 deletions.
  1. +30 −0 README.md
  2. +20 −5 demo.html
  3. +8 −4 jquery.details.js
View
30 README.md
@@ -8,11 +8,41 @@ This plugin polyfills `<details>`/`<summary>` HTML elements. [More information c
## Example Usage
+In its simplest form:
+
```js
// Polyfill a given set of elements
$('details').details();
+```
+
+The plugin will automatically detect browser support and act accordingly. If other parts of your code need to know whether `<details>`/`<summary>` are supported or not, use `$.fn.details.support`:
+
+```js
// Detect whether `<details>`/`<summary>` are natively supported
console.log($.fn.details.support ? 'Native support' : 'No native support');
+// Conditionally add a classname to the `html` element, based on native support
+$('html').addClass($.fn.details.support ? 'details' : 'no-details');
+```
+
+The plugin will provide `open.details` and `close.details` events for you to use:
+
+```js
+$('details').on({
+ 'open.details': function() {
+ console.log('opened');
+ },
+ 'close.details': function() {
+ console.log('closed');
+ }
+});
+```
+
+Any handlers bound to these events will fire even in browsers that natively support `<details>`.
+
+Since both events live under the `details` namespace, you can easily unbind all handlers that are specific to this plugin:
+
+```js
+$('details').off('.details');
```
## Notes
View
25 demo.html
@@ -120,13 +120,28 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.details.js"></script>
<script>
+ window.console || (window.console = { 'log': alert });
$(function() {
- var nativeDetailsSupport = $.fn.details.support;
- if (!nativeDetailsSupport) {
- $('html').addClass('no-details');
- }
+
+ // Add conditional classname based on support
+ $('html').addClass($.fn.details.support ? 'details' : 'no-details');
+
+ // Show a message based on support
+ $('body').prepend($.fn.details.support ? 'Native support detected; the plugin won’t do anything.' : 'Emulation active; you are watching the plugin in action!');
+
+ // Emulate <details> where necessary and enable open/close event handlers
$('details').details();
- $('body').prepend(nativeDetailsSupport ? 'Native support detected; the plugin won’t do anything.' : 'Emulation active; you are watching the plugin in action!');
+
+ // Bind some example event handlers
+ $('details').on({
+ 'open.details': function() {
+ console.log('opened');
+ },
+ 'close.details': function() {
+ console.log('closed');
+ }
+ });
+
});
</script>
</body>
View
12 jquery.details.js
@@ -1,4 +1,4 @@
-/*! http://mths.be/details v0.0.3 by @mathias | includes http://mths.be/noselect v1.0.2 */
+/*! http://mths.be/details v0.0. by @mathias | includes http://mths.be/noselect v1.0.2 */
;(function(document, $) {
var proto = $.fn,
@@ -35,10 +35,10 @@
var isOpen = typeof $details.attr('open') == 'string',
close = isOpen && toggle || !isOpen && !toggle;
if (close) {
- $details.removeClass('open').prop('open', false);
+ $details.removeClass('open').prop('open', false).triggerHandler('close.details');
$detailsNotSummary.hide();
} else {
- $details.addClass('open').prop('open', true);
+ $details.addClass('open').prop('open', true).triggerHandler('open.details');
$detailsNotSummary.show();
}
};
@@ -65,7 +65,11 @@
if (isDetailsSupported) {
details = proto.details = function() {
- return this;
+ return this.on('click', 'summary', function() {
+ // the value of the `open` property is the old value
+ var $details = $(this).parent('details');
+ $details.triggerHandler(($details.prop('open') ? 'close' : 'open') + '.details');
+ });
};
details.support = isDetailsSupported;

0 comments on commit 00754e9

Please sign in to comment.
Something went wrong with that request. Please try again.