NHibernate+spring.net+jquery打造UI控件库(mvc+webform两种实现) accordion控件的初步实现（附代码下载）

         界面组件篇终于开始啦！今天就拿accordion控件开刀吧，因为它的实现比较简单。呵呵

         初步设计:

         通过观察我们不难发现,accordion一般采取以下布局：

      <div class="sw-accordion">
           <div class="sw-accordion-header">
                <h2><span class="icon"></span>标题</h2>
          </div>
          <div class="sw-accordion-content" >
                内容1
         </div>

          <div class="sw-accordion-header">
                <h2><span class="icon">icon</span>标题2</h2>
          </div>
          <div class="sw-accordion-content" >
                内容2
         </div>
         ...................
     </div>

      根据上面，我们很快得到我们的配置：

       var accordionOptions =
            {
                items: [
                     { className: "circle", title: "界面控件", html: "界面控件" },
                     { className: "circle", title: "表单控件", html: "表单控件" },
                     { className: "circle", title: "常用布局", html: "常用布局" }
                   ],
                active:0,
                parent:true    //这里的意思是此控件的宽高度由父亲来控制,否autoHeight     
            }

     我们的目标是:

          $("#sw-accordion").accordion(accordionOptions);

       直接上效果吧:让大家过过目

     

  主要实现:      

  $.sw.accordion = Class({
        container: null,
        options: null,
        items: null,
        isRendered: false,
        initialize: function(container, options) {
            this.container = $(container);
            this.options = $.extend({}, $.sw.accordion.defaults, options);
            this.items = this.options.items;
            this.initComponent();
        },
        initComponent: function() {
            if (this.items.length > 0 && !this.isRendered) {
                $(this.container).addClass(this.options.className).empty();
                var me = this;
                var aheader, atitle, aicon, acontent;
                $(this.items).each(function(index, item) {
                    aheader = $("<div/>").addClass(me.options.headerClass).appendTo(me.container);
                    atitle = $("<h2/>").html(item.title).appendTo(aheader);
                    aicon = $("<span/>").addClass(item.className).prependTo(atitle);
                    acontent = $("<div/>").addClass(me.options.contentClass).html(item.html).appendTo(me.container);
                    aheader = atitle = aicon = acontent = null;
                });
                //set height
                if (this.options.parent) {

                    this.setHeight();
                }
                else (this.options.autoheight)
                {
                    var maxHeight = 0;
                    $("." + this.options.contentClass, this.container).each(function() {
                        maxHeight = Math.max(maxHeight, $(this).outerHeight());
                    }).height(maxHeight);
                }
                //set active
                $("." + this.options.headerClass, this.container).each(function(index, header) {
                    if (me.options.active != index) {
                        $(header).next().hide();
                    }
                    else {
                        $(header).find("h2").addClass(me.options.selectedClass);
                    }
                });
                //set event
                $("." + this.options.headerClass, this.container).each(function(index, header) {
                    $(this).click(function() {
                        $("." + me.options.contentClass, me.container).hide().parent().find("h2").removeClass(me.options.selectedClass);
                        $(this).find("h2").addClass(me.options.selectedClass);
                        $(this).next().show();
                    }).hoverClass(me.options.hoverClass);
                });
            }
        },
        setHeight: function() {
            var parentContainer = $(this.container).parent();
            var csize = Sw.Size.fromElement(parentContainer, 1);
            var hsize = Sw.Size.fromElement($("." + this.options.headerClass, this.container).first(), 2);
            var tempBody = $("." + this.options.headerClass, this.container).first();
            var borderH = ($(tempBody).outerHeight() - $(tempBody).height()) * this.items.length;
            var height = csize.height - hsize.height * this.items.length - borderH;
            var os = parentContainer.children().not(this.container);
            $.each(os, function(i, element) {
                height = height - $(element).outerHeight();
            });
            $("." + this.options.contentClass, this.container).height(height - 2);
            csize = hsize = tempBody = borderH = height = os = null;
        }
    });

    这个控件只是初步实现，同时也希望各位高手把它优化扩展，让大家用得更加方便。废话少说代码下载

   最后，大家来点激情好吗？我很希望大家能讨论讨论。。。。。。</>