XML

Allows you to use an XML file or XML string as a source for the accordion's content. The path of the XML file or the XML string must be passed to the 'XMLSource' property.

Example:

$('#example-xml').gridAccordion({
    XMLSource: 'path/to/file.xml',
    width: 960, 
    height: 800
});

In the accordion's HTML code, you will only need to create the main container DIV. The rest will be created automatically, based on the XML data.

<div id="example-xml" class="grid-accordion"></div>

The syntax used in XML is similar to that used in HTML. Some differences would be that the ga-prefix is not used anymore for classes, the data- prefix is not used for attributes, and using the dash (-) as a delimiter is replaced with using the CamelCase notation.

These are the node names that need to be used:

  • accordion : for the root node
  • panel : for panel nodes
  • background : for background images
  • backgroundLink : for links attached to background images
  • backgroundRetina : for alternative, high resolution images
  • backgroundOpened : for alternative images that will appear when the panel is opened
  • backgroundOpenedLink : for links attached to the opened background image
  • backgroundOpenedRetina : for retina version of the opened background image
  • layer : for layer nodes

Example:

<accordion>
    <panel>
        <background>path/to/image1.jpg</background>
        <backgroundRetina>path/to/image1@2x.jpg</backgroundRetina>
        <backgroundOpened>path/to/alt_image1.jpg</backgroundOpened>
        <backgroundOpenedRetina>path/to/alt_image1@2x.jpg</backgroundOpenedRetina>
        <backgroundLink>http://bqworks.com/</backgroundLink>
    </panel>

    <panel>
        <background>path/to/image2.jpg</background>
        <backgroundRetina>path/to/image2@2x.jpg</backgroundRetina>
        <backgroundOpened>path/to/alt_image2.jpg</backgroundOpened>
        <backgroundOpenedRetina>path/to/alt_image2@2x.jpg</backgroundOpenedRetina>
        <backgroundOpenedLink>http://bqworks.com/</backgroundOpenedLink>
    </panel>
</accordion>

If you want to use lazy loading, you simply need to add the lazyLoading attribute to the rootaccordion node and specify the path of the placeholder image.

Example:

<accordion lazyLoading="path/to/blank.gif">
    ...
</accordion>

When using layers, the equivalent for the class attribute is the style attribute. As noted before, the ga- and data- prefixes are not used anymore and the names of the attributes use a CamelCase notation. It's important to already be familiar with the 'Layers' module before learning how to use layers in XML. The available styles and attributes are enumerated below, but check the presentation of the 'Layers' module for a description of these.

Styles

  • opened
  • closed
  • black
  • white
  • padding
  • rounded.

Attributes

  • width
  • height
  • depth
  • position
  • horizontal
  • vertical
  • showTransition
  • showOffset
  • showDuration
  • showDelay
  • hideTransition
  • hideOffset
  • hideDuration
  • hideDelay

This module is showcased in example_xml.html, which is the XML version of example1.html. Please check the XML file created for this example, accordion.xml, to see how layers can be created in XML.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk