I’ve started blogging examples of how to replace Microsoft AJAX and the Ajax Control Toolkit usages with jQuery based equivalents.

In this post I showed how to replace the ACT’s Rounded Corner Extender with jQuery and in this one I demonstrated how to replace the Drop Shadow control extender with jQuery.

But lots of folks want to do both at the same time like this.

For this I’m going to use yet another jQuery Plugin – Liquid Canvas.

The code below also demonstrates two different styles of applying the effect. One targets elements with a specific ID and the other targets any element that uses a particular CSS class.



<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs'
		 Inherits='_Default' %>
<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <!--[if IE]>
    <SCRIPT type=text/javascript
    src='Styless/excanvas.js'></SCRIPT>
    <![endif]-->
    <script src='Scripts/excanvas.js' type='text/javascript'></script>
    <script src='Scripts/liquid-canvas.js' type='text/javascript'></script>
    <script src='Scripts/liquid-canvas-plugins.js' type='text/javascript'>
	</script>
    <SCRIPT type=text/javascript>
      $(window).load(function() {
          $('#Panel1').liquidCanvas(
            '[shadow fill] => roundedRect{radius:10}');
          $('.rounded').liquidCanvas(
            '[shadow fill] => roundedRect{radius:10}');
      });
    </SCRIPT>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
     ContentPlaceHolderID='MainContent'>
    <h2>Welcome to ASP.NET!</h2>
    <br /><br />
    <asp:Panel ID='Panel1' runat='server' ClientIDMode='Static' 
	                                      style='width: 400px;'>
      <p>&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Developer Links</p>
	  <ol>
	    <li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 4</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 5</a>
		</li>
      </ol>
    </asp:Panel>
    <br /><br />
    <asp:Panel ID='Panel2' runat='server' ClientIDMode='Static' 
	           style='width: 400px;'
               class='rounded'>
      <p>&amp;nbsp;&amp;nbsp;&amp;nbsp;Some Developer Links</p>
	  <ol>
	    <li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 4</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 5</a>
		</li>
      </ol>
    </asp:Panel>
</asp:Content>

The previous posts demonstrate perfectly viable ways to achieve a specific effect, in concert these posts also demonstrate that jQuery has a broad and growing eccosystem and that there are multiple ways to accomplish any given task or effect.

I highly erncourage you to dig deeper into Liquid Canvas as it ofer FAR more functionality than presented in this post.