Home > Web Front-end > JS Tutorial > body text

jquery simple image navigation plug-in jquery.imgNav.js_jquery

WBOY
Release: 2016-05-16 18:32:06
Original
916 people have browsed it

Those who are familiar with jquery can probably do it in 5 to 10 minutes. Since this kind of navigation effect is relatively common, LEVIN conveniently wrote a jquery plug-in~

If your website also needs similar effects, you can use it directly or extend it:)

If You may also want to try to encapsulate some reusable functions into jquery plug-ins. Don't forget to take a look at the general jquery plug-in development process, and there is also a jquery plug-in template.

Copy code The code is as follows:

;(function($) {
// Private functions.
var p = {};
p.showC = function(opts) {
///show content of a specified navigation
p._clist.hide().filter(opts.filter).show();
}; //showNav
p.onNav = function(evt) {
p._i=$(this) ;
p._alist.removeClass(p._opts.on);
p._i.addClass(p._opts.on);
p.showC({ filter:p._i.attr(" href") });
return false;
}; //onClick
//main plugin body
$.fn.imgNav = function(options) {
// Set the options .
options = $.extend({}, $.fn.imgNav.defaults, options);
p._opts = options;
// Go through the matched elements and return the jQuery object.
return this.each(function() {
p._alist = $("a", this);
p._clist = $(p._opts.navc);
p._alist. click(p.onNav);
});
};
// Public defaults.
$.fn.imgNav.defaults = {
on: 'on',
off: 'off',
navc: '.navc'//nav content selector
};
})(jQuery);
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template