[Translate] extending jquery–2.2 A Simple Plugin

2.2 A simple plug-in example

The JQuery plugin can do anything that has been proven by a vast array of third-party plugins. Small to affect only one element, large to change the appearance and behavior of multiple elements, JQuery's various functions and so on you to expand.

2.2.1 Placeholder Text Plugin

In order to maintain the space of a form, often the description of a field is omitted and replaced by a placeholder text. If this field is empty, the placeholder text will be displayed again. For a better user experience, this placeholder text is often grayed out to differentiate the real content. This feature has a more generic name called watermark (watermark).

Placeholder text can be assigned when the plugin is initialized, but it is best to allow multiple text boxes to be assigned at the same time. Therefore, the title property of input is the location of the ideal placeholder text value. When the field gets the focus, you need to remove the placeholder text and remove the gray style. Accordingly, when the field loses focus, if the value is still blank, the original text and style need to be restored. For better extensibility, the style of the field needs to be specified by the CSS and can be easily overridden by the user of the plugin.

2.2.2 Watermark Plugin Code

Because this plug-in acts on the elements of the page, it is a collection plugin. So you need to extend $.fn

$.fn.watermark =function(options) {//set OptionsOptoins = $.extend ({watermarkclass:' Watermark '}, Options | |    {}); //when field is focusedreturn This. Focus (function() {        varfield = $ ( This); if(field.val () = = Field.attr (' title ') {field.val ("');        Removeclass (Options.watermarkclass); }}). blur (function() {        varfield = $ ( This); if(field.val () = ="') {field.val (Field.attr (' title ') . addclass (Options.watermarkclass); }}). blur ();};

The plugin extends $.fn, declaring that $.fn.watermark makes the plug-in and the jquery selector seamlessly integrated. Defines the default value for the options parameter,watermarkclass and value watermark. This property is allowed to be overridden by the Extend method. || {} is used to ensure that default values are used when options are not available. To allow chained invocation of the plugin and other plugins, a key jquery idea is that function must return the current collection. Since the default built-in jquery method has already implemented this functionality, it is only possible to return the built-in method return values directly. . Blur is an example of chained invocation. The last trigger Blur assigns the initial value to the field.

This simple collection plugin gives you a first impression. The next article will explain some of the best practice ideas for jquery plugin development.

2.3 Summary

JQuery developers are visionary and offer a lot of points to expand. This chapter gives you a first taste of the concept of jquery development with a simple example.

For more information, please continue to watch the next wave ...