HighCharts

Buttons

Buttons must have the "btn" class

• Market InformationInformation icon
• Apr 23
• Apr 23
• List iconView List

Select

Uses the Selectize plugin.

$('default-select').selectize();
		

//The HTML select tag needs an attribute of "multiple"					
$('#select-state').selectize({
maxItems: 3
});					
		

$('#select-country').selectize();
		

Tabs

Checkboxes

Radio Buttons

Menu Bar

For simplicuty this is wrapped up into an Agular directive. The following attributes are needed on the parent div:

• data-accordion-panel="open" (or closed)
• data-accordion-panel-colour="green" (or blue)

The directive adds all other required classes and markup:

        
        

        
Retail Advertised Values
        
Vestibulum ut vestibulum purus, eu venenatis dolor. Fusce nec nunc convallis, auctor velit ac, condimentum mi. Suspendisse ut nulla tortor. Donec ullamcorper rutrum congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at finibus leo. Integer vel massa dui. Sed sapien ligula, porttitor vel varius non, consequat ut tortor.
                
			
        

        
Retail Advertised Values
        
Vestibulum ut vestibulum purus, eu venenatis dolor. Fusce nec nunc convallis, auctor velit ac, condimentum mi. Suspendisse ut nulla tortor. Donec ullamcorper rutrum congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at finibus leo. Integer vel massa dui. Sed sapien ligula, porttitor vel varius non, consequat ut tortor.

		

Basic Table

The following table has these classes:

• table - to apply the standard bootstrap styles
• table-data - to center align the data columns

Table with Hover

The following table has these classes:

• table - to apply the standard bootstrap styles
• table-condensed - to reduce the padding of the table cells
• table-hover - to add a hover effect on the table rows and columns
• table-data - to center align the data columns

Table with Inputs

Sortable Table

The following table has these classes:

• table - to apply the standard bootstrap styles
• table-hover - to add a hover effect on the table rows and columns
• tablesorter - to apply the table sorter functionality

Alerts & Prompts

Mileage

This uses an AngularJS directive of "mileage". This directive will apply the necessary HTML to display the mileage correctly.

Lists

23, Apr, 2014

This is a news headline...

23, Apr, 2014

This is a news headline...

23, Apr, 2014

This is a news headline...

Number Plates

Lists

Tick List

This uses an Angular.js directive to inject the correct HTML into the list. All that is needed is the class of 'cap-list-tick'

• Ready for the dealer to sell requiring little or no refurbishment
• Mechanically sound

        
FAQs
        
What does "Trade in Clean" mean?
        
A car that is "Trade in Clean" would meet these criteria:
        

        
Ready for the dealer to sell requiring little or no refurbishment
        
Mechanically sound
			
		

Sliders

Slider used: ion.rangeSlider

        
        
			$("#example_1").ionRangeSlider({
				min: 0,
				max: 5000,
				type: 'double',
				gridMargin: 7
			});
			
		

        
        
			$("#example_2").ionRangeSlider({
				min: 0,
				max: 5000,
				gridMargin: 7
			});
			
		

Preloaders

FORMS

VA Grid

The table below uses the SLY plugin for the table scrolling.

        
        var sly = new Sly('.sly-frame', {
            horizontal: 1,
            itemNav: 'basic',
            scrollBy: 1,
            dragging: 1,
            speed: 200,
            mouseDragging: 1,
            touchDragging: 1,
            pagesBar: $('.sly-frame').siblings('.pages'),
            scrollBar: $('.sly-frame').siblings('.scrollbar')
        }).init();
        sly.on('moveEnd', function () {
            vaGridSly.renameButton($("#next6Months"));
        });
        $("#next6Months").click(function () {
            var base = $(this);
            vaGridSly.onButtonControl(base);
        });
        var vaGridSly = vaGridSly || {
            onButtonControl: function (base) {
                if (sly.rel.activePage > 0) {
                    base.text("Next 6 Months");
                    sly.prevPage();
                } else {
                    base.text("Prev 6 Months");
                    sly.nextPage();
                }
            },
            renameButton: function (base) {
                if (sly.rel.activePage > 0) {
                    base.text("Prev 6 Months");
                } else {
                    base.text("Next 6 Months");
                }
            }
        }