Our free jQuery© Panel Web Part allows for branding and styling to match the particular styles used on your own SharePoint sites. Part 1 of this Blog post is intended to detail the additional markup that is added to a web part page that enables the styling and animation effects of the jQuery© Panel Web Part.

 

For each web part selected as a panel we insert a simple 3 column/1 row HTML table into the standard SharePoint web part container to be used in place of the default SharePoint title markup. See Figure 1. Please note that I said "to be used in place of"...this is important, as we do not replace any of the default SharePoint markup used to render the web part. When configuring the jQuery© Panel Web Part, it automatically sets the Chrome Type property to None on any selected web part so SharePoint will not output any HTML markup for the web part title. Our newly injected HTML table becomes the web part title markup.

 

  Figure 1: New web part Title table markup.

 

Next we add an HTML DIV wrapper around the entire SharePoint web part container that is rendered to the web part page. This new HTML DIV wrapper is used to manipulate the web part during animation effects or show/hide the web part when no animation effects have been chosen. Figure 2 shows the default HTML markup that is added to each web part. Additional markup may be added based on configuration options chosen.

 

  Figure 2: Minimal amount of markup added to original web part. 

So far we have detailed the default markup added to each configured web part on the page. However, the jQuery© Panel Web Part includes 2 additional options that may add additional HTML markup to the page. These additional options are Wrap Body in Additional DIV Tag and Wrap Panel in Additional DIV Tag. Each of these configuration options allow for more styling choices, at the expense of additional HTML markup, and are not enabled by default. Figure 3 details the additional HTML DIV wrapper that is added to the web part markup when Wrap Body in Additional DIV Tag has been enabled. Enable this option if you would like to style a border around the web part body.

 

  Figure 3: Markup layout when Wrap Body in Additional DIV Tag option has been enabled.

 

When the web part option Wrap Panel in Additional DIV Tag option has been enabled we wrap all of the new markup that is added to the page with another HTML DIV tag. Enable this option if you would like to style a border around the entire web part container. 
 

   Figure 4: Markup layout when the Wrap Panel in Additional DIV Tag option has been enabled.

And finally Figure 5 details when all markup options have been enabled. Enabling all markup options will give you the most styling options, but it also adds the greatest amount of new HTML to the DOM. It is important to note that regardless of how many markup options have been selected the jQuery© Panel Web Part only modifies the original DOM of the web part page in a single jQuery JavaScript call keeping performance as high as possible.

 

  Figure 5: Markup layout example when all HTML markup options have been enabled.

Your Name:
Email Address:
	(Optional) Email used only to show Gravatar.
Comment:
Security Code Enter the code shown above in the box below
Add Comment  Cancel