Apple est une marque très populaire dans la nouvelle ère technologique dans laquelle nous vivons. Les concepteurs et les développeurs conviennent que les produits Apple font preuve d'un talent exquis et d'une passion pour leurs compétences. Au fil du temps, la conception de l'interface utilisateur a pris une tournure ascendante et est désormais l'un des sujets les plus en vogue parmi les concepteurs Web.
Ci-dessous, nous verrons comment créer un petit formulaire de saisie de style Apple avec une structure de base et des scripts. Tout le code inclus est basé sur XHTML Transitional Doctype et sur les nouvelles techniques CSS2 / CSS3. Nous utiliserons également la bibliothèque jQuery 1.4.1 pour prendre en charge nos fonctions d’affichage.
Essaye le
Voici un aperçu de ce que nous allons construire. Consultez la page de démonstration pour la voir en direct et téléchargez l'exemple pour l'examiner de plus près.
Live Demo - Télécharger
Construire notre HTML et CSS
Avant de pouvoir commencer à développer, il est important de mettre de l'ordre dans la structure du code frontal. Heureusement, ce processus est très simple et ne devrait pas prendre beaucoup de temps. Ci-dessous, j'ai inclus une copie dépouillée du code HTML de notre exemple? Index.html? document. Cela devrait tous être du code standard pour afficher un formulaire de base très basique, rien de plus que la connaissance de base d'un développeur HTML.
Ici, j'ai mis en place 2 éléments d'entrée très importants sous les ID: unameblock? et? pwblock ?. Ceux-ci représentent bloc de nom d'utilisateur et blocage du mot de passe, respectivement, et sera très important plus tard dans notre script. Maintenant que notre code a l'air bien, il serait sage de passer aux styles CSS.
Ce sont les vraies règles de structure épurées puisque CSS est ce qui donne leur forme à tous les éléments HTML. Il n'y a pas beaucoup de changements que nous allons inclure. Quelques réinitialisations de base pour les variables globales, ainsi que l’alignement et le positionnement des champs de saisie. Vous trouverez ci-dessous des extraits du code source, expliqués par intervalles de bits.
Ici, nous avons notre réinitialisation globale avec le astérisque (*) sélecteur supprimant toutes les marges et les marges intérieures du navigateur. Nous donnons également quelques styles à l’élément body pour positionner notre forme au centre. La division #c est notre division de conteneurs qui a été centrée dans l’intérêt de notre démo.
Le premier bloc apparent est utilisé pour styliser nos champs de saisie. Il cible tous les éléments en entrée avec une classe de? U1? où nos champs de nom d'utilisateur et de mot de passe sont exécutés. Plutôt que de placer des déclarations de style 10-20 sur une seule ligne, il est beaucoup plus facile pour l’éditeur de conserver le texte au niveau des blocs.
Ici, nous avons les styles pour configurer l'apparence de nos champs d'entrée. Rembourrage, taille de police, parmi de nombreuses bordures et propriétés de manipulation de texte. Nous utilisons beaucoup de nouvelles techniques CSS3, ce qui devrait être évident pour tous les développeurs CSS.
Nouvelles entités CSS3
Deux nouvelles fonctions CSS3 que nous utilisons sont -webkit-gradient et -moz-linear-gradient qui peut générer des dégradés à la volée. C’est une fonctionnalité étonnante qui n’a pas été abordée dans de nombreux articles sur CSS3. Cela évite d'avoir à utiliser des images lors de la création de dégradés d'arrière-plan conformes aux normes.
Nous avons également -webkit-box-shadow et -moz-box-shadow. Des schémas de nommage similaires aident à créer une confusion entre les navigateurs Webkit et les navigateurs Gecko basés sur Mozilla.
Plus bas, nous avons 3 autres styles qui attaquent notre bouton d'envoi ainsi que les états pour nos formulaires de saisie. le :concentrer pseudo-ciblage signifie que CSS n'appliquera nos styles que si l'utilisateur est concentré sur l'un ou l'autre des champs de saisie. Ces styles afficheront une lueur bleue pour le focus et une lueur rouge pour les erreurs (très utile lors du débogage des connexions utilisateur et des formulaires d'inscription).
Jusqu'ici tout cela a l'air génial! En fait, tout ce que nous avons à faire est d’inclure quelques scripts / styles dans notre section d’en-tête pour bien commencer à utiliser nos effets dynamiques. Si vous prenez le document actuel et incluez notre feuille de style, nous pouvons obtenir les effets de survol immédiatement.
Travailler avec des effets jQuery
jQuery est une bibliothèque JavaScript incroyable qui s'est révélée utile à maintes reprises. Votre développeur Web moyen est fortement concentré sur la rapidité et la précision des scripts. C'est quelque chose que jQuery prend et intériorise avec ses idées.
Ci-dessous se trouve une petite section qui doit être ajoutée entre les tête balises de votre document. Je vais en expliquer quelques-unes ci-dessous et aborder également le code des coulisses.
Notre style.css est le fichier qui inclut toutes nos règles CSS énumérées ci-dessus. Une autre inclusion est tip-yellowsimple.css qui n'a pas encore été mentionné. C'est un script écrit via jQuery en tant que plug-in pour les survols d'info-bulles.Avec cette feuille de style (téléchargement avec source de démonstration), nous sommes en mesure de styler les info-bulles sur toutes les actions.
Nos deux fichiers JavaScript sont vraiment basiques et explicites. Nous accédons à jQuery 1.4.1 min afin de réduire les vitesses de traitement et de téléchargement. Nous lisons également la base de données de codes des API de Google, qui stocke toutes les versions précédentes et actives des scripts populaires. Cela représente un effort considérable et permet aux projets de développement de progresser sans avoir à télécharger constamment la bibliothèque jQuery manuellement.
Le deuxième fichier que nous avons? Jquery.poshytip.js? contient notre code de plug-in. Poshytip est une classe jQuery écrite par Vasil Dinkov pour prendre en charge les info-bulles dynamiques. Le code est vaste et inutile d'apprendre en détail. Cependant, si vous êtes un geek de jQuery, n'hésitez pas à consulter ses efforts manuels pour voir comment ces méthodes s'appellent et quelles variables vous pouvez éditer.
Appel d'action de base
Tout ce dont nous avons besoin maintenant, c'est de notre infâme appel à l'action! C’est notre fonction principale qui chargera le chargement de documents et se préparera à lancer quel que soit le signal que nous appellerons. Dans ce cas, nous recherchons un événement qui se produit lorsqu'un utilisateur se concentre sur l'un des champs de saisie.
Une dernière étape consiste à ajouter ce code dans la tête sous tous nos fichiers inclus. C'est du code JavaScript simple, il devrait donc être encapsulé avec un scénario étiquette. Pour faciliter, j'ai supprimé les balises dans le code ci-dessous afin que nous puissions nous concentrer uniquement sur la fonctionnalité js.
Donc, ce que nous faisons appelle un générique une fonction() {} pour vérifier certains événements. Nous créons 2 nouvelles instances du poshytip () méthode basée sur nos formulaires d'entrée. Cela peut être vu lorsque nous analysons le DOM pour les ID d'élément? Unameblock? et? pwblock ?.
Chacun des paramètres individuels en place étend les fonctionnalités de poshytip. Si vous souhaitez consulter la documentation de toutes les méthodes, il existe une excellente collection mise en ligne par Vasil. À savoir montrer sur est notre variable la plus importante qui indique au moteur d'analyse de vérifier toute activité de focus dans ces deux éléments.
AlignX et AlignY sont importants pour le placement. Ceux-ci conservent les valeurs pour lesquelles notre info-bulle apparaîtra dans la page. Cela peut être bas, centre, haut, avec des placements décalés tels que intérieur gauche et intérieur droit. Essayez de jouer avec ceux-ci si vous préférez que les info-bulles apparaissent sur le côté ou le bas au lieu du haut.
Ce que vous n'avez peut-être pas remarqué maintenant, c'est d'où notre texte est chargé. Poshytips le rend simple ici aussi, où la valeur de notre Titre Cet attribut est affiché dans le texte de l'info-bulle. Cela rend le ciblage d'éléments spécifiques extrêmement simple et très productif!
Conclusion
Voici certaines des étapes les plus élémentaires de la création d’un champ de saisie de style Apple. Il existe de nombreux autres effets uniques qui peuvent être appliqués à l'aide de jQuery et qui vont en dehors de la portée de ce tutoriel. Découvrez quelques démos sur le site Web d'Apple pour plus d'inspiration. De plus, si vous souhaitez télécharger le package de démonstration complet, vous pouvez le faire ici.