HTML-вкладки образец перетаскивания слайдера? - PullRequest
Новая
       21

HTML-вкладки образец перетаскивания слайдера?

5 голосов
/ 15 мая 2011

Мне нужна простая система вкладок, так что если вы mouseDown в ее содержимом, вы не выбираете html текст, а начинаете скользящую вкладку.Если вы перемещаете более половины, предполагается, что вы перешли на следующую вкладку.Как это сделать с помощью jQuery?

Обновление: Пример кода:

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;
}

И живой пример того, как это работает Здесь .То, что я ищу, выглядит вот так (ссылка предоставлена ​​Trufa) Но работает не только для изображений, но и для вкладок HTML ... и может быть проще в физике ... =) Можно ли изменитьпредоставил код любой вещи рядом с той вещью, которую я хочу?

1 Ответ

1 голос
/ 16 мая 2011

Вы имеете в виду что-то вроде это ?

ОБНОВЛЕНИЕ 1:

У меня мало свободного времени, но я пытаюсь построить что-то , основываясь на этом .

Кстати, я не могу поверить, что ничего нет или уже построено.

...