Zebra Stripping

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

The striped rows functionality is provided from Twitter Bootstrap CSS

Purpose

Style special relationship between cell, vector (row/col) and group (tbody/colgroup). It also simulate a column hovering effect for table.

Use when

Do not use when

Working example

English:

French:

How to implement

  1. Make your table conform at the 12 techniques for tables
  2. Add a class="wb-zebra" element to the table. 
    <table class="wb-zebra">
  3. (Optional) Activate the indicator that your tables contains data summaries 
    <table class="wb-zebra hassum">
  4. (Optional) Activate the column hovering effect 
    <table class="wb-zebra wb-zebra-col-hover">

Configuration options

There is no customizable configuration options.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb- Triggered manually (e.g., $( ".wb-zebra" ).trigger( "wb-init.wb-zebra" );). Load table parser dependency and initiate the complex table parsing.
wb-ready.wb-zebra (v4.0.5+) Triggered automatically after the Zebra plugin initializes. Used to identify where the Zebra plugin initialized (target of the event) 
$( document ).on( "wb-ready.wb-zebra", ".wb-zebra", function( event ) {
});
$( ".wb-zebra" ).on( "wb-ready.wb-zebra", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});
passiveparse.wb-tableparser When the zebra plugin initiate the complex table parsing. It will parse the data table and attach the information to a data attribute named "tblparser" on every elements inside and on to the table elements.
parsecomplete.wb-tableparser When the table parser has completed his parsing. It's means that the "tblparser" data attribute is now ready to be use.

Source code

Date modified: