Other Way Show-Hide use Draggable Panels - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Other Way Show-Hide use Draggable Panels, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article HTML, Article Javascript, Article jQuery, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Other Way Show-Hide use Draggable Panels
link : Other Way Show-Hide use Draggable Panels

Other Way Show-Hide use Draggable Panels

Pada umumnya untuk menampilkan beberapa konten berjejer menjadi satu wadah memakai trick tab Setali tiga uang kalian bisa menggunakan trik accordion Ada teknik baru namanya yaitu draggable panels. Basic concept come from draggabilly.desandro.com Membuat segala sesuatu bisa dibikinkan menjadi menyeret/terseret/drag. Draggable panels concept created by David DeSandro cdpn.io/FHhEe Karena terintegrasi dengan jQuery, maka harus sudah tertanam script jQuery utama di dalam template ;)
Begini planning markup HTML...

#accordion {
height: 100%;
max-width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.panel {
position: absolute;
left: 0;
top: 0;
}
.panel-toolbar {
background: #333;
color: #CCC;
padding: 10px;
border-top: 1px solid #666;
border-bottom: 1px solid #111;
}
.panel-2 .panel-toolbar,.panel-3 .panel-toolbar {
cursor: row-resize;
}
.panel-content {
height: 100px;
overflow-y: scroll;
padding: 0 10px;
color: white;
background: #444;
}
.panel-content p {
margin-bottom: 0.8em;
}
.is-dragging .panel-toolbar {
background: #700;
}

Itu merupakan kode CSS dasar, silahkan edit sesuai dengan keperluan! Berikut susunan script draggable panels.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<script type='text/javascript'>
//<![CDATA[
// quickie Draggabilly jQuery plugin
$.fn.draggabilly = function( options ) {
  return this.each( function() {
    var draggie = new Draggabilly( this, options );
    $.data( this, 'draggabilly', draggie );
  });
}
$( function() {
// set initial panel position and content height
  var $accordion = $('#accordion');
  var accordionHeight = $accordion.innerHeight();
  var panelHeight = accordionHeight / 3;
  var toolbarHeight = $accordion.find('.panel-toolbar').outerHeight();
  var $panelContents = $accordion.find('.panel-content');
  var panelContentHeight = panelHeight - toolbarHeight;
// set initial content height
  $panelContents.height( panelContentHeight );
  var $panel1Content = $panelContents.eq(0);
  var $panel2Content = $panelContents.eq(1);
  var $panel3Content = $panelContents.eq(2);
  var $panel2 = $('.panel-2').css({ top: panelHeight })
    .draggabilly({
      axis: 'y',
      handle: '.panel-toolbar'
    });
  var draggie2 = $panel2.data('draggabilly'); 
  draggie2.containDrag = function( axis, drag ) {
    if ( axis === 'x' ) {
      return drag;
    }
    var startY = draggie2.startPosition.y;
    var min = toolbarHeight - startY;
    var max = accordionHeight - startY - toolbarHeight * 2;
    return Math.max ( min, Math.min( max, drag ) );
  }
  var $panel3 = $('.panel-3').css({ top: panelHeight * 2 })
    .draggabilly({
      axis: 'y',
      handle: '.panel-toolbar'
    });
  var draggie3 = $panel3.data('draggabilly'); 
  draggie3.containDrag = function( axis, drag ) {
    if ( axis === 'x' ) {
      return drag;
    }
    var startY = draggie3.startPosition.y;
    var min = toolbarHeight * 2 - startY;
    var max = accordionHeight - startY - toolbarHeight;
    return Math.max ( min, Math.min( max, drag ) );
  }
// position panel3 when panel2 is moving
  draggie2.on( 'dragMove', function() {
    var panel3Top = parseInt( $panel3.css('top'), 10 );
    if ( panel3Top < draggie2.position.y + toolbarHeight ) {
      panel3Top = draggie2.position.y + toolbarHeight;
      $panel3.css({
        top: panel3Top
      });
    }
    resizePanelContents( draggie2.position.y, panel3Top );
  });
// position panel3 when panel2 is moving
  draggie3.on( 'dragMove', function() {
    var panel2Top = parseInt( $panel2.css('top'), 10 );
    if ( panel2Top + toolbarHeight > draggie3.position.y  ) {
      panel2Top = draggie3.position.y - toolbarHeight;
      $panel2.css({
        top: panel2Top
      });
    }
    resizePanelContents( panel2Top, draggie3.position.y );
  });
// resizes panel contents with the two positions
  function resizePanelContents( panel2Y, panel3Y ) {
    $panel1Content.height( panel2Y - toolbarHeight );
    // size the panels
    $panel2Content.height( panel3Y - panel2Y - toolbarHeight );
    $panel3Content.height( accordionHeight - panel3Y - toolbarHeight );
  }  
});
//]]></script>

Apakah kalian tertarik memasang draggable panels? Kembali kepada kebutuhan dan selera masing-masing ;))

Happy drag \m/

Thus articles Other Way Show-Hide use Draggable Panels

that is all articles Other Way Show-Hide use Draggable Panels This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Other Way Show-Hide use Draggable Panels with the link address https://autopostingblogspot.blogspot.com/2014/03/other-way-show-hide-use-draggable-panels.html