插件 jQuery.details 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.details 中文API文档 https://github.com/mathiasbynens/jquery-details

<details>/<summary> jQuery plugin

This plugin polyfills <details>/<summary> HTML elements and adds the appropriate ARIA annotations for optimal accessibility. More information can be found in my blog post on the subject.

Demo & Examples

http://mathiasbynens.be/demo/html5-details-jquery

Example Usage

In its simplest form:

// 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:

// 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:

$('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:

$('details').off('.details');

Notes

The plugin doesn’t require you to add any CSS to your document. It will add a class="open" to any open <details> elements though (in addition to the open attribute), so you can very easily target these using CSS if you want.

This plugin includes my noSelect jQuery plugin.

This plugin automatically feature tests for native <details>/<summary> support and only enables the fallback when it’s necessary. You don’t have to write any feature tests yourself.

This plugin requires jQuery 1.9+. For a version that works with jQuery 1.8 or older, see v0.0.6. For a version that works with jQuery 1.6 or older, see v0.0.1.

This fallback works in all A-grade browsers, including IE6. It will only be executed if the <details> element is not natively supported in the browser. If it isn’t, and JavaScript is disabled, all elements will still be visible to the user.

While the plugin has a certain level of support for <details> elements without a <summary>, it should be noted that omitting the <summary> element results in invalid HTML, and prevents the custom open.details/close.details events from firing in browsers that natively support <details>. Don’t do this!

License

This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.

Mathias

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了