Nhib.pdf + spring.net + jquery create a UI control library (MVC + webform). Initial Implementation of the accordion control (with code download)

The interface components are finally starting! Take the accordion control today, because its implementation is relatively simple. Haha

Preliminary Design:

It is not difficult to find out by observing, ACCordion generally adopts the following layout:

title

content 1

<Div class = "Sw-accordion-header">
<H2> <SPAN class = "icon"> icon </span> Title 2 </H2>
</Div>
<Div class = "Sw-accordion-content">
Content 2
</Div>
...................
</Div>

Based on the above, we will soon get our Configuration:

VaR accordionoptions =
{
Items :[
{Classname: "circle", title: "interface control", HTML: "interface control "},
{Classname: "circle", title: "form control", HTML: "Form Control "},
{Classname: "circle", title: "common layout", HTML: "common layout "}
],
Active: 0,
Parent: True // the width and height of the control are controlled by the parent. No autoheight
}

Our goal is:

$ ("# Sw-accordion"). Accordion (accordionoptions );

Let's look at the results directly: let everyone have a look

Main Implementation:

$. 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/>" example .html (item. Title). appendto (aheader );
Aicon = $ ("<SPAN/>"). addclass (item. classname). prependto (atitle );
Acontent = $ ("<DIV/>" pai.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;
}
});

This control is only a preliminary implementation, and we hope that you can optimize and expand it to make it easier for everyone to use. Download Code

Finally, do you want to be passionate? I hope you can discuss it ...... </>