JavaScript add-ons - Design guide
Each JavaScript style includes a Correct use section. By adhering to the style's intended purpose(s), any future changes in the stylesheets will have predictable outcomes.
Table of contents
- Archiving content
- Auto-complete
- Calendar: Date picker
- Calendar: Events calendar
- Charts and graphs
- Expand/collapse
- Feedback
- Footnotes
- Form validation
- Geomap
- Light box
- Mathematical/scientific formula display
- Meter
- Multimedia
- Persistent storage
- Progress bar
- Share widget
- Slide out tab
- Source code (Prettify)
- Slider control
- Tabs / News sliders
- Table enhancement
- Text highlighting
- Web feeds
- Zebra striping
Archiving
Auto-complete
Add the auto-complete feature to a text input field.
Correct use
Refer to: Auto complete for text input fields wiki
Demo
Type in W for Winnipeg to see the auto-complete behaviour. This enhancement only works in modern browsers. Older browsers require the user to type out the info in full.
Calendar: Date picker
This feature dynamically generates a calendar interface for selecting a date in a form.
Correct use
Refer to: Date picker wiki
Calendar: Events calendar
This feature dynamically generates a calendar interface for navigating a list of events.
Correct use
Refer to: Events calendar wiki
Charts and graphs
This feature dynamically generates charts from table data.
Correct use
Refer to: Charts and graphs wiki
Demo
food | auto | household | |
---|---|---|---|
Mary | 200 | 160 | 40 |
Tom | 3 | 40 | 30 |
Brad | 10 | 180 | 10 |
Kate | 40 | 80 | 90 |
Expand/collaspe
Allows content to be expanded and collapsed.
Correct use
- Use to hide secondary or tertiary content, not primary content
- Do not use as a means to tidy up the look of your page. If the page is deemed too busy, consider other options like separating the content over several pages or chunking the information in a more aesthetically pleasing way.
- Refer to: Expand/collapse content wiki
Feedback form
This component allows users to submit feedback for a specific Web page or the Web site in general.
Correct use
Refer to: Feedback form wiki
Footnotes
This component provides a consistent, accessible way of handling footnotes across websites.
Correct use
Refer to: Footnotes wiki
Form validation
This component provides generic validation and error message handling for Web forms.
Correct use
Refer to: Form validation wiki
Geomap
Displays a dynamic map over which information from additinal sources can be overlaid.
Correct use
Refer to: Geomap wiki
Lightbox
Mathematical/scientific formula display
The MathML polyfill emulates MathML support in browsers that lack MathML support.
Correct use
Demo
The quadratic equationMeter
The HTML5 meter
element displays a scalar measurement in a known range.
Correct use
- The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.
- This is also known as a gauge.
- The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.
- The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.
- Refer to: Meter wiki
Multimedia
This feature provides a multimedia player for embedding accessible video and audio into web pages.
Correct use
Refer to: Multimedia player wiki
Persistent storage
The HTML5 localStorage object is used to store data persistently (no expiration date). This component adds support for this object in browsers that do not already have native support.
Correct use
Refer to: Persistent storage wiki
Progress bar
Session timeout
This component helps Web asset owners to provide session timeout and inactivity timeout functionality.
Correct use
Refer to: Session timeout wiki
Share widget
This component facilitates sharing Web content on social media platforms.
Correct use
Refer to: Share widget wiki
Slide out tab
This component provides a tab at the edge of the content area that can slide out to show content.
Correct use
Refer to: Slide out tab wiki
Slider control
The <input type="range" />
allows to display a slider control bar.
Correct use
Refer to: Slider control wiki
Source code (Prettify)
Syntax highlighting of source code snippets in an html page using google-code-prettify.
Correct use
Refer to: Prettify source code wiki
Demo
<label for="data1">Form input default appearance:</label>
<input name="data1" type="text" id="data1" />
Tabs / News slider
This component displays multiple pieces of content into a tabbed interface.
Correct use
Jakob Nielsen, a top usability expert, wrote the article Tabs, Used Right (external link), which outlines the correct use of tabs. In this document, he states that tabs should:
- Not use all-capital letters for the labels;
- Use only only one row of tabs that are on top of the panel;
- Alternate only between views within the same type of context, and not navigate to different areas;
- Tabs should logically chunk information so users can easily predict what they’ll find. They should not have to simultaneously refer to and compare content.
- Have a highlighted Currently selected tab — with unselected tabs that are clearly visible and readable;
- The Current tab should connect to the content area.
- Use plain language and have short titles;
- Use a parallel naming structure. Correct use = parallel labels: Incorrect use = unrelated labels:
- Have an obvious scope that the tabs control;
- Have a quick click response time (ideally <0.1 s).
- Refer to: Tabbed interface wiki
Demo
Tab 3
Tab 3 content. Tab 3 content. Tab 3 content. Tab 3 content.
Tab 4
Tab 4 content. Tab 4 content. Tab 4 content. Tab 4 content.
Table enhancement
The table enhancement plugin adds advanced functionality such as sorting, filtering, pagination to tables.
Correct use
Refer to: Table enhancement wiki
Demo
Rendering engine | Browser |
---|---|
Trident | Internet Explorer 4.0 |
Trident | Internet Explorer 5.0 |
Trident | Internet Explorer 5.5 |
Trident | Internet Explorer 6 |
Trident | Internet Explorer 7 |
Text highlighting
This component automatically highlights certain words on a Web page. The words to highlight can be set through the query string.
Correct use
Refer to: Text highlighting wiki
Web feeds
Provides a widget for aggregating and displaying the entries from one or more Web feeds on a Web page.
Correct use
Refer to: Web feeds wiki
Zebra striping
Adds zebra stripes to ordered list, unordered list, definition list, table rows, table columns and provide visual support for the complex data table relationship.
Correct use
Refer to: Zebra striping wiki
Demo
Header | Header |
---|---|
Data | Data |
Data | Data |
Data | Data |
Data | Data |
Data | Data |
- Date modified: