Ben Dewey – Leveraging .NET for Appealing UIs

Hey all, its been a while since my last post.  This just a simple little format currency plugin that I built a while back.  Hope everyone enjoys it.

About the Plugin

The plugin, called the FormatCurrency Plugin, requires the jQuery core file and a single javascript file, jquery.formatCurrency.js. A demo is available on my prorfolio website. The plugin was designed with the following features.

• Formats the selector’s value to a formatted version of the currency.

Options

useHtml – if true this value uses the html() attribute to get and set the value for the currency, otherwise the plugin will use the val() attribute.  The default is false.

symbol – The dollar sign to be used when formatting the currency. The default is $.

Downloads

jQuery Core (plugin built on jquery-1.2.6.js)

jquery.formatCurrency.js

jQueryFormatCurrencySample.zip

Using the Plugin

In order to use this plugin create an html page and attached the jQuery core javascript file and the jquery.formatCurrency.js file.  In this example I will be formatting the currency on a button click.  Although another popular formatting technique would be to set the currency on lost focus (the sample download and demo contain both options).

Html

<div class="sample">
<h3>Formatting Using Button Click</h3>
<input type="textbox" id="currencyField" value="$1,220.00" />
     <input type="button" id="currencyButton" value="Convert" /></div>

Javascript

    $(document).ready(function()
    {
        $('#currencyButton').click(function()
        {
            $('#currencyField').formatCurrency();
        });
    });

Known Issues

At the moment their are no known issues.  The plugin has been tested successfully in Windows IE 8 Beta, Mozilla, and Google Chrome.

After listening to the .NET Rocks segment with Rick Strahl, I instantly found areas of my current project that could utilize jQuery. At the time I was building a forms control that utilized a LayoutTemplate and a DataPager similar to the new ListView Control. I decided to rewrite my rollover images using jQuery and found 3 main advantages in this project alone.

• Almost half the code in JavaScript and C#
• Allowed me to fade the images on rollover without having to write custom fading javascript.
• I could use css style selectors instead of capturing and registering the controls ClientID on PreRender.

About the Plugin

The plugin, called the RollOverImageLink Plugin, requires the jQuery core file and a single javascript file, jquery.rollOverImageLink.js. A demo is available on my prorfolio website. The plugin was designed with the following features.

• Images are all preloaded.
• Fading in/out of the OverImage on rollover
• Disabled Image when image is in disabled state

Downloads

jQuery Core (plugin built on jquery-1.2.6.js)

jquery.rollOverImageLink.js

jQueryRolloverImageSample.zip

Using the Plugin

In order to use this plugin create an html page and attached the jQuery core javascript file and the jquery.rollOverImageLink.js file. The rollover image link is constructed with one hyperlink and 3 images.

<a href="#" title="Back" class="rollOverImageLink" disabled="disabled"><img
  src="images/back_over.png" class="overImage" /><img
  src="images/back.png" class="baseImage" /><img
  src="images/back_disabled.png" class="disabledImage" /></a>

<a href="#" title="Next" class="rollOverImageLink"><img
  src="images/next_over.png" class="overImage" /><img
  src="images/next.png" class="baseImage" /><img
  src="images/next_disabled.png" class="disabledImage" /></a>

You will also need the following CSS code to set the initial state of the images

.rollOverImageLink img {
  border:0px; }

.rollOverImageLink .overImage, .rollOverImageLink .disabledImage {
  display:none; }

.rollOverImageLink .overImage {
  position:absolute; }

Known Issues

Below is a list of known issues with this plugin. Please post any thoughts or solutions to these issues in the comments section

• Requires the overloaded disabled and enabled selectors to work with Firefox
• Queues a fade loop when a user repeatedly hovers over and off of the link. I tried using the stop method on the animation, but it was stopping the fade feature for the remaining lifecycle of the page.
• Disabled Images are set in the document ready state. Dynamically changing the disabled state of the link won’t change the image. In theory if its only loading the disabled image from load you would really need to preload the remaining images, but I plan to add this feature in future versions.
• Disabled Images are set in the document ready state. Dynamically changing the disabled state of the link won’t change the image. In theory if its only loading the disabled image from load you would really need to preload the remaining images, but I plan to add this feature in future versions.