jQuery自定义插件

最新推荐文章于 2025-08-09 20:51:19 发布

转载最新推荐文章于 2025-08-09 20:51:19 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/686991/blog/348335

文章标签：

#javascript #ViewUI

本文通过具体示例介绍了如何使用jQuery开发三个实用插件：手风琴效果、表格行颜色变化及确认操作对话框。这些插件展示了jQuery简化DOM操作的能力，并提供了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

/**1.毕包*/
(function($){
    /**2.插件*/
    $.fn.myaccordion=function(opts){
        var settings=$.extend({
                selectedClz:"navSelected",
                titleTagName:"h3"
        },opts||{});
        
        var titleNode=$(this).find("ul>"+settings.titleTagName);
        var selectedNode=$(this).find("ul."+settings.selectedClz+">"
                +settings.titleTagName);
        titleNode.css("cursor","pointer");
        titleNode.nextAll().css("display","none");
        selectedNode.nextAll().css("display","block");
        
        titleNode.click(function(){
            var checked=$(this).parent().hasClass(settings.selectedClz);
            if(checked){
                $(this).parent().removeClass(settings.selectedClz);
                //$(this).nextAll().css("display","none");
                $(this).nextAll().slideUp();
            }else{
                $(this).parent().addClass(settings.selectedClz);
                //$(this).nextAll().css("display","block");
                $(this).nextAll().slideDown();
            }
        });
    };
    
    $.fn.trColorChange=function(opts){
        var settings=$.extend({
            overClz:"trMouseover",
            evenClz:"trEvenColor"
        },opts||{});
        $(this).find("tbody tr:even").addClass(settings.evenClz);
        $(this).find("tbody tr").on("mouseenter mouseleave",function(){
            $(this).toggleClass(settings.overClz);
        });
    };
    
    $.fn.confirmOperator=function(opts){
        var settings=$.extend({
            msg:"该操作不可逆,请确认操作!",
            eventName:"click"
        },opts||{});
        
        $(this).on(settings.eventName,function(event){
            if(!confirm(settings.msg)){
                //取消,将事件阻止
                event.preventDefault();
            }
        });
        
    };
})(jQuery)

外部调用
(function($){
    $(function(){
        $("#listTable").trColorChange();
        $("a.delete").confirmOperator();
    });
})(jQuery)

转载于:https://my.oschina.net/686991/blog/348335