Web site development and common plug jQuery summary (11) folding Akordeon

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The folding menu, can not use the plugin. If you use jQuery, the realization is relatively simple, we only need to define the folding menu style, and then use the jQuery fade gradually can. If we write their own folding menu, can be our own style and convenient. If we use the jQuery plugin, need to define the style according to the plug-in design, is actually modify the plugin Akordeon default styles. Here since writing the jQuery plugin, put the folding Akordeon included. Akordeon plug-in defines many fixed style, such as folding menu height width. When I tested, with simple modifications to the default style, custom style is still using coverage in a way. In fact, in project development, if the need to use this plug-in, can modify the Akordeon plugin with style.

A.Akordeon plug-in function

Display content in a folding way, not necessarily for navigation. Presentation in the official demo for non navigation function. In this case, is demonstrated by the navigation function. But the official instance may not fit the reality of the project.

The two official.Akordeon address

http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/,A description of the property in the official, in the demo is a simple description of the attributes of the application.

Three the use of.Akordeon method

1 file reference

<script src="jquery.min.js" type="text/javascript"></script>
<link href="jquery.akordeon.css" rel="stylesheet" type="text/css" />
<script src="jquery.akordeon.js" type="text/javascript"></script>

The use of 2 style. A simple modification of style, with demo such as height, width. Covering with color and font style. But the reality is not normal in ie8. Practical project, if the need to use the Akordeon, can modify the jquery.akordeon.css. This paper is to test, so just do a simple modification. The code style a bit more, so here is not posted. Are interested can look at “ the test file ”. The modified style:

3.js code . The JS code is very simple, using attribute also is the official, need to know can see the official documents. This example uses a code for the:

$(document).ready(function () {
    $('#buttons').akordeon({buttons: false});
    //The official offer of second demo, using attributes.
    //$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [2, 0, 1] });
});

4.html code . The Akordeon plug-in is mainly the use of ul to achieve folding menu. You can see “ test file”.

The test file: folding Akordeon

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by York at November 16, 2013 - 2:06 AM