@evanminto/element.details
v0.2.1
Published
A pure JS polyfill for <details> tag with DOM API for all browsers including IE6+
Downloads
3
Readme
A pure JS polyfill for details
tag with DOM API for all browsers including IE6+
Status: Beta 2
Demo: http://jsbin.com/eyopiy/5
Using
<!--[if lt IE 8]>
<script src=Element.details.ielt8.js"></script>
<![endif]-->
<!--[if IE 8]>
<script src="Element.details.ie8.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="Element.details.js"></script>
<!--<![endif]-->
DOM API
var details = document.querySelector("details");
details.open = true;
details.open = false;
CSS selector for 'details marker'
detail .details-marker { <some> }
[or] detail>*>.details-marker { <some> }
summary::-webkit-details-marker { <some> }
summary::-moz-details-marker { <some> }
summary::-o-details-marker { <some> }
summary::details-marker { <some> }
##Use with dynamic HTML DOM API:
Array.from(document.querySelectorAll('details')).forEach(function(el){
el.open = el.open
})
jQuery:
$("details").each(function(k, el) {
el.open = el.open;
})
##Features
- DOM API (Extend Node.prototype with "open" property)
- No libs need (almost)
- Create element (instead of fake which can be styled in css) when without
- Wrap text nodes into custom element instead of (which can be styled in css)
- IE6 and IE7 support with some tweaks
##Limitations
- Require:
- For some old browsers (not only IE) you may need DOM-shim or DOM4/ES5 shim to solve some dependencies
- No animation support for now
Browser support
- All browsers including IE8
- IE7,IE6 only support with
Element.details.ielt8.htc
file in the root of youre site
IE < 8
- Problem: Property
open
has the same name as Attributeopen
-> rename attribute to "$OPEN$"
Build
The build tool is Google Closure Compiler.
On OS X with homebrew, install with brew install closure-compiler
. On other platforms, follow the installation instructions.
Then, run:
closure-compiler --js __SRC/Element.details.js --js_output_file __COMPILE/Element.details.js
TODO
- Listeners (open/close)