A Pen by Stan Williams on CodePen.
Created
July 16, 2018 06:35
-
-
Save stanwmusic/3690419498de80422ea41efc05947676 to your computer and use it in GitHub Desktop.
jQuery.tabSlideOut Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script | |
src="https://code.jquery.com/jquery-3.2.1.min.js" | |
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
crossorigin="anonymous"></script> | |
<script src="https://use.fontawesome.com/2be9406092.js"></script> | |
<script src="https://cdn.rawgit.com/hawk-ip/jquery.tabSlideOut.js/v2.4/jquery.tabSlideOut.js"></script> | |
<h1>jQuery.tabSlideOut Demo</h1> | |
<div id="left"> | |
<a class="handle ui-slideouttab-handle-rounded">Left<i class="fa fa-icon fa-television"></i></a> | |
<p>This panel doesn't close automatically when somewhere else is clicked.</p> | |
<p>And it can be controlled from the buttons in the main window.</p> | |
<p>Note also the support for Font Awesome icons in the tab handles.<p> | |
<textarea rows="4">This is some content</textarea> | |
</div> | |
<div id="right"> | |
<a id="right-handle" class="handle ui-slideouttab-handle ui-slideouttab-handle-rounded">Right<i class="fa fa-icon fa-bank"></i></a> | |
<div id="right-subpanel"> | |
<p>This panel opens by default and shows how to achieve scrolling.</p> | |
<p> | |
This tab will close when when another part of the page is clicked, but not if the checkbox below is checked and never when a button is clicked. | |
</p> | |
<input type="checkbox" id="keepTabOpen" name="keepTabOpen" value="keepTabOpen"> | |
<label for="keepTabOpen">Keep tab open</label> | |
<br> | |
<textarea rows="4">This is some content which can be resized. When it's resized, the panel it's in might gain scroll bars.</textarea> | |
<h2> | |
Scrollbars | |
</h2> | |
<p> | |
To achieve a panel that has scrollbars like this one, you need to: | |
</p> | |
<ol> | |
<li>Put the scrolling content in a div inside your tabSlideOut panel with height: 100%. (If you don't do this, the tab handle will disappear due to the scrolling).</li> | |
<li>Limit the height of your tabSlideOut using height, max-height or top/bottom/left/right CSS properties, or the otherOffset initialisation parameter.</li> | |
</ol> | |
</div> | |
</div> | |
<div id="top"> | |
<a class="handle ui-slideouttab-handle-rounded">Top (hover)</a> | |
<p>This tab is set to bounce faster, longer, and less than the default values used by the other tabs.</p> | |
<p>It is also offset from the right side, and its tab is offset from the right too.</p> | |
<textarea rows="4">This is some content which can be resized by the button below.</textarea> | |
</div> | |
<div id="bottom"> | |
<a class="handle ui-slideouttab-handle-rounded">Bottom<i class="fa fa-icon fa-user"></i></a> | |
<p>This panel closes automatically when somewhere else is clicked, except another panel (default behaviour).</p> | |
<p>It has both an offset and an otherOffset, meaning its edges stay a constant distance from the viewport edges.</p> | |
<textarea rows="4">This is some content which can be resized by the button in the main window.</textarea> | |
</div> | |
<h2>Methods</h2> | |
<p>Open, close, toggle and bounce programmatically:</p> | |
<button id="open" class="lefty">Click to open Left</button> | |
<button id="close" disabled="true" class="lefty">Click to close Left</button> | |
<button id="toggle" class="lefty">Click to toggle Left</button> | |
<button id="bounce">Click to bounce all</button> | |
<button id="expand">Click to resize textareas</button> | |
<h2>Events</h2> | |
<p> | |
Each slideoutabxxxxx event will be recorded below. | |
</p> | |
<pre id="events"></pre> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
var left = $('#left').tabSlideOut({ | |
tabLocation: 'left', | |
clickScreenToClose: false, | |
offset: '40px', | |
offsetReverse: true, // offset from bottom, not top | |
// handlers: enable and disable buttons when sliding open or closed | |
onOpen: function(){ | |
$('#open').prop('disabled',true); | |
$('#close').prop('disabled',false); | |
}, | |
onClose: function(){ | |
$('#open').prop('disabled',false); | |
$('#close').prop('disabled',true); | |
} | |
}); | |
$('#right').tabSlideOut({ | |
tabLocation: 'right', | |
offsetReverse: true, // position the panel from the bottom of the page, rather than the top | |
otherOffset: '40px', // force panel to be fixed height (required to get the scrollbars to appear in the sub-panel) | |
handleOffsetReverse: true, // position the tab from the bottom of the panel, rather than the top | |
onLoadSlideOut: true, // open by default | |
/* don't close this tab if a button is clicked, or if the checkbox is set */ | |
clickScreenToCloseFilters: [ | |
'button', // ignore button clicks | |
function(event){ // custom filter | |
// filters need to return true to filter out the click passed in the parameter | |
return $('#keepTabOpen').is(':checked'); | |
} | |
] | |
}); | |
$('#top').tabSlideOut({ | |
tabLocation: 'top', | |
action: 'hover', | |
handleOffsetReverse: true, | |
offsetReverse: true, | |
bounceTimes: 20, | |
bounceDistance: '10px', | |
bounceSpeed: 100 | |
}); | |
$('#bottom').tabSlideOut({ | |
tabLocation: 'bottom', | |
offset: '40px', | |
otherOffset: '40px' | |
}); | |
/* programmatically drive the left tab */ | |
$('button.lefty').click(function(event){ | |
left.tabSlideOut( /*extract command out of the id of the button`*/$(event.target).attr('id') ); | |
}); | |
/* expand the content in each tab */ | |
$('#expand').click(function(e){ | |
$('textarea').each(function(i,n){ | |
var ta = $(n); | |
ta.attr('rows','10').attr('cols','60'); | |
}); | |
}); | |
/* bounce every tab */ | |
$('#bounce').click(function(e){ | |
$('.ui-slideouttab-panel').each(function(i,n){ | |
var tab = $(n); | |
tab.tabSlideOut('bounce'); | |
}); | |
}); | |
/* register event handler for every tab event, and show events on the page*/ | |
$(document).on('slideouttabopen slideouttabclose slideouttabbounce',function(event){ | |
var text = $(event.target).attr('id')+': '+event.type; | |
$('#events').append(text+"\n"); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* originally from http://www.building58.com/examples/tabSlideOut.html */ | |
</style> | |
<link rel="stylesheet" href="https://cdn.rawgit.com/hawk-ip/jquery.tabSlideOut.js/v2.4/jquery.tabSlideOut.css"> | |
<style type="text/css"> | |
body { | |
font-family: Open Sans, Helvetica, sans-serif; | |
} | |
#left { | |
border-color: red; | |
} | |
#left .handle { | |
background-color: red; | |
} | |
#right { | |
border-color: orange; | |
border-width: 5px; | |
width: 20em; | |
} | |
#right .handle { | |
background-color: orange; | |
} | |
#right-subpanel { | |
height: 100%; | |
overflow-y:auto; | |
} | |
#bottom { | |
border-color: blue; | |
} | |
#bottom .handle { | |
background-color: blue; | |
} | |
pre { | |
margin-left: 3em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo:
https://codepen.io/Stanssongs/full/oMbaJj/