script.aculo.us - script.aculo.us


script.aculo.us
Scriptaculous logo.png
Ontwikkelaar(s) Thomas Fuchs
Laatste versie
1.9.0 / 23 december 2010 ( 2010-12-23 )
Opslagplaats Bewerk dit op Wikidata
Geschreven in JavaScript
Type JavaScript-bibliotheek
Licentie MIT-licentie
Website script .aculo .us Bewerk dit op Wikidata

script.aculo.us is een JavaScript- bibliotheek gebouwd op het Prototype JavaScript Framework en biedt dynamische visuele effecten en gebruikersinterface-elementen via het Document Object Model (DOM).

Het wordt vooral meegeleverd met Ruby on Rails en Seaside , maar wordt ook apart geleverd om met andere webframeworks en scripttalen te werken .

script.aculo.us is door Thomas Fuchs geëxtraheerd uit zijn werk aan Fluxiom, een webgebaseerde tool voor digitaal activabeheer van het ontwerpbedrijf wollzelle. Het werd voor het eerst vrijgegeven aan het publiek in juni 2005.

Kenmerken

script.aculo.us breidt het Prototype JavaScript Framework uit door visuele effecten, bedieningselementen voor de gebruikersinterface en hulpprogramma's toe te voegen.

Visuele effecten

Er zijn vijf kerneffecten die script.aculo.us biedt: dekking, schaal, verplaatsen, markeren en parallel. Door deze effecten zijn er meer dan 16 extra effecten met combinaties van de kerneffecten uit de doos. Programmeurs kunnen ook bestaande uitbreiden en nieuwe effecten creëren.

Het inschakelen van een effect is een kwestie van het toewijzen van een element met een ID-naam en één regel code voor het effect. Hieronder ziet u een voorbeeld van het Effect.Fade-effect dat wordt toegepast op een DOM-element met de ID 'message-box': 

new Effect.Fade('message-box');

Hierdoor vervaagt de doel-ID in ondoorzichtigheid en eindigt met het instellen van de CSS-eigenschap "display" op "none".

Verschillende andere instellingen binnen het effect kunnen worden gewijzigd, zoals de duur van het effect en het bereik van het effect: 

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

Dit zou het element doen vervagen, maar stoppen wanneer het effect voor 80% is voltooid (met een dekking van 20%).

Bediening

Controls biedt gebruikersinterface-elementen, waaronder:

  • Slepen en neerzetten
    • Draggables
    • Droppables
    • Sorteerbaar
    • Schuifregelaar
  • Automatisch aanvullen
  • Bewerken op zijn plaats

Bouwer

Met Builder kunt u DOM-elementen dynamisch maken. Gebruik de onderstaande voorbeeldcode: 

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')
    ])
  ])
]);

...creëert het volgende (zonder witruimte ): 

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

Referenties

Externe links


Stub-pictogram

Dit gratis en open-source softwareartikel is een stomp . Je kunt Wikipedia helpen door het uit te breiden .