• 技术文章 >web前端 >js教程

    jquery 简单图片导航插件jquery.imgNav.js_jquery

    2016-05-16 18:32:06原创428
    熟悉jquery的家伙大概花个5到10分钟就可以搞定了吧。由于这种导 航效果比较通用,LEVIN顺手写了个 jquery插件~

    如果你的网站也需要类似的效果,大可拿去直接用或者扩展下:)

    如果你也想尝试将某些可重用功能封 装成jquery插件,别忘了看看一般的jquery插件开发过程,另外还有偶的一个jquery插件模板。

    复制代码 代码如下:

    ;(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);
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 图片导航
    上一篇:JQuery 插件模板 制作jquery插件的朋友可以参考下_jquery 下一篇:js实现的日期操作类DateTime函数代码_javascript技巧
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 总结分享10个JavaScript代码优化小技巧• 一文了解JavaScript栈• JavaScript字典与集合(总结分享)• 深入理解JavaScript内存管理和GC算法• Node.js怎么实现分片上传?方法介绍
    1/1

    PHP中文网