javascript - example - slider css js

jCarousel con ancho de contenido desconocido

Question

Estoy intentando utilizar el plugin jCarousel para jQuery para proporcionarles a los usuarios de mi sitio web contenido desplazable (horizontal).

El contenido que menciono es básicamente elementos definidos por el usuario <li> , diseñados para que tengan una apariencia y un aspecto de una pestaña. así que básicamente estoy tratando de lograr el mismo efecto de las pestañas en pageflakes.com. Como se puede imaginar, los usuarios están creando pestañas y proporcionando nombres de pestañas por sí mismos.

jCarousel necesita que especifiques un ancho fijo para el contenido, por ejemplo, todos sus ejemplos se basan en imágenes que tienen altura y ancho fijos. pero en mi caso no tengo control sobre lo que el usuario va a nombrar a su ficha ... por lo que es imposible para mí adivinar el ancho del div total del contenedor.

He intentado usar un método tonto como adivinar el ancho programáticamente suponiendo que cada letra tiene aproximadamente 5 píxeles y multiplicar 5 con la longitud de la palabra que han dado como nombre para una pestaña. incluso en este caso, tuve que manipular dinámicamente el archivo css, lo que no estoy seguro de cómo hacer, e incluso si es factible hacerlo ...

Cualquier solución apreciada ...

<lu>
<li class=''MyTab'' id=''578''>This is my tab</li>
<li class=''MyTab'' id=''579''>of which I can</li>
<li class=''MyTab'' id=''580''>never guess</li>
<li class=''MyTab'' id=''581''><img src=''img/bullet_key.png'' /> The length of</li>
</lu>

El html anterior se produce programáticamente a través de ajax_tabs_output.aspx, cargado en una matriz javascript y jCarousel se ocupa del resto.

     function outputTabsArray() {
        $.ajax({
            url: ''ajax_tabs_output.aspx'', 
            type: ''get'', 
            data: ''q=array'', 
            async: false, 
            success: function(out) 
                {
                    tabs_array = out;
                } 
            });
            }// end outputTabsArray

        function mycarousel_itemLoadCallback(carousel, state)
        {
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (carousel.has(i)) {
                    continue;
                }

                if (i > tabs_array.length) {
                    break;
                }

                carousel.add(i, mycarousel_getItemHTML(tabs_array[i-1]));
            }
        };

        /**
         * Item html creation helper.
         */
        function mycarousel_getItemHTML(item)
        {
            return ''<div class="MyTab" id="'' + item.tab_id + "''>" + item.tab_name + ''</div>'';
        };


            $(''#mycarousel'').jcarousel({
                size: tabs_array.length,
                itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
        });

Answer 1

Por lo que puedo decir, intentas hacer que JCarousel haga algo para lo que nunca fue diseñado. Según lo que leí en el sitio web de JCarousel , parece ser un rotador de imagen.

Lo que parece que quieres es una interfaz con pestañas. Consulte las pestañas JQuery UI para obtener una demostración y documentación sobre cómo implementarla.

Si estoy totalmente equivocado y todo lo que está buscando es un tutorial sobre cómo hacer pestañas CSS adecuadas, eche un vistazo a:

http://unraveled.com/projects/css_tabs/

Answer 2

Soviut,

¡En verdad tienes razón! Estoy tratando de hacer que JCarousel haga algo para lo que no fue diseñado.

Sin embargo, tampoco me gustaría usar un plugin de tabulación o cualquier otro similar ya que NECESITO CONTROL COMPLETO sobre mi salida. Como inyectar más elementos en las pestañas cuando sea necesario, como hacer doble clic, cargar y muchos otros, etc.

En realidad, estoy buscando una forma de desplazar horizontalmente el contenido dentro de un div con flechas a la izquierda y a la derecha. Para ser más precisos, necesito la misma estructura exacta de las pestañas que se ven en www.pageflakes.com

El usuario podrá crear pestañas haciendo clic en un enlace (o cualquier otro elemento para el caso), podrá editar su nombre en línea, siempre que tenga más pestañas que la longitud del div, los botones serán visibles permitiéndoles deslizarse dentro del div, tendré los eventos vinculados a su carga, haga clic y haga doble clic en los eventos.

Para resumir, tengo todo listo y funcionando a excepción de la parte deslizante / desplazamiento. Solo tengo que obtener ayuda de ustedes sobre cómo lograr esta funcionalidad ...

Saludos cordiales,

Answer 3

Lo que estás buscando no son pestañas, sino paneles arrastrables. Un ejemplo se puede encontrar aquí, llamado JQuery Portlets . La entrada de blog relacionada sobre Portlets se puede encontrar aquí .

Es posible que también desee examinar los complementos arrastrables, desplegables y ordenables de JQuery UI .

Answer 4

Lo más parecido a lo que quieres es, probablemente, jscrollhorizontalpane . Nunca lo he usado, así que no puedo garantizar su efectividad como una solución a este problema específico.

Este tipo de widget no debería ser difícil de hacer si quieres intentarlo. Analizaré el método aproximado que usaría:

Asegúrese de usar muchas envolturas.

<div class="scrollable">
  <div class="window">
    <div class="space">
      <ul class="tabs">
        <li class="tab">...</li>
        <li class="tab">...</li>
        <li class="tab">...</li>
      </ul>
    </div>
  </div>
  <a href="#" class="left">&larr;</a>
  <a href="#" class="right">&rarr;</a>
</div>

Lo que haremos será desplazar el elemento " espacio " hacia adelante y hacia atrás dentro del elemento " ventana ". Esto se puede hacer estableciendo position:relative a " ventana " y position:absolute a " espacio " y luego cambiarla usando left:-??px , pero scrollLeft propiedad scrollLeft .

Agrega un poco de CSS

.window {
  overflow : hidden;
  width : 100%;
}
.space {
  width : 999em;      /* lots of space for tabs */
  overflow : hidden;  /* clear floats */
}
.tabs {
  float : left;       /* shrink so we can determine tabs width */
}
.tab {
  float : left;       /* line tabs up */
}

Esto es solo lo básico que la técnica necesita. Algunas de estas cosas podrían ser aplicadas por jQuery,

Agregar eventos al tamaño de la ventana.

$(window)
  .resize(function () {
    var sz = $(''.window'');
    var ul = sz.find(''ul'');
    if ( sz.width() < ul.width() ) {
      $(''.scrollable a.left, .scrollable a.right'').show();
    }
    else {
      $(''.scrollable a.left, .scrollable a.right'').hide();
    }
  })
  .trigger(''resize'');

Agregar eventos para desplazarse por los botones.

$(''.scrollable a.left'').hover(
  function (e) {
    var sz = $(''.window'');
    sz.animate({ scrollLeft : 0 }, 1000, ''linear'');
  },
  function (e) {
    $(''.window'').stop();
  });

$(''.scrollable a.right'').hover(
  function (e) {
    var sz = $(''.window'');
    var margin = sz.find(''ul'').width() - sz.width();
    sz.animate({ scrollLeft : margin }, 1000, ''linear'');
  },
  function (e) {
    $(''.window'').stop();
  });

¡Hecho!

Los anchos también pueden calcularse mediante un bucle a través de los elementos " outerWidth " y sumando upp outerWidth . Esto es innecesario si tiene control total, pero podría ser una mejor opción para un complemento completo independiente.