Tag Archives: jQuery plugins

Soften Your Look with jQuery

As mentioned in a previous blog post, Microsoft made two commitments when it decided to embrace jQuery as its one and only client-side JavaScript library. First, they were going to replace their Ajax Library with jQuery in every appropriate ASP.NET Web technology, including both Web Forms and MVC applications. Second, they would contribute plugins and other extensions to the jQuery Library, primarily by adapting their work on enhancements for the Ajax Library to the jQuery Library. These contributions might end up in the core jQuery Library, as official jQuery extensions, or, as a last resort, freely distributed, open source extensions.

In this article, we’ll discuss one such extension.

Creating Rounded Corners

rounded corners in AJAX

Putting rounded corners on elements is a desirable feature to soften the look of a Web page. But it is surprisingly hard to do well across all browsers, both because there are so many ways to accomplish the effect and so many variations among browsers. Web designers have long resorted to using images, even though CSS and other Web technologies support rounded corners. ACT has a nice RoundedCorners extender that applies the effect to HTML elements, letting you vary the appearance by changing the radius of the corner, which corners are rounded, and other options, giving a lot of flexibility for creating a nice page appearance. The Figure below shows the RoundedCorners extender demo from the ACT sample pages, with options set to round the upper right and lower left corners of the image.

Rounded corners seems to have been an area of particular creativity for jQuery plugin developers, probably because of the cross-browser issues and the lack of a single right way to achieve the effect. The result is a lot of plugins that let you get as creative as you want. We chose one of the simpler plugins to use on the Toolkit page, shown in the Figure below. The first box is a plain, square div element and the second has rounded bottom left and upper right corners using the Cornerz plugin for “bullet proof corners.” The plugin has a few options such as to set the border and background color, set the radius, and select which corners to round. But overall it is a pretty simple plugin that does its job quite well.

rounding the corners of a div element

The page uses the following HTML code for the Rounded Corners section. It is very simple markup, using a couple of div elements that each contain a p and cite elements.

The page uses a twain class to style the div elements, setting padding and the background color. Padding is important for most rounded corner plugins, providing room around the text to round the corner. You could have a border of a different color—as is commented out in the style below—and the border would be rounded as well.

Then the page includes a single JavaScript statement to round the corners, shown in the following code. It calls the cornerz method, passing two optional arguments. fixIE attempts to overcome a problem with some inline elements in Internet Explorer due to a wrong reporting of width, and the second specifies that only the top right (tr) and bottom left (bl) corners should be rounded.


ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.

jQuery Plugins, Easy as 1,2,3

114-jquery-plugin

Despite the usefulness and comprehensiveness of jQuery, it doesn’t do everything it could to make your JavaScript coding life simpler. Frankly, you wouldn’t want it to do everything! It doesn’t even pretend to be comprehensive, if only because that would make the size of the core library enormous. The bigger the library is, the less likely that it will see wide use because it would have such a big impact on Web page performance and bandwidth, even if the browser effectively caches the library after its first use.

That’s why jQuery includes rich support for extensibility. You can create your own plugins, utility methods, and other features that closely integrate with jQuery itself. If jQuery doesn’t do something you need, or doesn’t do it exactly as you need, always start by doing a search for jQuery extensions online to see if anyone else has already solved the problem. If not, you can write your own extension and use it in your Web pages, and share it with the world if you’re so inclined. It is not very hard to write jQuery plugins.

Plugin Conventions

The jQuery community has created an enormous number of jQuery plugins, and over the last few years a few general guidelines for plugin development have emerged. You should always strive to follow these guidelines, because by doing so your plugins will integrate into jQuery effectively and will have the look and feel of jQuery, making your plugins easier to use.

  • Always name your plugin file using the format jquery.myPluginName[-version].js. The major and minor version numbers are optional, but by using this format for your plugins you follow the general convention, make it easy to find your plugin in a set of script files, and reduce the chance that you have name collisions.
  • Choose the name for your plugin carefully. If it becomes popular, you’ll not want to share a name with other plugins. Some authors include a subprefix after “jquery” in the name. So, if AppDev were to begin producing and sharing jQuery plugins, we might name our files jquery.appdev.myPluginName[-version].js. That would reduce the chance of filename collisions. And name the plugin method carefully to avoid collisions with other jQuery methods and plugins others may use in their Web pages.
  • Plugins can either return a scalar value or the matched set so that you can chain jQuery methods together. If it makes sense for the plugin, you should always return this to support chaining.
  • Always write your plugin so that it is usable with both the full jQuery method name and its $ alias.
  • Avoid a long list of arguments for your plugin. It’s fine to allow lots of options, almost mandatory, but limit yourself to a small number of arguments and make one of them options, through which the user can pass multiple values. This will mimic how most jQuery Library methods work.

It would be well worth your time exploring various popular jQuery plugins available and learn the best practices and conventions that other developers are using. Even if you don’t share your plugins with the world, you can and should take advantage of the things that other people have found that work.

ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.

jQuery: Sticking to Commitments

Microsoft made two commitments when it decided to embrace jQuery as its one and only client-side JavaScript library. First, they were going to replace their Ajax Library with jQuery in every appropriate ASP.NET Web technology, including both Web Forms and MVC applications. Second, they would contribute plugins and other extensions to the jQuery Library, primarily by adapting their work on enhancements for the Ajax Library to the jQuery Library. These contributions might end up in the core jQuery Library, as official jQuery extensions, or, as a last resort, freely distributed, open source extensions. We discuss one such extension, watermarking, below.

Watermarking

Watermarking is a cool, useful, and interactive way to prompt a user for the information that should go into a text box on a form. When the input element is empty, the watermark text appears, usually grayed out. When the user enters the field, the watermark text disappears and whatever the user types appears in the field. You can determine the styling of the watermarked element both when the watermark text appears and when the user text appears.

The Ajax Control Toolkit has a nice TextBoxWatermark extender that you can attach to a server-side ASP.NET TextBox control. Figure 1 shows the TextBoxWatermark demo from the ACT sample pages.

url

Figure 1. The ACT TextBoxWatermark demo.

There are many watermark jQuery plugins, but one of the simplest and easiest to use is the TinyWatermark jQuery plugin. You can use it with any input or text area element by specifying the watermark CSS class and the text you want to display when the input element is empty. You have the option of supplying the watermark text either as the value of the title attribute of the element or as the second argument to the watermark method. When the user submits the form, the plugin removes the watermark text. The jquery.tinywatermark- 3.1.0.js plugin file is a mere 623 bytes, and that’s not even minified or compressed.

Figure 2 shows watermarking in the sample page. The user has moved to the first text box and entered text, so the watermark text is removed and the text box has its default appearance. The other two text boxes show the watermark text and styling.

Screen Shot 2012-10-19 at 9.28.36 AM

Figure 2. Watermarking in action in the sample page.

The following HTML creates the three text boxes on this part of the page. Notice that the first two text boxes have a title attribute with the watermark text, while the third will have the text set programmatically. The first two are assigned the watermarked class as the means to identify them to the plugin that they are to have watermarked text inserted. The last one is assigned to the watermarkedAlt class to let the code treat it differently, as you’ll see in a moment.

 

The plugin uses the following CSS style to change the appearance of the elements that are watermarked. It merely sets the background color to #FFFF99, which is officially Pale Canary Yellow, and changes the font color to a medium gray.

 

The crux of the watermarking code is the following two statements, contained within the jQuery ready method so they’ll fire only after the page’s DOM is loaded in memory. The first statement watermarks the name and email text boxes on the page, using the title attribute’s value as the watermark text. The second statement watermarks the third text box, providing the watermark text as the second argument to the method. Both statements tell the watermark method to use the watermark CSS style to display the input element and watermark text.

We usually find that the first form of the watermark statement, using the title attribute for the watermark text, to be more useful and practical when there are more than a couple of elements on the page you want to watermark. That way the watermark text is with the element rather than separated in the page’s script code. But you’re free to use whatever form works best for you.

You can use whatever class name you want to identify the input elements to be watermarked, as well as the name of the CSS style used to format the elements with watermark text. The plugin is surprisingly functional for such a small size!

ldn-expertdkielyThis post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010 course written by expert Don Kiely.