jQuery iPhone effekter
Som et JavaScript-bibliotek håndterer jQuery mange komplekse programmeringsopgaver, hvilket reducerer mængden af kode, du skal skrive. Ved hjælp af jQuery kan din virksomheds hjemmeside simulere den interaktive og iøjnefaldende touchscreen grafik på Apples iPhone. Tilføjelse af et jQuery-plugin til dit websted giver dig mulighed for at gengive populære iPhone-effekter som reaktion på en computermus.
Swipe
Når du hører ordet "iPhone", kan ordet "swipe" også komme til at tænke på, når du slår fingeren over en iPhone-skærm for at manipulere indholdet. Du kan gengive denne effekt ved hjælp af Overscroll jQuery-plugin af Azoff Design, fundet ved at klikke på linket "Zip Archive" i webstedets "Download source" -afsnittet. Når du har hentet ZIP-filen, skal du pakke den ud for at afsløre en JavaScript-fil ved navn Jquery.overscroll.min.js. For at tilføje det til din webside skal du indsætte følgende sætning i hoveddokumentet til dit dokument:
Du kan derefter tilføje en div-blok til dit dokuments kropsafsnit, som ligner den nedenfor angivne:
Værdien "div1" skal matche id'et af div'en i dokumentets kropsafsnit. Når du har lanceret din webside i en browser, kan du klikke på div'en for at flytte den rundt, hvis div'ens indhold overstiger dets dimensioner.
Vrikke
En af de mest subtile, men imponerende iPhone-effekter opstår, når du holder et ikon inde i et øjeblik: Det vinkler, indtil du trykker på det igen, hvilket giver dig en visuel anelse om, at du har "valgt" ikonet. Du kan føje denne effekt til din webside med UserDot jQuery Wiggle plugin; efter at du har hentet det, finder du flere filer og undermapper i downloadmappen. Kopieres til din webserver, disse filer og mapper gør et billede vinkle, når det klikkes ved at give det et ID som "wiggle" som vist i følgende eksempel:
Når du har tilføjet det billedmærke, skal du også indsætte følgende kode i dit dokuments script-afsnit:
$ (dokument) .ready (funktion () {var interval = null; $ ('# wiggle'). klik (funktion () {hvis ($ (dette) .wiggle ('isWiggling')) {$ (dette). wiggle ('stop'); ellers {$ (dette) .wiggle ('start');}});});
Klikfunktionen i den tredje sætning henviser til den samme "wiggle" ID-værdi, der er angivet i img-taggen. Tilføjelse af følgende script-tag til dokumentets hovedafsnit fuldfører installationsprocessen:
Når du ser din side i en browser, vil et billede du klikker på wiggle indtil du klikker på det igen. IWiggle-plugin'et anvender en roterende effekt fra Cascading Style Sheet, der fungerer i den seneste version af Firefox, Safari, Chrome og Opera fra og med 2012 samt Internet Explorer 10.
Billedzoom
Billeder gør sider interessant, og kan hjælpe folk med at se elementer mere detaljeret. At trykke på et iPhone-billede får det til at zoome; tapping det igen vender det tilbage til sin oprindelige størrelse. Du opretter en lignende effekt med museklik på din webside ved at tilføje følgende jQuery-kode til dit dokuments scriptafsnit:
$ (dokument) .ready (funktion () {var duration = 400; var zoomet = false; // $ ("# image"). klik (funktion
// Zoomed Size if (zoomed == false) {zoomed = true; $ ("# image"). animere ({højde: 400}, varighed); $ ("# image"). animere ({bredde: 430}, varighed); }
// Normal størrelse ellers {zoomed = false; $ ("# image"). animere ({højde: 200}, varighed); $ ("# image"). animere ({bredde: 215}, varighed); }}); });
Denne kode kalder funktionen jQuery animere, hvilket får et billede til at ændre højden og bredden, når den klikkes. Værdierne 400 og 430, der vises i afsnittet "Zoomed Size", henviser til de størrelser, billedet antager, når du zoomer, mens "Normal størrelse" -afsnittets værdier afspejler billedets normale højde og bredde. Du kan ændre disse værdier til alt, hvad du vil, og du kan ændre værdien af varighedsvariabelen - indstillet til 400 i dette eksempel - som bestemmer i millisekunder, hvor længe det tager billedet at zoome eller vende tilbage til normal størrelse. Højere værdier gør billedzoderen langsommere. Når du har tilføjet img-taggen nedenfor til dit dokuments kropsafsnit, kan du teste det via din webbrowser:
Billedets id-værdi er "billede" i dette eksempel, men navnet skal svare til det navn, der bruges i opkaldene til animationsfunktionen i jQuery-koden.
Overvejelser
Når du bruger jQuery på en webside, skal du indsætte følgende sætning i dokumentets hovedafsnit, for at linke det grundlæggende jQuery-kodebibliotek og tillade plugins at bruge det:
Når du tilføjer et jQuery-plugin script til dit dokuments hovedafsnit, skal det vises efter ovenstående erklæring. Gennemgangen af hjælpedokumentationen, der følger med plugins, viser også konfigurerbare muligheder for at tilpasse måden plugins genererer deres effekter.