Home > Developer > JavaScript

In-depth analysis of the folding panel of jQuery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1: The folding panel can place different types of content in different panels.These panels are stacked on the page. You can click the titles of each panel to expand the Panel and view the panel content,
At the same time, other panels are automatically collapsed and hidden.
$ (Selector). accordion (options );
Options has the following attributes:
Disabled, active, animated, autoHeight, clearStyle, collapsible, event, fillSpace, header, icons, navigation, navigationFilter
Simple Example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>
<Body>
<Div id = "accordion">
<H3> <a href = "#"> Title 1 </a> <Div>
This is a relatively small piece of content <br/>
</Div>
<H3> <a href = "#"> Title 2 </a> <Div>
This is a long piece of content <br/>
This is a long piece of content <br/>
This is a long piece of content <br/>
This is a long piece of content <br/>
</Div>
</Div>
<Div style = "margin: 8px 0; padding: 10px; height: 50px; border: solid 1px # aaa;">
This is another module that will change its position as the Panel is folded
</Div>
</Body>
</Html>

:


2: Custom collapse panel icon
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>

<Body>
<Div style = "width: 220px; margin: 10px 0;">
<Div id = "accordion">
<H3> <a href = "#"> Title 1 </a> <Div>
This is a piece of content <br/>
</Div>
<H3> <a href = "#"> Title 2 </a> <Div>
This is a piece of content <br/>
</Div>
</Div>
</Div>
<Input id = "toggle" value = "Switch icon" type = "button"/>
</Body>
</Html>

Program:
 
3: Fold panel that can customize the order of Arrangement
The folding panel can be used as the main panel of the classification project. Because of Operation habits, users usually want to customize the position of the Panel.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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 title as the h4 element in the div label of the Panel container
})
. Sortable (); // You can encapsulate it as a sorted control.
});
</Script>
<Style>
Body {padding: 30px ;}
# Accordion {font-size: 12px ;}
# Accordion> div> h3 {font-size: 13px; font-weight: 700 ;}
</Style>
</Head>
<Body>
<Div style = "width: 300px;">
<Div id = "accordion">
<Div>
<H4> <a href = "#"> Title 1 </a> <Div>
This is a piece of content <br/>
</Div>
</Div>
<Div>
<H4> <a href = "#"> Title 2 </a> <Div>
This is a piece of content <br/>
</Div>
</Div>
<Div>
<H4> <a href = "#"> Title 3 </a> <Div>
This is a piece of content <br/>
</Div>
</Div>
</Div>
</Div>
</Body>
</Html>


4: how to fold the Panel
Destroy, disable, enable, option, widget, activate, resize
$ ('# Accordion'). accordion ("activate", 2 );
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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 fill the parent element space */
});

/* Set the container to change the size,
The minimum height is 150,
Call the resize method of the collapsed panel 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>
</Head>
<Body>
<! -- Folding plane analysis container -->
<Div id = "container" class = "ui-widget-content">
<! -- Analyze the folding surface. In its child elements, h3 is the panel title, and div is the panel subject -->
<Div id = "accordion">
<H3> <a href = "#"> Title 1 </a> <Div>
This is the first article. <br/>
<Ul>
<Li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li>
</Ul>
</Div>
<H3> <a href = "#"> Title 2 </a> <Div>
This is the second content <br/>
</Div>
<H3> <a href = "#"> Title 3 </a> <Div>
This is the third content <br/>
</Div>
</Div>

<! -- This span flag will display a drag handle -->
<Span class = "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 its position as the container size of the collapsed panel is
</Div>
</Body>
</Html>

:


The code above first initializes the folding panel as a component that can automatically populate the parent element, then sets the container to automatically adjust the size, and calls the resize method of the folding panel when the container control size changes,
Finally, we can adjust the size together.
5: Collapse panel events
Change and changestart events
Copy codeThe Code is as follows:
$ ("# Accordion"). accordion ({
Change: function (event, ui ){
},
Changestart: function (event, ui ){
}
})

* Event: the event object that is triggered.
* Ui: view objectThere are four attributes: newHeader, indicating the title of the current Panel; oldHeader, indicating the title of the previous Panel; newContent: indicating the content of the current Panel; oldContent, indicating the content of the previous panel,
All of these returned jQuery objects

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
control panel of website get number of rows in table jquery nist certificate of analysis analysis of algorithms book opposite of append jquery swot analysis of ice cream list of data analysis software

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More