script.aculo.us

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj


script.aculo.usbiblioteka programistyczna w języku JavaScript udostępniana na Licencji X11, której bazą jest Prototype JavaScript Framework, rozszerzając go o animacje i elementy interfejsu użytkownika na bazie obiektowego modelu dokumentu. Jest też dołączany do Seaside i Ruby on Rails.

Możliwości[edytuj | edytuj kod]

script.aculo.us rozszerza Prototype JavaScript Framework poprzez dodanie efektów wizualnych, kontrolek interfejsu użytkownika i dodatkowe narzędzia.

Efekty wizualne[edytuj | edytuj kod]

Istnieje pięć głównych efektów: przeźroczystość, skalowanie, przesunięcie, podświetlenie i równoległość. Te efekty są wykorzystywane przez 16 zewnętrznych poprzez ich kombinacje.

Uruchomienie efektów jest zorientowane obiektowo i najczęściej zajmuje jedną linijkę kodu. Jako pierwszy parametr podajemy identyfikator elementu, a w drugim (opcjonalnym) ustawienia.

new Effect.Fade('id_elementu');

Z parametrami:

new Effect.Fade('id_elementu',
    { duration:2.0, from:0.0, to:0.8 });

To spowoduje efekt zanikania, ale zatrzyma się na 20%.

Kontrolki[edytuj | edytuj kod]

Kontrolki oferują interfejs użytkownika w tym:

  • Przeciągnij i upuść
    • Przeciąganie
    • Upuszczanie
    • Sortowanie
    • Suwaki
  • Autouzupełnianie
  • Edytowanie w miejscu

Obiekt budujący[edytuj | edytuj kod]

Obiekt budujący pozwala na tworzenie obiektów DOM w locie. Przykładowo:

element = Builder.node('div',{id:'ghosttrain'},[
  Builder.node('div',{className:'controls',style:'font-size:11px'},[
    Builder.node('h1','Ghost Train'),
    "testtext", 2, 3, 4,
    Builder.node('ul',[
      Builder.node('li',{className:'active', onclick:'test()'},'Record')
    ])
  ])
]);

Kod utworzy (bez znaków nowej linii):

<div id="ghosttrain">
  <div class="controls" style="font-size:11px">
    <h1>Ghost Train</h1>
    testtext234
    <ul>
      <li class="active" onclick="test()">Record</li>
    </ul>
  </div>
</div>

Zobacz też[edytuj | edytuj kod]

Linki zewnętrzne[edytuj | edytuj kod]