mikit-framework

<!DOCTYPE html> <html> <head> <title>Mikit</title>  <link rel="stylesheet" type="text/css" href="../dist/css/mikit.min.css"/> <script type="text/javascript" src="../dist/js/jquery.min.js"></script> <script type="text/javascript" src="../dist/js/mikit.js"></script> <style> .component-index-box { counter-reset: count; max-width: 400px; margin: 30px auto 60px auto; padding: 32px; background: #fbfbfb; border: 1px solid rgba(0, 0, 0, 0.08); } .component-index-box li { line-height: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-right: 24px; counter-increment: count; } .component-index-box li a { display: block; text-decoration: none; position: relative; padding-left: 10px; } .component-show { width: 1180px; margin: 0 auto; } .example { border: 1px solid rgba(0, 0, 0, 0.07); padding: 32px; margin-bottom: 16px; } #breadcrumb-custom-separator li:after { content: '>'; } #demo-nav-collapse, #demo-nav-collapse ul { margin-left: 0; list-style: none; } #demo-nav-collapse li { line-height: 32px; } #demo-nav-collapse ul { margin-left: 20px; font-size: 14px; } #demo-nav-collapse a { color: #000; text-decoration: none; display: block; } #demo-nav-collapse a:hover { -moz-transition: all linear 0.2s; transition: all linear 0.2s; color: rgba(0, 0, 0, 0.6); text-decoration: underline; } .my-collapse { margin-bottom: 24px; } .my-collapse h4 { background: #f4f4f4; padding: 8px 16px; margin-bottom: 1px; font-size: 15px; line-height: 24px; } .my-collapse h4 a { text-decoration: none; color: #000; display: block; } .my-collapse div { border: 1px solid rgba(0, 0, 0, 0.1); padding: 24px 32px 1px; margin-bottom: 1px; } </style> </head> <body> <div class="component-index-box"> <ol> <li><a href="#h-base">Base</a></li> <li><a href="#h-navigation-example">Navigation Example</a></li> <li><a href="#h-settings">Settings</a></li> <li><a href="#h-callbacks">Callbacks</a></li> <li><a href="#h-api">API</a></li> </ol> </div> <div class="component-show">  <h3 id="h-base" class="section-head">Base</h3> <div class="example"> <div id="my-collapse" data-component="collapse" class="my-collapse"> <h4><a href="#mi-collapse-box-1" class="mi-collapse-toggle" rel="#mi-collapse-box-1">Item 1</a></h4> <div class="mi-collapse-box mi-hide" id="mi-collapse-box-1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <h4><a href="#mi-collapse-box-2" class="mi-collapse-toggle" rel="#mi-collapse-box-2">Item 2</a></h4> <div class="mi-collapse-box mi-hide" id="mi-collapse-box-2"> I look active on load. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <h4><a href="#mi-collapse-box-3" class="mi-collapse-toggle" rel="#mi-collapse-box-3">Item 3</a></h4> <div class="mi-collapse-box mi-hide" id="mi-collapse-box-3"> <h6>Important Heading</h6> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <pre class="code skip"><div id="my-collapse" data-component="collapse"> <h4><a href="#box-1" class="mi-collapse-toggle">...</a></h4> <div class="mi-collapse-box mi-hide" id="box-1">...</div> <h4><a href="#box-2" class="mi-collapse-toggle">...</a></h4> <div class="mi-collapse-box" id="box-2">...</div> <h4><a href="#box-3" class="mi-collapse-toggle">...</a></h4> <div class="mi-collapse-box mi-hide" id="box-3">...</div> </div> </pre> </div> <h3 id="h-navigation-example" class="section-head">Navigation Example</h3> Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element <div class="example"> <ul id="demo-nav-collapse"> <li><a href="#">Installation</a></li> <li><a href="#">Configuration</a></li> <li><a href="#">Adding Content</a></li> <li><a href="#">Templates</a></li> <li data-component="collapse" class="mi-active"> <a href="#languages-box-2" class="mi-collapse-toggle mi-active" rel="#languages-box-2">Languages </a> <ul id="languages-box-2" class="mi-collapse-box open"> <li><a href="#">Setup</a></li> <li><a href="#">Translating content</a></li> <li><a href="#">Language variables</a></li> <li><a href="#">Supporting RTL</a></li> </ul> </li> <li><a href="#">Settings</a></li> <li><a href="#">Callbacks</a></li> <li><a href="#">API</a></li> </ul> <pre class="code skip"><ul> <li><a href="#">...</a></li> <li data-component="collapse"> <a href="#toggle-box" class="mi-collapse-toggle"> Toggle <span class="mi-caret mi-down"></span> </a> <ul id="toggle-box" class="mi-collapse-box"> <li><a href="#">...</a></li> </ul> </li> <li><a href="#">...</a></li> </ul> </pre> </div>  <h3 class="section-head" id="h-settings">Settings</h3> Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more. <h5>toggle</h5> <ul> <li>Type: <var>boolean</var></li> <li>Default: <var>true</var></li> </ul> <h5>active</h5> <ul> <li>Type: <var>string or boolean</var></li> <li>Default: <var>false</var></li> </ul> <h5>toggleClass</h5> <ul> <li>Type: <var>string</var></li> <li>Default: <var>'mi-collapse-toggle'</var></li> </ul> Sets a class of a collapsable object. <h5>boxClass</h5> <ul> <li>Type: <var>string</var></li> <li>Default: <var>'mi-collapse-box'</var></li> </ul> Sets a class for collapsable object's content <h5>animation</h5> <ul> <li>Type: <var>boolean</var></li> <li>Default: <var>true</var></li> </ul> Turns animation on and off.  <h3 class="section-head" id="h-callbacks">Callbacks</h3> <h5>open</h5> <pre class="code skip">$('#my-collapse').on('open.collapse', function() { // do something... }); </pre> <h5>opened</h5> <pre class="code skip">$('#my-collapse').on('opened.collapse', function() { // do something... }); </pre> <h5>close</h5> <pre class="code skip">$('#my-collapse').on('close.collapse', function() { // do something... }); </pre> <h5>closed</h5> <pre class="code skip">$('#my-collapse').on('closed.collapse', function() { // do something... }); </pre>  <h3 class="section-head" id="h-api">API</h3> We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once. <div class="example"> <button class="button outline" onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('openAll');">Open All</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button> <div id="my-collapse-api" data-component="collapse" class="my-collapse"> <h4><a href="#box-1" class="mi-collapse-toggle" rel="#box-1">Item 1</a></h4> <div class="mi-collapse-box mi-hide" id="box-1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <h4><a href="#box-2" class="mi-collapse-toggle" rel="#box-2">Item 2</a></h4> <div class="mi-collapse-box mi-hide" id="box-2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <h4><a href="#box-3" class="mi-collapse-toggle" rel="#box-3">Item 3</a></h4> <div class="mi-collapse-box mi-hide" id="box-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <pre class="code skip"><button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button> <button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button> <button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button> <button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button> <div id="my-collapse-api" data-component="collapse"> <h4><a href="#box-1" class="mi-collapse-toggle">...</a></h4> <div class="mi-collapse-box mi-hide" id="box-1">...</div> <h4><a href="#box-2" class="mi-collapse-toggle">...</a></h4> <div class="mi-collapse-box mi-hide" id="box-2">...</div> <h4><a href="#box-3" class="mi-collapse-toggle">...</a></h4> <div class="mi-collapse-box mi-hide" id="box-3">...</div> </div></pre> </div> <h5>open</h5> <pre class="code skip">$('#my-collapse').collapse('open');</pre> <h5>close</h5> <pre class="code skip">$('#my-collapse').collapse('close');</pre> <h5>openAll</h5> <pre class="code skip">$('#my-collapse').collapse('openAll');</pre> <h5>closeAll</h5> <pre class="code skip">$('#my-collapse').collapse('closeAll');</pre> </div> </body> </html>