阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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

      目录
      目录