Zebra Striping
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
- To style special relationship in table
- To provide a column hovering effect to the user, when appropriate
Do not use when
- For styling table that are not conform at the 12 technique for tables
Working example
English:
French:
How to implement
- Make your table conform at the 12 techniques for tables
- Add a class="wb-zebra" element to the table.
<table class="wb-zebra">
- (Optional) Activate the indicator that your tables contains data summaries
<table class="wb-zebra hassum">
- (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)
|
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.
|
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
- Core: Zebra plugin
- Dependency: Complex Table Parser
- Date modified: