Share
Het lijkt erop dat de obsessie van de webontwerpindustrie op dit moment de mogelijkheid is om een "aanbevolen gedeelte" te creëren. Hoewel het ooit veel vaardigheid vereist heeft, is dat niet langer het geval. In deze screencast laat ik je zien hoe je gemakkelijk een schuifbaar aanbevolen gedeelte kunt maken met een van de populaire thema's van Theme Forest als referentie. Laten we erin stappen!
* Sorry voor de minder dan perfecte geluidskwaliteit. Ik was van plan om deze week een condensatormicrofoon op te halen, maar ik heb het super druk gehad. Ik beloof dat ik zo snel mogelijk voor mezelf zal zorgen. Als u ook geïnteresseerd bent in het maken van videohandleidingen voor ons, kunt u mij e-mailen op [email protected].
Je kunt het thema van Justin hier bekijken en kopen.
Zoals altijd met een nieuwe plug-in, is de eerste stap om de website van de maker te bezoeken en de plug-in te downloaden. Het enige wat je nodig hebt is een klein Javascript-bestand - en natuurlijk een kopie van de jQuery-kernbibliotheek. Terwijl u op de site bent, neemt u even de tijd om de concepten te bespreken. Je zult versteld staan hoe eenvoudig de implementatie is, relatief gezien (of typen?).
Nadat u het Javascript-bestand op uw harde schijf hebt opgeslagen, importeert u dit in een nieuwe webtoepassing.
* Merk op dat u de kernbibliotheek voor jFlow zou moeten importeren. Anders krijg je een paar voor de hand liggende fouten!
Als u de jFlow-plug-in wilt gebruiken, moet u de functie van sommige id's en klassen begrijpen.
Nee 1 Nee 2 Nummer 3
Hier is een uitgelichte afbeelding. Leuk!
Hier is nog een nette afgebeelde afbeelding. Leuk!
Hier is een laatste zeer coole aanbevolen afbeelding. Leuk!
Laten we dit een beetje bespreken.
De code die we moeten schrijven is vrij eenvoudig. Bekijk eerst het definitieve script en dan ga ik over elke regel heen.
Accentsconagua
$ (function () $ ("# controller"). jFlow (slides: "#slides", width: "980px", height: "313px", duration: 600);); Dat is het!. Ten eerste wachten we op wanneer het document klaar is om te worden doorlopen. Vervolgens pakken we onze controller div en noemen we de "jFlow" -methode. Er zijn veel parameters beschikbaar voor ons, maar we zullen er maar een paar gebruiken.
Het enige andere dat u wilt implementeren, is CSS-styling. Echter, jFlow werkt perfect zonder. Dat zou natuurlijk alleen om esthetische redenen zijn. Als je meer informatie wilt, bespreek ik de styling een beetje meer in de screencast.
Het enige andere dat u wilt implementeren, is CSS-styling. Echter, jFlow werkt perfect zonder. Dat zou natuurlijk alleen om esthetische redenen zijn. Als je meer informatie wilt, bespreek ik de styling een beetje meer in de screencast.
De lay-out die hierboven te zien is, is opzettelijk eenvoudig. Ik zal het aan u overlaten om alle verschillende toepassingen voor te stellen!
Een paar weken geleden heeft Chris Coyier een tutorial gemaakt over een vergelijkbare plugin - "codaSlider". Ik heb de plug-in persoonlijk gebruikt in een aantal projecten, maar ik heb gemerkt dat jFlow veel eenvoudiger en gebruiksvriendelijker is. Hoe dan ook, beide zijn krachtige plug-ins. Gebruik ze verstandig.
U kunt onze RSS-feed toevoegen aan uw ITUNES-podcasts door het volgende te doen:
Dat zou het moeten doen! De screencast kan ook worden doorzocht op ITUNES in de komende vierentwintig uur.
Dit is de home-site van de jFlow-plug-in. Je kunt hiermee aan de slag met het Javascript-bestand, samen met enkele handige voorbeelden.
Bezoek website
Als u meer wilt weten of gewoon wat extra geld wilt verdienen, zorg dan dat u een bezoek brengt aan ThemeForest.net.
Bezoek website
Bekijk een andere jQuery-plug-in die een vergelijkbare functie vervult. In deze tutorial laat Chris Coyier zien hoe je de coda slider plug-in kunt implementeren om een mooie blogroll te maken.
Lees artikel
