Ilość wyświetleń: 7602 « powrót

TabPanel w JavaScript

Wstęp

Ostatnio widziałem użyteczny efekt na niektówych portalach, tzn. element strony z zakładkami. Klikanie na zakładki powoduje zmianę informacji w danym obszarze strony bez jej odświeżania. Ten typ interfejsu jest powszechnie stosowany w aplikacjach okienkowych (szczególnie przy funkcjach konfiguracyjnych) i sam bardzo często go stosuję.
Jak zobaczyłem to pomyślałem, by przetestować to rozwiązanie i w tym tekście postaram się przybliżyć do czego doszedłem.

Realizacja

Po krótkim zastanowieniu doszedłem do wniosku, że potrzebne będą mi trzy tablice. Pierwsza do przechowywania zawartości panelu, druga do zawierająca grafiki wyświetlane w przypadku gdy panel jest aktywny i trzecie z grafikami nieaktywnych paneli.
Mając zmienne nadszedł czas pomyśleć o jakichś funkcjach. Przydała by się jakaś, która odpowiada za zmianę aktywnego panelu.
Do dodawania nowych paneli również napisałem prostą funkcję.

<script  language="JavaScript">

//  tablica  z  zawartoscia  wyswietlanego  panelu
var  arrayTab  =  new  Array();

//  tablica  z  plikami  graficznymi  przy  aktywnym  panelu
var  imageTabOn  =  new  Array();

//  tablica  z  plikami  graficznymi  przy  nieaktywnym  panelu
var  imageTabOff  =  new  Array();

//  funkcja  to  do  zmiany  aktywnego  panelu
function  tabSwitch(numTab)
{
    var  imgName;

    //  podmiana  zawartosci
    document.getElementById("currentTab").innerHTML  =  arrayTab[numTab];

    //  i  petla,  ktora  ustawia  odpowiednie  obrazki
    for  (i  =  0;  i  <  arrayTab.length;  i++)
    {
        imgName  =  "tab"  +  i;
        if  (i  ==  numTab)
            document.images[imgName].src  =  imageTabOn[i];
        else
            document.images[imgName].src  =  imageTabOff[i];
    }
}

//  dodanie  nowego  panela
function  addTab(text,  imageOn,  imageOff)
{
    arrayTab.push(text);
    imageTabOn.push(imageOn);
    imageTabOff.push(imageOff);
}
</script> 

Kod co nieco może "toporny" ale działa. Następny krok to dodanie przykładowych paneli , tzn. zawartości oraz grafik.

<script>

    //  utworzenie  3  paneli

    var  p1  =  '  \
<p>  \
    tekst  nr  1<br><b>test</b>  \
</p>';

    var  p2  =  '  \
<p>  \
    tekst  nr  2  \
</p>';

    var  p3  =  '  \
<p>  \
    tekst  nr  3  <br>  \
    z  obrazkiem  <img  src="/china1/img/code/tab1_off.jpg">  \
</p>';

    addTab(p1,  "/china1/img/code/tab1_on.jpg",  "/china1/img/code/tab1_off.jpg");
    addTab(p2,  "/china1/img/code/tab1_on.jpg",  "/china1/img/code/tab1_off.jpg");
    addTab(p3,  "/china1/img/code/tab3_on.jpg",  "/china1/img/code/tab3_off.jpg");

</script> 

Teraz przydało by się coś zobaczyć i przyszedł czas na kawałek kodu html, który zamieszczony na stronie odpowiada za wyświetlanie panelu.

<!--  kod  html  panela  (tabelka)  -->

<a  name="tabPanel">

<table  border="0">
<tr>
    <td  align="left">
        <a  href="#tabPanel"  onClick="tabSwitch(0);">
<img  name="tab0"  src="/china1/img/code/tab1_off.jpg"  border="1"></a>
        <a  href="#tabPanel"  onClick="tabSwitch(1);">
<img  name="tab1"  src="/china1/img/code/tab2_off.jpg"  border="1"></a>
        <a  href="#tabPanel"  onClick="tabSwitch(2);">
<img  name="tab2"  src="/china1/img/code/tab3_off.jpg"  border="1"></a>
    </td>
</tr>
<tr>
    <td  style="background:  #ececff;  border:  solid  1px  #0000ff;  padding:  5px;">
        <!--  wlasciwa  zawartosc  panela  -->
        <div  id=currentTab  style="height:  200px;">
            nic
        </div>
    </td>
</tr>
</table>

<!--  koniec  panela  --> 

Jeszcze tylko zainicjowanie panela startowego.

<script>
    //  przelaczenie  na  panel  poczatkowy
    tabSwitch(0);
</script> 

Przykład w działaniu

nic

» Dodaj komentarz


Komentarze:

Produkty


Sharepoint RMS

  • rejestracja zgłoszeń serwisowych
  • przydzielanie zadań personelowi
  • aktualizacja statusu zlecenia
  • podgląd przez użytkownika stanu jego zgłoszeń
  • automatyczne informowanie email'em o stanie zlecenia
  • dowolna liczba instancji aplikacji
  • 5 webpart'ów
  • 4 szablony list
  • kompletny projekt w Visual Studio 2010

Artykuły

» więcej


Jeżeli któreś z przedstawionych przeze mnie rozwiązań okazało się wyjątkowo użyteczne możesz dokonać darowizny za pomocą Paypal. Możliwe, że to zdopinguje mnie do przedstawienia większej ilości tekstów i kodów źródłowych, które powstają podczas mojej codziennej pracy.