2/11/2010 8:49 AM
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.
- Note: The left and right cells of the new Table Header are used to hold the panel state images, when used, while the center table cell holds the Title of the web part.
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
Figure 5: Markup layout example when all HTML markup options have been enabled.
Now that you have a better understanding of the additional HTML markup our jQuery© Panel Web Part adds to your web part pages, take a look at what it takes to create your own themes for the web part in our blog post Branding our jQuery© Panel Web Part - Part 2.
Technorati Tags: SharePoint,WSS 3.0,MOSS 2007,WebPart,Web Part,jQuery
4 comment(s) so far...
By Jeffrey G. on
3/22/2011 8:35 PM
Do you plan to update this web part so that we can use it on SharePoint 2010? We have been using it for a while now and I know that my users will get angry if I remove it from their sites. It is easier for us to put more parts on the same page and let the users decide which ones to display. Also, can you make the web part remember the state of a panel without using any browser cookies?
By Bruce Dishongh on
3/23/2011 2:55 PM
Yes. I plan on updating the web part to run under SharePoint 2010. I used cookies simply because it was convenient. I will see what I can do about storing the panel state in personal web part storage.
By ramesh natarajan on
6/7/2011 8:01 AM
I am wondering whether this ready now for sharepoint 2010? If yes, could you please email me?
By Bruce Dishongh on
6/7/2011 8:05 AM
Not yet. I have a working version for SharePoint 2010 and it is just about ready, but it has not been fully tested. Look for it sometime next week. Several other products will be out next week as well.