jCarousel con larghezza di contenuto sconosciuto

Question

Sto cercando di utilizzare il plugin per jQuery jCarousel al fine di fornire i miei utenti di siti web con contenuto scorrevole (orizzontale).

Il contenuto se ne fa menzione è fondamentalmente elementi <li> definiti dall'utente, in stile in modo che abbiano un aspetto e l'aspetto di una scheda. Quindi, fondamentalmente sto cercando di ottenere lo stesso effetto delle schede in pageflakes.com. Come si può immaginare, gli utenti stanno creando le schede e di fornire i nomi delle schede da soli ..

jCarousel si ha la necessità di specificare una larghezza fissa per il contenuto ad esempio, tutti i loro esempi sono basati su immagini che sono fisse altezza e larghezza. ma nel mio caso non ho controllo su ciò che l'utente dovrà nominare il suo / la sua scheda ... rendendo impossibile per me di indovinare la larghezza del totale div contenitore.

Ho provato utilizzando un metodo stupido come indovinare la larghezza programatically assumendo ogni lettera essendo circa 5 pixel e moltiplicando 5 con la lunghezza della parola che hanno dato come nome per una scheda. anche in questo caso, avevo bisogno di manipolare il file css in modo dinamico che io non sono sicuro di come fare e anche se è fattibile a farlo ..

Tutte le soluzioni apprezzate ...

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

Il sopra html è prodotto programatically attraverso ajax_tabs_output.aspx, caricato in un array JavaScript e jCarousel prende cura 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

La cosa più vicina a ciò che si vuole è probabilmente jscrollhorizontalpane . Non ho mai usato quindi non posso garantire per la sua efficacia come una soluzione a questo problema specifico.

Questo tipo di widget di non dovrebbe essere quello difficile fare se si vuole tentare. Io abbattere il metodo approssimativo userei:

Assicurarsi di utilizzare un sacco di involucri.

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

Quello che faremo si sta spostando il " spazio " elemento avanti e indietro dentro " Finestra " elemento. Questo può essere fatto impostando position:relative a " Finestra " e position:absolute a " spazio " e poi spostarlo sull'utilizzo left:-??px, ma userò la proprietà scrollLeft.

Aggiungi un po 'di 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 */
}

Questa è solo le cose di base che la tecnica ha bisogno. Alcune di queste cose potrebbe essere applicato per jQuery,

Aggiungi eventi alla finestra di ridimensionamento.

$(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');

Aggiungi eventi per scorrere i pulsanti.

$('.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();
  });

Fatto!

Le larghezze possono essere calcolati in cascata della " scheda " elementi e sommando upp outerWidth. Questo non è necessaria se si ha il pieno controllo, ma potrebbe essere una scelta migliore per un plugin standalone completo.

Answer 2

Da quello che posso dire, si sta cercando fanno JCarousel fare qualcosa non è mai stato progettato per fare. Sulla base di quello che ho letto sul href="http://sorgalla.com/jcarousel/" rel="nofollow noreferrer"> sito sembra essere una rotazione delle immagini.

Che suona come si desidera è un interfaccia a schede. Vedere jQuery UI Tabs per una demo e documentazione su come implementarlo.

Se io sono totalmente sbagliato e tutto quello che state cercando è un tutorial su come fare le schede CSS corretto, dare un'occhiata a:

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

Answer 3

Soviut,

Vi sono in realtà perfettamente ragione! Io sto cercando di fare JCarousel fare qualcosa che non è stato progettato per.

Comunque, anche io non mi piace usare un plugin scheda o qualsiasi stuf simile come ho bisogno di un controllo completo sopra la mia uscita. Ad esempio iniettando più elementi nelle linguette quando necessario, come un doppio clic, caricamento e molti altri ecc ecc.

In realtà quello che sto cercando un modo per scorrere orizzontalmente il contenuto all'interno di un div con frecce sul .. Per essere più precisi, ho bisogno la stessa identica struttura di sinistra e destra delle schede visto in www.pageflakes.com

L'utente sarà in grado di creare schede facendo clic su un link (o qualsiasi altro elemento è per questo), essi saranno in grado di inline modificarne il nome, ogni volta che hanno più schede allora la lunghezza del div, i pulsanti saranno visibili permettendo loro di scorrere all'interno del div, avrò gli eventi legati a loro carico, fare clic e gli eventi doppio clic.

In sintesi ho tutto pronto e funzionante, tranne per lo scorrimento / parte scorrimento. Il suo solo che devo ottenere aiuto da voi ragazzi per quanto riguarda come ottenere questa funzionalità ..

Cordiali saluti,

Answer 4

Quello che stai cercando non è schede, ma pannelli trascinabili. Un esempio può essere trovato qui, chiamato JQuery Portlet . La voce del blog correlati su Portlet può essere trovato qui .

Si potrebbe anche voler guardare in JQuery UI s ' Draggable, droppable, e plugin ordinabili.