HTML tabs drag-drop slider sample?

Question

What I need is a simple tab system such that if you mouseDown on its contents you do not select html text but start sliding tab. If you slide more than half it assumes you slid to next tab. How to do such thing with jQuery?

Update: Sample code:

JS:

var $tabs = $('.tab');
var $contents = $('.content');

var contentWidth = $contents.eq(0).outerWidth(true);
var $slider;

var DURATION = 600;
var EASING_METHOD = 'easeInOutCubic';


$tabs.data('currentTabId', 1);


$slider = $contents.wrapAll('<div />').parent();
$slider.css({ 'width' : contentWidth * $contents.length,
              'marginLeft' : 0 });



function calcMargin(distance) {
  var margin = parseInt($slider.css('marginLeft').replace('px', ''), 10);
  return margin + contentWidth * distance * -1;
}


function changeTab(tabId) {
  var distance;


  if($tabs.data('currentTabId') !== tabId) {

    distance = tabId - $tabs.data('currentTabId');


    $slider.stop(true, true);  
    $slider.animate(
      { 'marginLeft' : calcMargin(distance) },
      { duration : DURATION, easing : EASING_METHOD }
    );


    $tabs.data('currentTabId', tabId);    
    $tabs.removeClass('current');
    $tabs.filter('#tab' + tabId).addClass('current');
  }
}



$tabs.click(function() {
  changeTab($(this).attr('id').slice(3));
});

HTML:

<div class='tabs'>
  <div class='tab current' id='tab1'>tab1</div>
  <div class='tab' id='tab2'>tab2</div>
  <div class='tab' id='tab3'>tab3</div>
</div>

<div class='contents'>
<div class='content' id='content1'>
  <div class='inner'>
    content1
  </div>
</div>

<div class='content' id='content2'>
  <div class='inner'>
    content2
  </div>
</div>

<div class='content' id='content3'>
  <div class='inner'>
    content3
  </div>
</div>
</div>

CSS:

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
}

.tabs {
}

.tab {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 15px 10px 0 0;
  margin: 0 5px;
  cursor: pointer;
}

.tab.current {
  background: #90bfff;
}

.contents {
  overflow: hidden;
  width: 400px;
  height: 300px;
  border: 1px solid #333;
}

.content {
  float: left;
  margin-right: 10px;
  width: 400px;
  height: 300px;
}

.content .inner {
  padding: 20px;
  font-size: 35px;
}

And live sample of how it works Here. What I am looking for looks like this (link provided by Trufa) But works not just for images but also for html tabs... and can be simpler in physics...=) Is it possible to modify provided code to any thing near that thing I want?

Whats the problem in I.e 6? (im presuming the width and margin problem ie6 has right ? — Val, May 15 '11 at 16:24
Nope - no problems with IE6 in code, problem is in how to implement what I asked into it...( — Rella, May 15 '11 at 17:55
@Blender +1 You have done a great job with the all provided. But I do not understand well: 'mouseDown' on what element? And the purpouse, as I understand well: keeping the mouse clicked should start the animation --> if released BEFORE HALF --> than return slide to current tab? ... can you be more precise? — Roko C. Buljan, May 15 '11 at 19:46
@roXon: [see this (recomended by Trufa)](http://iphone.hohli.com/#docs/gallery.html) but for html not only images, it can be simpler (meaning not such complex phisics) — Rella, May 15 '11 at 20:43
@Blender - Than I understood well your thoughts (nice link btw., I have seen it before) but here we are talking about the .draggable() method in jQuery UI that is more appropriate to achieve a similar effect. From a end-user perspective. Like in the provided example with the iphone --> instead of the "CLICK/release-CLICK". (the end user will never thik about clicking inside a content expecting the content to do: 'if .content this is half-a-way offset than.....' ) — Roko C. Buljan, May 15 '11 at 21:33

Trufa · Answer 1 · 2011-05-16T02:34:12.817

2

You mean something like this?

UPDATE 1:

I don't have much free time, but I'm trying to build something, based on this.

BTW I can't believe there is nothing or already built.

edited May 16 '11 at 02:34

answered May 15 '11 at 20:01

Trufa

39,971
43
126
190

Yess!) Grate sample... BVut I wished for something more simplefied (and free from UI) as a bacik sample so to say... and not just an image slide show but html... – Rella May 15 '11 at 20:12
1

@Blender: Ok, give me a sec :) – Trufa May 15 '11 at 20:15

HTML tabs drag-drop slider sample?

1 Answers1