1: The folding panel can separate the contents of different categories in different panels, these panels are stacked on top of the page, and users can expand the Panel by clicking the titles of each panel to view the contents of the panel.
At the same time, the hidden other panels will be automatically collapsed
$ (selector). accordion (options);
Options can be selected by the following properties:
disabled, active, animated, Autoheight, Clearstyle, collapsible, event, Fillspace, header, icons, navigation, Navigat Ionfilter
Simple example:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>accordion autoheight</title>
<link rel= "stylesheet" href= "Themes/base/jquery.ui.all.css" >
<script src= "Js/jquery-1.4.2.min.js" ></script>
<script src= "Js/jquery.ui.core.js" ></script>
<script src= "Js/jquery.ui.widget.js" ></script>
<script src= "Js/jquery.ui.accordion.js" ></script>
<script>
$ (function () {
$ ("#accordion"). Accordion ({
Autoheight:false
});
});
</script>
<style type= "Text/css" >
#accordion h3{font-size:13px; font-weight:700;}
#accordion >div{font-size:12px;}
</style>
<body>
<div id= "Accordion" >
<div>
This is a bit less content <br/>
</div>
<div>
It's a long piece of content <br/> It's a long story <br/>
It's a long piece of content <br/> It's a long story <br/>
It's a long piece of content <br/> It's a long story <br/>
It's a long piece of content <br/> It's a long story <br/>
</div>
</div>
<div style= "margin:8px 0; padding:10px; height:50px; Border:solid 1px #aaa; " >
This is another module that will change position as the size of the folding panel
</div>
</body>
Effect Chart:
2: Custom collapse Panel icon
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>accordion icon</title>
<link rel= "stylesheet" href= "Themes/base/jquery.ui.all.css" >
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.core.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.widget.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.accordion.js" ></script>
<script>
$ (document). Ready (function () {
var Triangle_icon = {
Header: "Ui-icon-triangle-1-e",
headerselected: "Ui-icon-triangle-1-s"
};
var Circle_arrow_icon = {
Header: "Ui-icon-circle-arrow-e",
headerselected: "Ui-icon-circle-arrow-s"
};
/* Initialize the folding panel * *
$ (' #accordion '). accordion ();
$ ("#toggle"). Toggle (function () {
$ ("#accordion"). Accordion ("option", "Icons", Circle_arrow_icon);
}, function () {
$ ("#accordion"). Accordion ("option", "Icons", Triangle_icon);
});
});
</script>
<style type= "Text/css" >
body{padding:30px;}
#accordion h3{font-size:13px; font-weight:700;}
#accordion >div{font-size:12px;}
</style>
<body>
<div style= "width:220px; margin:10px 0; " >
<div id= "Accordion" >
<div>
This is a piece of content <br/>
</div>
<div>
This is a piece of content <br/>
</div>
</div>
</div>
<input id= "Toggle" value= "Toggle Icon" type= "button"/>
</body>
Program Effect Chart:
3: The folding panel that can customize the arrangement order
The folding panel can be used as the main panel for categorized items because, in practice, users often want to be able to customize the position of the panel
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>AccordionSortable</title>
<link rel= "stylesheet" type= "Text/css" href= "Themes/base/jquery.ui.all.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.core.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.widget.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.mouse.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.sortable.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.accordion.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#accordion")
. accordion ({
Header: "> Div > h4"//Specify the H4 element in the DIV tag under the Panel container
})
. sortable (); You can encapsulate it as a sortable control
});
</script>
<style>
body{padding:30px;}
#accordion {font-size:12px;}
#accordion >div>h3{font-size:13px; font-weight:700;}
</style>
<body>
<div style= "width:300px; ">
<div id= "Accordion" >
<div>
<div>
This is a piece of content <br/>
</div>
</div>
<div>
<div>
This is a piece of content <br/>
</div>
</div>
<div>
<div>
This is a piece of content <br/>
</div>
</div>
</div>
</div>
</body>
4: The method of folding the panel
Destroy, disable, enable, option, widget, activate, resize
$ (' #accordion '). Accordion ("Activate", 2);
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta charset= "GBK" >
<title>accordion resize</title>
<link rel= "stylesheet" href= "Themes/base/jquery.ui.all.css" >
<script src= "Js/jquery-1.4.2.min.js" ></script>
<script src= "Js/jquery.ui.core.js" ></script>
<script src= "Js/jquery.ui.widget.js" ></script>
<script src= "Js/jquery.ui.mouse.js" ></script>
<script src= "Js/jquery.ui.resizable.js" ></script>
<script src= "Js/jquery.ui.accordion.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#accordion"). Accordion ({
Fillspace:true/* Set to automatically populate the parent element space * *
});
/* Set the container to be resizable,
The minimum height is 150,
And the resize method of the folding panel is called when the size is changed * *
$ ("#container"). Resizable ({
minheight:150,
Resize:function () {
$ ("#accordion"). Accordion ("resize");
}
});
});
</script>
<style type= "Text/css" >
#accordion h3{font-size:13px; font-weight:700;}
#accordion >div{font-size:12px;}
#container {padding:10px; width:300px; height:180px;}
</style>
<body>
<!--container--> for folding surface analysis
<div id= "Container" class= "Ui-widget-content" >
<!--folding surface analysis. H3 is the panel title in its child elements, and the DIV is the panel body-->
<div id= "Accordion" >
<div>
This is the first piece of content <br/>
<ul>
<li> list items 1</li><li> list items 2</li><li> list items 3</li>
</ul>
</div>
<div>
This is the second paragraph <br/> This is the second section of the content <br/>
</div>
<div>
This is the third paragraph <br/> This is the third paragraph <br/> This is the third paragraph <br
</div>
</div>
<!--this span marker will display a drag handle-->
<span class= "Ui-icon ui-icon-grip-dotted-horizontal" style= "margin:2px auto;" ></span>
</div>
<div style= "margin:8px 0; padding:10px; width:300px; height:50px; Border:solid 1px #aaa; " >
This is another module that will change position as the size of the folding panel container
</div>
</body>
Effect Chart:
The preceding code first initializes the accordion to a component that can automatically populate the parent element, and then sets the container to automatically resize and change the container control size Si cho The resize method of the accordion.
Finally implement the effect of resizing together
5: Folding Panel Events
Change and Changestart Events
Copy Code code as follows:
$ ("#accordion"). Accordion ({
Change:function (event, UI) {
},
Changestart:function (event, UI) {
}
})
*event: Triggered Event object
*ui: View Object, there are 4 properties, that is, Newheader, which represents the current panel title; Oldheader, which represents the title of the previous panel, Newcontent: Represents the contents of the current panel; Oldcontent, which represents the contents of the previous panel,
These are the jquery objects that are returned.
