自己动手写 accordion 抽屉控件

//EXTUI 控件核心库
(function ($) {


    $.extUI = {};

    $.extUI.controls = {};
    //组件类
    window.Compent = $.extUI.Compent = function (controlname,options) {

        Compent.preRender();

        Compent.render();

        Compent.rended();
        if ($.extUI.controls[controlname]) 
        {
            $.extUI.controls[controlname]["preRender"].call(this,options);
            $.extUI.controls[controlname]["render"].call(this,options);
            $.extUI.controls[controlname]["rended"].call(this,options);
        }

    };

    $.extend($.extUI.Compent, {

        preRender: function () {
        },
        render: function () {
        },
        rended: function () {
        }

    });

 

})(jQuery);

 

 

(function ($) {


    $.fn.extend({

        accordion: function (options) {

            //调用组件组件基类进行初始化
            $.extUI.Compent.call(this, "accordion",options);
        
        }
    });
    //

    $.extUI.controls.accordion = function (options) {

        $.extUI.controls.accordion.preRender();
        $.extUI.controls.accordion.render(options);
        $.extUI.controls.accordion.rended();


    }

    $.extend($.extUI.controls.accordion, {

        render: function (options) {

            //当前accord面板元素
            var rootaccordion = this;


            if (!$(rootaccordion).hasClass("l-accordion-panel"))
                $(rootaccordion).addClass("l-accordion-panel");
            var selectedindex = 0;

            if ($("> div[1selected=true]", rootaccordion).length > 0)
                selectedindex = $("> div[1select=true]", rootaccordion).index();

            $(">div", rootaccordion).each(function (index, item) {

                var header = $('<div class="l-accordion-header"><div class="l-accordion-toggle"></div><div class="l-accordion-header-inner"></div></div>');
                //添加头部样式
                if (index == selectedindex)
                    $(".l-accordion-toggle", header).addClass("l-accordion-toggle-open");
                else
                    $(".l-accordion-toggle", header).addClass("l-accordion-toggle-close");
                $(item).before(header);
                if ($(item).attr("title")) {
                    $(".l-accordion-header-inner", header).html($(item).attr("title"));
                    $(item).attr("title", "");
                }
                //没有定义内容样式则加入
                if (!$(item).hasClass("l-accordion-content"))
                    $(item).addClass("l-accordion-content");
                    
//                 $("[class*=l-accordion-toggle-close]", header).each(function(){
//                   
//                    $(this).next(".l-accordion-content").hide();
//                 
//                 })
                 
                if ($("[class*=l-accordion-toggle-close]", header).length>0)
                      $(item).hide();
              
            });//end each
            
            if(options){
               
                 if(options.height){
                   rootaccordion.height(options.height);
                 }
            }
           
            $(".l-accordion-header",rootaccordion).hover(function ()
            {
                $(this).addClass("l-accordion-header-over");
            }, function ()
            {
                $(this).removeClass("l-accordion-header-over");
            });
            
            $(".l-accordion-toggle",rootaccordion).hover(function(){
                 if($(this).hasClass("l-accordion-toggle-open"))
                      $(this).addClass("l-accordion-toggle-open-over");
                  if($(this).hasClass("l-accordion-toggle-close"))
                      $(this).addClass("l-accordion-toggle-close-over");
                
             
            },function(){
            
                  if($(this).hasClass("l-accordion-toggle-open"))
                      $(this).removeClass("l-accordion-toggle-open-over");
                  if($(this).hasClass("l-accordion-toggle-close"))
                      $(this).removeClass("l-accordion-toggle-close-over");
            });
            
            
          //点击菜单      
            $(">.l-accordion-header",rootaccordion).click(function(){
               
               
               var tiggerbtn=$(".l-accordion-toggle:first",this);
               //
               if(tiggerbtn.hasClass("l-accordion-toggle-open"))
               {
                   tiggerbtn.removeClass("l-accordion-toggle-close-over l-accordion-toggle-open-over")
                   .removeClass("l-accordion-toggle-open");
                   tiggerbtn.addClass("l-accordion-toggle-close");
                   $(this).next(".l-accordion-content").hide();
               }
               else{
                   tiggerbtn.removeClass("l-accordion-toggle-close-over l-accordion-toggle-open-over")
                   .removeClass("l-accordion-toggle-close");
                   tiggerbtn.addClass("l-accordion-toggle-open");
                   $(this).next(".l-accordion-content").show().siblings(".l-accordion-content:visible").hide();
               }
               
               
               
            });
            
            


        },
        preRender: function () {
        },
        rended: function () {
        }
    });

 

})(jQuery);

$(function(){

   $("[type=extui-accordion]").accordion();
});