□Achieve Accordion High Consistency
<Head> <meta name = "viewport" content = "width = device-width"/> <title> Index </title> <link href = "~ /Content/jquery-ui.min.css "rel =" stylesheet "/> <script src = "~ /Scripts/jquery-1.10.2.min.js "> </script> <script src = "~ /Scripts/jquery-ui.min.js "> </script> <style type =" text/css "> # word-cup {width: 300px ;} </style> <script type = "text/javascript"> $ (function () {$ ('# word-cup '). accordion ({event: "mouseover", collapsible: true, active: 1, heightStyle: 'auto '});}); </script>
It can be seen that when the heightStyle attribute is set to auto, the height of each area is the same and consistent with the maximum height:
□Accordion highly adaptive
When the heightStyle attribute is set to content, the height changes with the content:
$(function() { $('#word-cup').accordion({ event: "mouseover", collapsible: true, active: 1, heightStyle: 'content' }); });
□Manually adjustable Accordion height
Now, we want to implement a function that enables the bottom of Accordian to be dragged to change the height.
We can implement this by extending "jQuery UI Widget Factory. A Widget can be viewed as a factory or function and can be used to create all UIS. The following extensions:
(Function ($) {$. widget ("custom. newAccordion ", $. ui. accordion, {options: {resizable: true // default value: true}, _ create: function () {// rewrite constructor _ create constructor, all the private functions with underscores (_) are Widgets. this. _ super (); // make sure the default function of accordion takes effect if (! This. options. resizable) {return;} this. headers. next (). resizable ({handles: "s"}) // drag the bottom of each Accordion to adjust the height. css ({"margin-bottom": "5px", "border-bottom": "1px dashed", "overflow": "hidden"}) ;}, _ destroy: function () {// remove extended feature to restore to previous state this. _ super (); if (! This. options. resizable) {return;} this. headers. next (). resizable ("destroy "). css ({"margin-bottom": "2px", "border-bottom": "1px solid", "overflow ":""});},});}) (jQuery );
Call the extension method of the widget:
$ ('# Word-cup'). newAccordion ({});
Accordion has the features assigned by the extension method, such as the dotted line at the bottom:
You can also drag the bottom of Accordion to adjust the height:
□Summary
By extending "jQuery UI Widget Factory", you can add attributes or actions to jQuery's various UIS.
References:
Extending the jQuery UI Accordion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
