A couple of useful jQuery plugins

    Wrote a couple of jQuery plugins to make layout and coding a bit easier.

    Perhaps they will be useful to someone. Their code is inspired by posts found on the Internet, and then, due to their frequent use, is designed as plugins.

    The first is jquery.outlinefix.js . Used to remove annoying frames from anchor links (for example, <a href="#"> link </a>).

    Problem:

    (links have a frame after clicks)


    I ’ll note right away that it can be solved using css (for example, css-tricks.com/removing-the-dotted-outline ), but not in IE6 and IE7, plus solving this problem through css robs the user of the ability to use the keyboard for navigation (he will not see which item is selected). And since there still remains a share of the solvent population and offices with such a browser, the problem must be solved fully.

    So, an example of using a plugin:
    $ ('a.left-menu-pic'). outlinefix ();


    Plugin source code:
    (function ($) {
    	$ .fn.outlinefix = function () {
    		return this.live ('mousedown', function (e) {
    			e.target.blur ();
    			e.target.hideFocus = true;
    			e.target.style.outline = 'none'
    		}). live ('mouseout', function (e) {
    			e.target.blur ();
    			e.target.hideFocus = false;
    			e.target.style.outline = null;
    		});
    	}
    }) (jQuery);


    The second is jquery.parentn.js . Used to select the parent element several levels higher than the current one. I really didn’t like constructions like parent (). Parent (). Parent () and wanted to describe it somehow more succinctly, I found the parentn () function code in the jquery site in the comments - but it didn’t work, I made it workable and designed it in plugin so that you can easily connect to your projects.

    Usage example:
    $ ('a.left-menu-link'). each (function () {
    	$ (this) .hover (function () {
    		$ (this) .parentn (2) .find ("td: first a.left-menu-pic"). css ("background-position", "0 -59px");
    	},
    	function () {
    		$ (this) .parentn (2) .find ("td: first a.left-menu-pic"). css ("background-position", "0 0");
    	});
    });


    Plugin source code:
    (function ($) {
    	$ .fn.parentn = function (n) {
    		var $ target = $ (this [0]);
    		for (var i = 0; i <n && $ target; i ++) {
    			$ target = $ target.parent ();
    		}
    		return $ target;
    	}
    }) (jQuery);


    Bonus
    Often, plugins are connected right in the head of the page and produce a bunch of requests to the web server, which is irrational. It would be logical to combine javascripts into one and be passed through them by some compressor, for example, YUICompressor.

    I use an anti-script for css and js compression based on a script by Sergey Chikuyenko from Technogret on the website of Artemy Lebedev Studio :

    www.everfall.com/paste/id.php?v5fxzfpdom72

    To adapt the script for your needs, just change the file names, and also indicate the correct path to the .jar file of YUICompressor, and remember to put an ant-task .jar file for YUICompressor next to it along the way - YUIAnt.jar .

    Also popular now: