jquery - imagenes - Pestañas HTML arrastrar y soltar muestra del control deslizante?
events drag and drop html5 (1)
Lo que necesito es un sistema de pestañas simple, de modo que si mouseDown el mouseDown sobre su contenido, no seleccione texto html, sino que empiece a deslizar la pestaña. Si desliza más de la mitad, asume que se deslizó a la siguiente pestaña. ¿Cómo hacer tal cosa con jQuery?
Actualización: código de muestra:
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;
}
Y muestra en vivo de cómo funciona aquí . Lo que estoy buscando se ve así (enlace proporcionado por Trufa) Pero funciona no solo para imágenes sino también para pestañas html ... y puede ser más simple en física ... =) ¿Es posible modificar el código proporcionado a cualquier cosa cerca? esa cosa que quiero?
¿Quieres decir algo como esto ?
ACTUALIZACIÓN 1:
No tengo mucho tiempo libre, pero estoy tratando de construir algo , basado en esto .
Por cierto, no puedo creer que no haya nada o que ya esté construido.