🚀 go-pugleaf

W dniu 2010-08-30 09:30, Slawek-L pisze:
> Witam,

Sam sobie odpowiem. :) Może komuś się przyda.


function splitToTabs(fromDiv, tabsDiv, tmpDiv, tabHeight)
{
   var tabIndex = 1;
   var contentArray = new Array;
   var contentIndex =0;
   contentArray = jQuery.makeArray( $(fromDiv).contents().clone() );

   while ( contentIndex < contentArray.length )
   {
     $(tmpDiv).append( contentArray[contentIndex] );
     contentIndex++;
     if ( $(tmpDiv).outerHeight() > tabHeight )
     {
       contentIndex--;
        contentArray[contentIndex] = $(tmpDiv).contents().last();
       $("#tabs-"+tabIndex.toString() ).append( $(tmpDiv).contents() );
       tabIndex++;
       $(tabsDiv).tabs('add', '#tabs-'+tabIndex,tabIndex.toString());
       $(tmpDiv).contents().remove();
     }
   }
   if ( $(tmpDiv).contents() != null )
   {
       $("#tabs-"+tabIndex.toString() ).append( $(tmpDiv).contents() );
   }
}

Działa mniej więcej tak: we fromDiv jest treść do podzielenia,
tabsDiv to element w którym będą zakładki, a tmpDiv to
tymczasowy div służący do przerzucania treści.
tabHeight to wysokość zakładki. Jeśli ta wysokość zostanie przekroczona 
to zostaje utworzona kolejna zakładka i ciąg dalszy jest wrzucany do 
następnych zakładek. tmpDiv musi mieć taką samą szerokość jak docelowa 
kolumna tekstu.

Pozdrawiam
Sławek-L

W dniu 2010-09-01 13:15, Slawek-L pisze:
> W dniu 2010-08-30 09:30, Slawek-L pisze:
>> Witam,
>
> Sam sobie odpowiem. :) Może komuś się przyda.
>
>
> function splitToTabs(fromDiv, tabsDiv, tmpDiv, tabHeight)
> {
> var tabIndex = 1;
> var contentArray = new Array;
> var contentIndex =0;
> contentArray = jQuery.makeArray( $(fromDiv).contents().clone() );
>
> while ( contentIndex < contentArray.length )
> {
> $(tmpDiv).append( contentArray[contentIndex] );
> contentIndex++;
> if ( $(tmpDiv).outerHeight() > tabHeight )
> {
> contentIndex--;
> contentArray[contentIndex] = $(tmpDiv).contents().last();
> $("#tabs-"+tabIndex.toString() ).append( $(tmpDiv).contents() );
> tabIndex++;
> $(tabsDiv).tabs('add', '#tabs-'+tabIndex,tabIndex.toString());
> $(tmpDiv).contents().remove();
> }
> }
> if ( $(tmpDiv).contents() != null )
> {
> $("#tabs-"+tabIndex.toString() ).append( $(tmpDiv).contents() );
> }
> }
>
> Działa mniej więcej tak: we fromDiv jest treść do podzielenia,
> tabsDiv to element w którym będą zakładki, a tmpDiv to
> tymczasowy div służący do przerzucania treści.
> tabHeight to wysokość zakładki. Jeśli ta wysokość zostanie przekroczona
> to zostaje utworzona kolejna zakładka i ciąg dalszy jest wrzucany do
> następnych zakładek. tmpDiv musi mieć taką samą szerokość jak docelowa
> kolumna tekstu.

I wszystko dobrze, poza tym, że do tego jQuery wcale nie jest potrzebne :P

-- 
Peter

W dniu 2010-09-01 20:58, Peter May pisze:

>
> I wszystko dobrze, poza tym, że do tego jQuery wcale nie jest potrzebne :P
>

Niby nie, ale i tak ten jQuery miałem podczepiony, poza tym
dopiero zaczynam zabawę jQuery wiec jest okazja żeby go sobie
poćwiczyć :).

Pozdrawiam
/Sławek-L

On Aug 30, 9:30 am, Slawek-L <Slawek-L@localhost> wrote:
> Witam,
> Robię projekt z wykorzystaniem jquery ui i wymyśliłem
> sobie, że treść na stronie będzie prezentowana za pomocą
> elementu Tabs - czyli zakładek.
> I tu pojawia się pewien problem. Treść będzie pochodziła
> prawdopodobnie z jakiegoś CMS-a i będzie wprowadzana przez
> jakiegoś laika.
> A żeby zakładki funkcjonowały poprawnie treść musi być podzielona na
> strony za pomocą elementu div czyli:
> <div id="tabs">
>    <div id="tabs-1>Treść pierwszej zakładki</div>
>    <div id="tabs-2>Treść drugiej zakładki</div>
> </div>
> itd.
> Chciałbym żeby cms dostarczył treść zawartą
> w jednym elemencie div, a podział na zakładki
> chciałbym wykonać po stronie przeglądarki.
>
> Kombinuje w ten sposób:
> Dostaję z serwera plik z jakimś ukrytym
> elementem div w którym zawarty jest cały tekst.
> W JS pobieram zawartość tego elementu
> za pomocą funkcji children(), potem
> wykonuję konwersje tego zbioru na
> tablicę ( makeArray() ).
> Następnie w pętli kopiuje kolejne elementy
> tablicy z powrotem do jakiegoś innego div-a
> i po każdym elemencie sprawdzam czy ten docelowy div
> ma już odpowiednią wysokość ( outerHeight , jeśli tak to
> kopiuje ten tekst do zakładki itd.
> Czy to ma szansę działać?
> I czy nie ma jakiegoś innego prostszego i szybszego
> sposobu? Boję się, że jeśli trafi się np. jakiś dłuższy
> paragraf tekstu to procedura się posypie.
>
> Pozdrawiam
> Sławek-L

To ja się jeszcze tylko zapytam: po co takie coś? Jakoś nie widzę
sensu dzielenia na zakładki treści tylko dlatego, że się nie mieści w
pionie - od tego jest właśnie pasek przewijania...