Share
Laten we verder toevoegen aan ons arsenaal van de Foundation door te kijken naar de Joyride-plug-in, die gebruikers helpt bij het doorlopen van uw sites. We zullen ook kijken naar prijzentabellen, standaardtabellen en uitwisseling; een nieuwe responsieve afbeeldingstool. We bespreken de implementatie van deze functies met een eenvoudige sjabloon die u kunt downloaden en waarmee u kunt spelen.
We beginnen met de meest eenvoudige functies die we in deze zelfstudie bespreken.
Door een klasse van "paneel" toe te voegen aan bijna elk element, verandert het in een licht gekleurd blok. Niet alleen elk type blok, omdat deze panelen randvakstijlen gebruiken, dus de opvulling is opgenomen in de breedte van het object. Dit is een erg handige aanpak omdat je veel meer intuïtieve controle hebt over elementafmetingen.
We hebben een eenvoudige selectie van hostingpakketten waaruit u kunt kiezen, deze zullen fantastisch werken voor elk bedrijf. Met ultrasnelle mySQL-databaseverbindingen vliegen content management-systemen echt. Tel daarbij op 24/7 klantenservice en 99,9% uptime en je hebt een geweldig hostingpakket.
Om dit punt te illustreren, heb ik een lay-out met twee kolommen gemaakt met behulp van een afbeelding en het paneel, perfect uitgelijnd.
Een van de belangrijkste redenen om een website te bezitten / bouwen is om iets te verkopen. Als gevolg hiervan zijn prijstabellen heel gewoon op de interwebs en dat zijn ze al jaren, dus natuurlijk hebben Foundation dit gebied gedekt. Elke tabel is eigenlijk een ongeordende lijst, met lijstitems en enkele goedgeplaatste klassen.
De ul-tag zelf heeft een klasse van "prijzentabel", terwijl u binnen de optie "title", "price", "description", "bullet-item" en "cta-button" kunt gebruiken. De enige aanvullende aanpassing die u nodig hebt, is uw inhoud. Misschien wilt u een aantal van deze naast elkaar leggen om meer een prijsvergelijkingstabel te maken.
Prijzenstabellen zijn geweldig, maar zo nu en dan heb je een echte html-tabel nodig voor het weergeven van gegevens. Het instellen van deze in Foundation is heel gemakkelijk omdat er helemaal geen echte setup is. Voeg gewoon uw tabelmarkering toe zoals gebruikelijk en de stijlen worden verzorgd. Het enige dat u misschien wilt doen, is kolombreedten toevoegen om uw kolommen gelijk te maken.
| Opstarten | Onderneming | Global Corporation |
|---|---|---|
| 1 database | 5 Database | 10 Database |
| Geen back-ups | 50 GB back-ups | 100 GB back-ups |
Hoewel alle afbeeldingen in Foundation standaard vloeiend zijn, kunnen zich soms problemen voordoen - het hele onderwerp van afbeeldingen in RWD is aan de gang.
En laat ik daaraan toevoegen, ik denk dat het cray-cray is dat iedereen in onze branche het over een uur * alleen * kan hebben. #RWD
- Dave Rupert (@ davatron5000) 14 mei 2013
Een dergelijk probleem doet zich voor wanneer u tekst in een afbeelding hebt. Onlangs heeft Zurb een nieuwe plugin toegevoegd genaamd "Interchange"; zijn taak is simpel - vervang de afbeelding van je keuze door een andere als de schermgrootte een bepaald punt bereikt. Het werkt door een speciaal kenmerk toe te voegen, namelijk "gegevensuitwisseling". Dit wordt gebruikt om de opties voor de wijzigingen in de beeldbron te herbergen.
Hier maak ik gebruik van veel van de opties die beschikbaar zijn in het attribuut. Er zijn nogal wat parameters, je kunt bijvoorbeeld een aangepast punt instellen om van afbeelding te wisselen.
Dit is niet de meest performante plug-in omdat wijzigingen een of twee seconden kunnen duren, hopelijk zal Zurb dit in de toekomst aanpakken. Een van de belangrijkste voordelen van deze plug-in is de laadtijd die het bespaart op mobiele apparaten. In plaats van een enorme jpeg op een 3G-verbinding te laden, kunt u een kleinere geoptimaliseerde versie van dezelfde afbeelding laden, waardoor bandbreedte vrijgemaakt wordt om de rest van de pagina te laden.
In elk deel van deze serie hebben we tot nu toe een JavaScript-plug-in besproken die beschikbaar is in Foundation, maar in dit geval zullen we er twee behandelen.
In sommige situaties is het handig om uw gebruikers mee te nemen in een magische mysterietour door uw gebruikersinterface. Google doet dit bijvoorbeeld bij het starten van nieuwe functies in veel van hun applicaties. Door uw gebruikers van stap tot stap te begeleiden, kunt u uitleggen wat elk onderdeel doet en waar het naartoe leidt. Joyride dekt dit door een lijst te gebruiken die elk lijstitem koppelt, waarbij uw tourstop wordt gehouden, met een element op de pagina. Deze lijst kan een geordende lijst zijn of een niet-geordende lijst, maar moet zowel de klasse "joyride-lijst" als het kenmerk "data-joyride" hebben.
Laten we beginnen, hier hebben we een intro.
Eerste stop
Hier gebruiken we de nieuwe uitwisselingsfunctie om afbeeldingen te veranderen op basis van de schermgrootte.
Tweede stop
We gebruiken prijstabellen hier om een lijst met services van een hostingbedrijf weer te geven.
Derde stop
Dit is slechts een link, maar het opent een modaal met een standaard tafel binnenin, opwindende eh?
Einde van de regel
Onze tour eindigt hier, vergeet niet om al je spullen mee te nemen op weg naar de uitgang.
Elk item in de lijst heeft zijn eigen "data-id" nodig, die moet overeenkomen met het element-ID waarmee het is gekoppeld. Als de eerste stop in uw rondleiding een h2-tag is, kan uw gegevens-id "data-id =" title "" zijn. Je h2 heeft een id van "titel" nodig. Gemakkelijk.
Afgezien van deze basisconfiguratie wil je een "volgende" knop toevoegen, zodat gebruikers gemakkelijk van de ene naar de andere stopplaats kunnen navigeren. Deze worden toegevoegd door een ander attribuut aan het lijstitem te koppelen; "Data = tekst". In het bovenstaande voorbeeld heb ik "Ga" gebruikt om aan de slag te gaan en "volgende" om verder te gaan.
Er zijn een paar opties voor joyride en sommige kunnen direct aan elk lijstitem worden toegevoegd. Hierboven heb ik gebruikt data-options = "tipLocation: top; tipAnimation: fade" en zoals je misschien al geraden hebt, wordt de tour stopgezet naar de top van het gekoppelde element, waardoor deze wordt vervaagd. Er zijn veel meer parameters die je kunt doorgeven voor JavaScript-initialisatie. U kunt ook gebruik maken van de cookies-plug-in, of als uw gebruikers zijn aangemeld, een optie opslaan om de tour maar één keer te laten zien.
Helaas is één ding dat Stichting (nog) niet bevat een testimonial-plugin / -functie. Deze kunnen echt van pas komen. Quovolver kan dit verhelpen met een eenvoudige set-up en flexibele markup. Voeg het script in je voettekst toe, gooi wat markup in en je bent weg.
In het volgende deel van ons onderzoek naar de Zurb Foundation zullen we het hebben over Magellan, dat een kleverige navigatie creëert. We kijken naar zichtbaarheidsklassen, rechts-naar-links-ondersteuning, toetsaanslagen, miniaturen, flexvideo en de ins en outs van zepto. Ik zal de gebruikscasussen van deze functies uitleggen en aangeven hoe ze het best in uw projecten kunnen worden geïmplementeerd.
Accentsconagua
