Simple Harmonika med klassen USimpleTabStrip

Onsdag den 20 august 2008

Klassen USimpleTabStrip forelagt diskret Simple TabStrip, kan også bruges til at oprette en simpel menu Harmonika.
Brug af virkningerne af BlindUp() BlindDown() tilbydes af Scriptaculous:

Almindelig tekst
JavaScript:
  1. funktionen init () (
  2. ; T = new USimpleTabStrip ();
  3. ; An. Init ();
  4. ( e ) { An. OnShow = funktion (e) (
  5. ( e ) ; nye virkning. BlindDown (e);
  6. )
  7. ( e ) { An. OnHide = funktion (e) (
  8. ( e ) ; nye virkning. BlindUp (e);
  9. )
  10. )

Og lægge den tilbage på HTML (HTML kilde):

Almindelig tekst
HTML:
  1. > <div class = "accordion">
  2. > Accordion 1 </a> <a href = "#acc1"> Harmonika 1 </ a>
  3. > </a> <a name = "acc1"> </ a>
  5. <h1> Content # 1 </ h1>
  6. <p> Bla bla bla .... </ p>
  7. </ Div>
  9. > Accordion 2 </a> <a href = "#acc2"> Harmonika 2 </ a>
  10. > </a> <a name = "acc2"> </ a>
  12. <h1> Content # 2 </ h1>
  13. <p> Bla bla bla .... </ p>
  14. </ Div>
  16. > Accordion 3 </a> <a href = "#acc3"> Harmonika 3 </ a>
  17. > </a> <a name = "acc3"> </ a>
  19. <h1> Content # 3 </ h1>
  20. <p> Bla bla bla .... </ p>
  21. </ Div>
  23. </ Div>

Du får en enkel menu Harmonika, der kan anvendes i meget hurtigt.

Related Post

Tags: Javascript, tutorials,
Offentliggøres på internettet, Javascript, udvikling, Tutorials | Ingen kommentarer »

Simple diskret TabStrip

Torsdag den 14. august, 2008

USimpleTabStrip er en diskret Javascript for at forbedre classici link anker (endnu) i et HTML-side. Denne kilde er en forbedring af den funktion, der præsenteres i TabStrip diskret. I denne version også tilpasse koden til release 1.6 af prototype.js blev oprettet en reel klasse til at forvalte TabStrip. Frigivelse her er meget enkel og ligetil. Dets vigtigste arbejde ligger i at tilføje en begivenhed, skal du klikke på linket anker normale. Ikke indsendes CSS stilarter, lige til at forlade den maksimale frihed til handling, men du kan få en effektiv TabStrip med et par linjer kode tilføje CSS, se Tilføjelse CSS styles nedenfor.

HTML

Klassen USimpleTabStrip arbejder på en meget simpel HTML, de anker sftuttando <a name></a>

Almindelig tekst
HTML:
  1. <! - Simpel liste af links på siden ->
  3. > Link 1 </a> </li> <li> <a href = "#tbs1"> Link 1 </ a> </ li>
  4. > Link 2 </a> </li> <li> <a href = "#tbs2"> Link 2 </ a> </ li>
  5. > Link 3 </a> </li> <li> <a href = "#tbs3"> Link 3 </ a> </ li>
  6. </ Ul>
  8. <! - Blokke / faner ->
  10. > </a> <a name = "tbs1"> </ a>
  12. <h1> Card # 1 </ h1>
  13. <p> Bla bla bla .... </ p>
  14. </ Div>
  16. > </a> <a name = "tbs2"> </ a>
  18. <h1> Card # 2 </ h1>
  19. <p> Bla bla bla .... </ p>
  20. </ Div>
  22. > </a> <a name = "tbs3"> </ a>
  24. <h1> Card # 3 </ h1>
  25. <p> Bla bla bla .... </ p>
  26. </ Div>

Koden div lige under anker a fra beholderen.

Fortsæt læsning ... "

Related Post

JavaScript, tutorials,
Offentliggøres på internettet, Javascript, udvikling, Tutorials | 1 kommentar »

Google AJAX API Library: et vendepunkt for udviklere

Torsdag den 29. maj 2008

AJAX API biblioteker Google, i sidstnævnte perdiodo, har udgivet en lang række værktøjer dedikeret til udviklere, løbende ajourføring af deres udgivelser. Nu kører ud til en aftale med populære AJAX rammer, og ikke kun til at centralisere fordelingen af bibliotekerne jQuery, prototype, script.aculo.us, MooTools og dojo!

I praksis kan du få adgang til disse biblioteker ved hjælp af infrastruktur og Google-netværket, med betydelige fordele i form af hastighed og sikkerhed.

Den hastighed, lastning, er garanteret af det samme netværk, at Google og give sig selv et distribueret server, der giver (som standard) lastning komprimeret (gzip / minify) bibliotek. Den hosting Google tættere på anmodning vil blive brugt til at sende koden, og hvis det ikke når ned eller midlertidigt, Google-netværket, vil stadig sende Javascript-kode!

Fortsæt læsning ... "

Related Post

Tags: Google Google
Offentliggjort i Ajax, Internet, Javascript, udvikling, teknologi, WordPress, jQuery | 4 kommentarer »

Shadowbox assetURL: Angiv stien til billeder

Lørdag den 12 april 2008

Når Shadowbox åbnet sit vindue til at vise indhold (billede, iframe, film osv. ...), skærme, indtil en animerede gif, der kommer i pakken. Hvis den side, du bruger Shadowbox er på samme niveau mappe med billeder, alt fungerer fint. Som standard er i virkeligheden, Shadowbox søgning under den animerede gif-billeder / loading.gif - eller billeder / laste-light.gif hvis du vælger den stil lys (shadowbox-light.css). Ellers, og ofte er der også risiko for ikke accorgesene, hvis vi er i et andet træ, vil skabe en god kode 404 - side afstivningsbjlke ikke, i vores tilfælde filen blev ikke fundet!

At løse problemet blot formatere Shadowbox med en parameter, der skal angive, bare den absolutte sti til mappen billeder: om undolog.com, for eksempel, jeg lagt de animerede gif af lastning billeder direkte i mappen i roden (hvor omkring en milliard andre websteder:). At gøre denne mappe til Shadowbox, uanset hvilken rute, vil jeg blot tilføjes:

Almindelig tekst
JavaScript:
  1. / / Init shadowbox med assetURL parameter
  2. assetURL: 'http://www.undolog.com/' } ) ; Shadowbox. Init ((assetURL: »http://www.undolog.com/ '));

Related Post

gallerier, Internet, Javascript, Udvikling,
Offentliggjort i CSS, Design & Grafik, Internet, Javascript, Udvikling | 2 kommentarer »

Alle Lightbox kloner i en dynamisk matriks

Fredag 11 april, 2008

Planetozh har skabt et dynamisk værktøj Splendito i stand til at liste alle de Javascript biblioteker gerne Lightbox.

image

image Gennem et panel (se billedet til venstre) med en serie af "inspiration" (flueben), som viser de forskellige elementer i biblioteket, kan du køre et filter dermed generere en liste over en eller flere biblioteker, der gør vores tilfælde. Vi håber, at forfatteren fastholder opdateret denne fantastiske side, som er nyttige i den aftale mellem de mange og stadig mere magtfuld bog af denne art.

Related Post

Tags: gallerier,
Offentliggjort i CSS, Design & Grafik, Internet, Javascript, Udvikling | 7 kommentarer »

Tilføj nye broer til Scriptaculous

Tirsdag den 1 april 2008

Ikke alle ved, måske, men du kan tilsidesætte eller tilføje overgange af virkningerne af scriptaculous.js i meget enkel og hurtig. Overgange af Scriptaculous, i realiteten anvendes til at afgøre, hvilken type animation, der ikke er gennemført som Flash (Rådet til at se på denne PDF af de store Rober Penner), men den endelige virkning er - i praksis - det samme . Hertil kommer, at pakken Scriptaculous ikke har nogle overgange egne invence i Actionscript. Hvis vi ønskede at tilføje en ny overgang til Scriptaculous blot indsætte denne kode, før du bruger nogen virkning:

Almindelig tekst
JavaScript:
  1. = function ( pos ) { Virkning. Overgange. Eksponentiel = funktion (POS) (
  2. -Math. pow ( 1 -pos, 2 ) ; tilbagevenden 1-Math. Pow (1-POS, 2);
  3. )

Fra nu af kan vi bruge den nye overgang på tværs af eksponentielle virkninger Scriptaculous. For en række overgange overskud - næsten en portering fra Actionscript til Scriptaculous - se tilsættes noget krydderi til Scriptaculous.

Related Post

Internet, Javascript,
Offentliggøres på internettet, Javascript, Udvikling | Ingen kommentarer »

Scriptaculous Effect.Tween: Sådan fungerer det

Torsdag 20 marts, 2008

Blandt alle biblioteker "web 2.0" til rådighed, scriptaculous er helt sikkert det mest dårligt dokumenteret! På det officielle site, ofte langsom, dokumentation er delvis, dårligt fremstillet og vanskelige at bruge. Med de seneste udgivelser, så nogle af de nye funktioner er helt mangler, ligesom den nye bykerne virkning Tween (Effect.Tween). Sidstnævnte, der ligner Tween Flash giver dig mulighed for at manipulere tilpassede overgange. RESUMÉ sin base er: Fortsæt læsning ... "

Related Post

Tags: Internet, Javascript,
Offentliggøres på internettet, Javascript, Udvikling | Ingen kommentarer »

Light galleri: Lightview 2.0.0_rc1

Tirsdag 19 februar, 2008

Lightview For nylig udgivet her endnu diskret Javascript bibliotek for billedgallerier og meget mere. Lightview i 2.0.0_rc1 udgivelse, også tilføjer funktioner til at åbne vinduet med indhold, der rækker ud over den simple image: Flash-film, QuickTime , Form og IFRAME! Forhold til den tidligere udgave (den 1.1.0 - som opererer kun billeder), derfor denne Release Candidate er beriget funktionalitet også til stede i andre biblioteker. De værktøjer, der kræves i Lighview at arbejde er kendt Prototype 1.6.0.2 og Scriptaculous 1.8.1. Gliattributi bruges til at styre biblioteket class rel.

Interessant en forventning om at dette bibliotek er den største omhu, som grafisk viser.

Karakter: 9 - Home Lightview

Related Post

Tags: gallerier,
Offentliggjort i Ajax, CSS, Design & Grafik, Internet, Javascript, Udvikling | 1 kommentar »

Light Library: Slimbox ved en Shadowbox, gallerier i Javascript

Wednesday 13 februar, 2008

Nogen vil måske sige - ikke med urette - nok! Javascript biblioteker (diskret - ikke påtrængende eller delvis) til at administrere billeder og gallerier der er virkelig højt. Anyway her er den liste, med stærke og svage sider, jo bedre jeg følte.

SLIMBOX 1,41

Yderst minimal, 7k (version 1.41), kræver mootools at arbejde. Som angivet på Hjemmeside er en ægte klon grafen Lightbox, som vi vil se nedenfor. Helt ærligt, bortset fra den ekstreme kompakthed af biblioteket, har ingen særlige kendetegn. På samme sted, men du kan også finde et script til at generere ideer runtime ... at begrænse dette kan være nyttige ;)

Karakter: - 6 - Home Page Slimbox, Home Page Reflection.js for MooTools

Lightbox2

Lightbox2 En af de mest berømte og enkel. Opererer i denne udgave er billeder (ikke arbejde med QuickTime, Flash eller andet). For sin operation kræver Prototype og Scriptaculous. Brug rel rel at identificere de links af billeder, der skal forarbejdes:

Almindelig tekst
HTML:
  1. rel = "lightbox" title = "my caption" > image #1 </a> <a href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> billede # 1 </ a>

Ligesom andre biblioteker, at vi vil se, støtter lysbilledshow tilstand, sætte i parentes enhver identifikation i en række link / billede:

Almindelig tekst
HTML:
  1. rel = "lightbox[roadtrip]" > image #1 </a> <a href = "images/image-1.jpg" rel = "lightbox[roadtrip]"> billede # 1 </ a>
  2. rel = "lightbox[roadtrip]" > image #2 </a> <a href = "images/image-2.jpg" rel = "lightbox[roadtrip]"> billede # 2 </ a>
  3. rel = "lightbox[roadtrip]" > image #3 </a> <a href = "images/image-3.jpg" rel = "lightbox[roadtrip]"> billede # 3 </ a>

Karakter: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

LightWindow 2.0 Dette er helt almindeligt! Når alt kommer til alt, hvordan man kan forstå, hvad der er de mest anvendte? ;). Hvorom alting er, er omfattende og meget alsidigt. På webstedet står en anmodning om donationer til at købe en Mac ... lidt invasive og presseaggregat ... Men ligesom sin forgænger, for dens drift, kræver Prototype og Scriptaculous. I modsætning til den foregående, dog således, at dette gør moltisiimi typer af filer fra billeder, QuickTime-film, Flash-film, eksterne HTML-sider og PDF. Til gengæld bruger flere attributter, nogle valgfrie author, caption og title andre class params - problem bibliotek). For eksempel, for at se et galleri eller et lysbilledshow vha. rel

Almindelig tekst
HTML:
  1. class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption= "Look's super tasty!" author= "Unknown" > image #1 </a> <a href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption= "Look's super tasty!" author= "Unknown"> billede # 1 </ a>
  2. class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption= "I shouldn't be doing this when I am hungry" author= "Unknown" > image #2 </a> <a href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Pas på warewolves ..." billedtekst = "Jeg skal ikke gøre dette, når jeg er sulten" author = "Ukendt"> billede # 2 </ a>
  3. class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption= "Take that sushi!" author= "Unknown" > image #3 </a> <a href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That var good!" caption= "Take at sushi!" author= "Unknown"> billede # 3 </ A>

Karakter: 8 - Home Page LightWindow 2.0

SHADOWBOX 1.0b

Shadowbox Selvom det er version 1.0 beta, det er måske det mest omfattende bibliotek, både funktionelle og til at støtte biblioteker. For dens funktion, i virkeligheden, kan du vælge mellem en række rammer, takket være den fil "adapter", der er specielt fremstillet og leveret af forfatteren:

Den visuelle virkning (konfigureres via huden / css), derefter, i modsætning til de andre, er helt sikkert mere spændende. Attributterne er kun rel når den i sin indre rum er alle andre konfiguration parametre. For eksempel, at oprette et galleri, bare brug:

Almindelig tekst
HTML:
  1. rel = "shadowbox[Vacation]" > The Beach </a> <a href = "beach.jpg" rel = "shadowbox[Vacation]"> The Beach </ a>
  2. rel = "shadowbox[Vacation]" > The Pier </a> <a href = "pier.jpg" rel = "shadowbox[Vacation]"> Den Pier </ a>

Hvis du ønsker at indstille nogle muligheder (se hjemmesiden for komplet liste) blot bruge følgende syntaks:

Almindelig tekst
HTML:
  1. rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image </a> <a href = "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}"> Min Image </ a>

På internettet kan du finde andre, såsom Highslide JS. Ja, hvis du ønsker at fortælle nogle andre bibliotek ... Men personligt foretrækker jeg Shadowbox for enkelhed, skalerbarhed og på tværs af rammer.

Karakter: 9 - Home Page Shadowbox 1.0b

Related Post

Tags: gallerier,
Offentliggjort i Ajax, CSS, Design & Grafik, Internet, Javascript, udvikling, jQuery | 12 kommentarer »

script.aculo.us 1.8 preview

Mandag den 15 oktober 2007

Preview Bibliotek virkninger Scriptaculous, den 1.8 indtil 2.0:

  • Prototype 1.6 (kuffert nyeste version)
  • Komplet omskrivning af Ajax.InPlaceEditor og Ajax.InPlaceCollectionEditor
  • Fuld CSS arv i Effect.Morph
  • Nye centrale virkning: Effect.Tween
  • Lyd: afspille MP3-filer for lydeffekter; bruger indfødte afspilning på IE og tilgængelige plugins, hvor det er muligt
  • Ydeevne
  • Tonsvis af fejlrettelser

For den komplette liste over forbedringer, så CHANGELOG

Related Post

Javascript, Udvikling
Offentliggøres på internettet, Javascript, Udvikling | Ingen kommentarer »