JAVASCRIPT   42
cq tabslideout js
Guest on 13th August 2022 12:29:40 AM


  1. /*
  2. Methods
  3. ------
  4.  
  5.     You can use some methods to programmatically interact with tabs. Methods except 'isOpen' are chainable.
  6.  
  7.         $('#my-tab').tabSlideOut('isOpen'); // return true or false
  8.         $('#my-tab').tabSlideOut('open'); // opens it
  9.         $('#my-tab').tabSlideOut('close'); // closes it
  10.         $('#my-tab').tabSlideOut('toggle'); // toggles it
  11.         $('#my-tab').tabSlideOut('bounce'); // bounces the tab
  12.                
  13.         You can also send JQuery events to initiate actions:
  14.        
  15.             $('#my-tab').trigger('open'); // opens it
  16.         $('#my-tab').trigger('close'); // closes it
  17.         $('#my-tab').trigger('toggle'); // toggles it
  18.         $('#my-tab').trigger('bounce'); // bounces the tab
  19.  
  20. Events
  21. ------
  22.  
  23.     Three events are defined and can be caught when tabs open and close:
  24.  
  25.         $(document).on('slideouttabopen slideouttabclose slideouttabbounce',function(event){
  26.             var $panel = $(event.target);
  27.             var eventType = event.type;
  28.             // your code here
  29.         });
  30.  
  31.         Features are demonstrated on the demo page.
  32.  
  33. Options
  34. -------
  35.  
  36. You can leave out any options, and the following defaults are used:
  37.  
  38.         tabLocation: 'left', // left, right, top or bottom
  39.         tabHandle: '.handle', // JQuery selector for the tab, can use any JQuery selector
  40.         action: 'click',  // action which will open the panel, e.g. 'hover'
  41.         hoverTimeout: 5000, // ms to keep tab open after no longer hovered - only if action = 'hover'
  42.         offset: '200px', // panel dist from top or left (bottom or right if offsetReverse is true)
  43.         offsetReverse: false, // if true, panel is offset from  right or bottom of window instead of left or top
  44.         otherOffset: null, // if set, panel size is also set to maintain this dist from bottom or right of view port (top or left if offsetReverse)
  45.         handleOffset: null, // e.g. '10px'. If null, detects panel border to align handle nicely on edge
  46.         handleOffsetReverse: false, // if true, handle is offset from right or bottom of panel instead of left or top
  47.         bounceDistance: '50px', // how far bounce event will move everything
  48.         bounceTimes: 4, // how many bounces when 'bounce' is called
  49.         bounceSpeed: 300, // time to animate bounces
  50.         tabImage: null, // optional image to show in the tab
  51.         tabImageHeight: null, // optional IE8 and lower only, else autodetected size
  52.         tabImageWidth: null, // optional IE8 and lower only, else autodetected size
  53.         onLoadSlideOut: false, // slide out after DOM load
  54.         clickScreenToClose: true, // close tab when somewhere outside the tab is clicked
  55.         clickScreenToCloseFilters: ['.ui-slideouttab-panel'], // if click target or parents match any of these, click won't close this tab
  56.         onOpen: function(){}, // handler called after opening
  57.         onClose: function(){} // handler called after closing
  58.  
  59. Add the class ui-slideouttab-handle-rounded to a handle to give it rounded outer corners.
  60.  
  61. */
  62.  
  63.  
  64. $(document).ready(function() {
  65.  
  66.     $('#right').tabSlideOut({
  67.       tabLocation: 'right',
  68.       offsetReverse: true, // position the panel from the bottom of the page, rather than the top
  69.       handleOffsetReverse: true, // position the tab from the bottom of the panel, rather than the top
  70.       onLoadSlideOut: true, // open by default
  71.       offset: '80px', // panel dist from top or left (bottom or right if offsetReverse is true)
  72.       //handleOffset: '40px',
  73.       bounceTimes: 5,
  74.       bounceDistance: '10px',
  75.       bounceSpeed: 100,
  76.       onOpen: function(){
  77.         //alert('open');
  78.  
  79.        var aBoxOutHeight = $('#right').outerHeight();
  80.  
  81.        //alert('aBoxOutHeight: ' + aBoxOutHeight);
  82.  
  83.         $( '#right .handle').css({
  84.           'width': aBoxOutHeight+'px',
  85.         });
  86.  
  87.  
  88.         $( '#right').css({
  89.           'margin': '0px -40px 0px 0px;',
  90.         });
  91.       },
  92.       onClose: function(){
  93.         //alert('close');
  94.  
  95.         $( '#right').css({
  96.           'margin': '0px 0px 0px 0px',
  97.         });
  98.       },        
  99.           /* don't close this tab if a button is clicked, or if the checkbox is set */
  100.           clickScreenToCloseFilters: [
  101.                         'button', // ignore button clicks
  102.                         function(event){ // custom filter
  103.                                 // filters need to return true to filter out the click passed in the parameter
  104.                                 return $('#keepTabOpen').is(':checked');
  105.                         }
  106.           ]
  107.    
  108.  
  109.   });
  110.  
  111.  
  112. setTimeout(function(){
  113.  
  114.   $('#right').trigger('close');
  115.  
  116.   setTimeout(function(){
  117.  
  118.     //  $( '#right').css({
  119.     //    'display': 'inline-block',
  120.     //  });
  121.  
  122.     $('#right').fadeIn( 200, function() {
  123.  
  124.       $('#right').tabSlideOut('bounce');
  125.  
  126.     });
  127.  
  128.   }, 1000);
  129.  
  130.   //alert('close');
  131.  
  132. }, 500);
  133.  
  134.  
  135.  
  136.   $(window).resize(function() {
  137.  
  138.     var aBoxOutHeight = $('#right').outerHeight();
  139.     //alert('aBoxOutHeight: ' + aBoxOutHeight);
  140.  
  141.     $( '#right .handle').css({
  142.       'width': aBoxOutHeight+'px',
  143.     });
  144.  
  145.   });
  146.  
  147.  
  148. });
Raw Paste

Login or Register to edit or fork this paste. It's free.