dogears

As I was working on the labs for my live online workshop, I did some experiments with the last release (v 2.01) of the jQuery corner plugin.

This plugin takes the edge off corners and replaces it with various shapes (rounded, beveled, notched, etc.). I have applied two examples – rounded corners and dog ears – to Web Part headers on this page:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx

The shapes are not always as neat as with other methods (that use images or the canvas element), but its ease of use and versatility make this plugin a excellent solution. Note that I said “not always”… the plugin is smart enough to apply the latest css standards if your browser recognizes them. To see this, try out the rounded corners of my above example in different browsers.

For the participants in the September 23rd “tabbed interfaces” online workshop, note that we’ll see how this technique can be applied to the Easy Tabs and the default SharePoint navigation.

If you want to try out this effect on Web Part headers, as in my example, here is the code I used (Only one line of jQuery!):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-WPHeader").parent().parent().parent().css("background-color","palegreen").corner("dog top");
</script>

(Remember to modify the script to point to your own copy of jQuery and jQuery corner)

Update [9/14/2009]: I have made a slight change to the code, it now works cross-browser: validated in IE7/IE8, Firefox 3.5, Safari 4.0 and Google Chrome (the initial code was IE only).

Advertisement