Comment personnaliser et thématiser l’interface utilisateur jQuery Datepicker
jQuery UI est tout simplement génial et, en raison de sa simplicité d'utilisation, il est populaire et largement utilisé dans presque tous les sites Web nécessitant des fonctionnalités interactives..
Et, dans cet article, nous allons examiner l'une des fonctionnalités fournies, le widget Datepicker..
Nous essaierons d'apprendre à personnaliser le thème du calendrier afin que vous puissiez créer votre propre thème qui correspond à votre conception globale. Cependant, vous devez avoir un peu de compréhension de JavaScript et une connaissance de CSS avant de suivre ce tutoriel..
- Démo
- Source de téléchargement
Si vous êtes prêt, commençons.
Les actifs
Préparons quelques atouts essentiels pour le calendrier.
Premièrement, la conception du calendrier fera référence à ce fichier PSD de Premium Pixels. Donc, nous ferions mieux de le télécharger d'abord pour nous aider à prendre un échantillon des couleurs dont nous avons besoin. Ensuite, téléchargez deux modèles de Subtil Les motifs que nous allons utiliser comme arrière-plan de notre calendrier. Dans cet exemple, nous avons décidé d'utiliser les modèles suivants: denim noir et cuir foncé.
Nous aurons également besoin d’un outil de développement Web tel que Firebug pour inspecter les classes d’éléments / les identifiants générés par l’interface utilisateur jQuery..
Eh bien, je pense que nous avons eu assez de préparation. Passons maintenant à la première étape.
Étape 1: jQuery UI Datepicker
Tout d’abord, allez à la page de téléchargement de jQuery UI. Dans cette page, vous verrez quelques options, comme suit: l'interface utilisateur, les widgets, les interactions et les effets.
Nous devrions désélectionner tous les composants, comme nous n'avons pas besoin de tous.
Ensuite, dans le Widgets section sélectionne uniquement le sélecteur de date. L’interface utilisateur jQuery sélectionnera automatiquement les dépendances essentielles, puis Télécharger le fichier.
Lier tous les fichiers téléchargés - sauf le CSS - à votre document vierge HTML, comme suit:
Étape 2: Personnaliser le Datepicker
Dans cette étape, nous allons configurer un sélecteur de date avec les options suivantes.
Le code ci-dessus demandera au jQuery d’afficher le calendrier sur un élément avec sélecteur de date id. Donc, nous devons mettre ce qui suit div tag avec - datepicker ID - dans la section body pour former le calendrier:
Maintenant, le calendrier devrait déjà avoir été généré et apparaître comme ceci, tout simplement sans aucun style, mais il a toujours les fonctionnalités.
Étape 3: les styles
Commençons maintenant à dessiner le calendrier. Nous allons commencer par normaliser tous les éléments - comme d’habitude - et créer une nouvelle feuille de style; dans cet exemple, je l’appelle datepicker.css. Ensuite, liez-les tous au document HTML.
Ensuite, nous attacherons d’abord un arrière-plan au corps afin que notre code HTML ne semble pas trop clair.
body background: url ('… /img/darkdenim3.png') repeat 0 0 # 555; Ensuite, nous allons spécifier la largeur du sélecteur de date, le positionner au centre et ajouter une ombre portée pour donner l’effet de prominece au calendrier..
.ui-datepicker width: 216px; hauteur: auto; marge: 5px auto 0; police: 9 pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Nous allons également supprimer la décoration de soulignement par défaut de chaque balise d'ancrage..
.ui-datepicker a text-decoration: none;
Le calendrier dans l'interface utilisateur jQuery est formé avec un table. Alors ajoutons 100% largeur pour le table, il aura donc la même largeur maximale que l’enveloppe ci-dessus; C'est 216px
.table ui-datepicker width: 100%;
Styling the Header Section
Datepicker a une section d’en-tête contenant Mois année du calendrier. Cette section aura la texture de cuir sombre que nous avons téléchargée auparavant avec une couleur de police légèrement blanche et 1px ombre blanche en haut.
.ui-datepicker-header background: url ('… /img/dark_leather.png') repeat 0 0 # 000; couleur: # e0e0e0; poids de police: gras; -webkit-box-shadow: encart 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: encart 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: incrément 0px 1px 1px 0px rgba (250, 250, 250, .2); text-shadow: 1px -1px 0px # 000; filtre: ombrage (couleur = # 000, offx = 1, offy = -1); hauteur de ligne: 30px; largeur de bordure: 1 px 0 0 0; style de bordure: solide; couleur de bordure: # 111; Ensuite, centrons le Mois position.
.ui-datepicker-title text-align: center;
Remplace le Suivant et Prev texte avec les images de la flèche de l'image-objet tranchées à partir du PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; largeur: 30px; hauteur: 30px; text-align: center; curseur: pointeur; background-image: url ('… /img/arrow.png'); répétition de fond: non répétée; hauteur de ligne: 600%; débordement caché; Ensuite, ajustez la position de la flèche respectivement.
.ui-datepicker-prev float: left; position de fond: centre -30px; .ui-datepicker-next float: right; position d'arrière-plan: center 0px;
Tandis que le noms de jour la section est enveloppée dans un la tête, sur la base de notre référence de conception, il aura un dégradé légèrement blanc. Et, pour simplifier notre tâche, nous allons utiliser cet outil pour générer le code de dégradé:
.ui-datepicker thead background-color: # f7f7f7; image d'arrière-plan: -moz-linear-gradient (en haut, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, stop de couleur (0%, # f7f7f7), stop de couleur (100%, # f1f1f1)); background-image: -webkit-linear-gradient (haut, # f7f7f7 0%, # f1f1f1 100%); image d'arrière-plan: -o-linear-gradient (haut, # f7f7f7 0%, # f1f1f1 100%); image d’arrière-plan: -ms-linear-gradient (haut, # f7f7f7 0%, # f1f1f1 100%); image d'arrière-plan: dégradé linéaire (haut, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solide #bbb;
le noms de jour le texte aura la couleur gris foncé de # 666666 et ils auront aussi un blanc mince ombre de texte pour lui donner l'effet pressé.
.ui-datepicker th text-transform: majuscule; taille de police: 6 pt; rembourrage: 5px 0; couleur: # 666666; text-shadow: 1px 0px 0px #fff; filtre: ombrage (couleur = # fff, offx = 1, offy = 0);
À ce stade, le calendrier apparaîtra comme ceci:
Styliser les dates
Les dates du calendrier sont emballées dans td ou des données de table. Donc, nous allons régler le rembourrage sur 0 pour supprimer les espaces entre les td et lui donner une bordure droite de 1px.
.ui-datepicker tbody td padding: 0; border-right: 1px solide #bbb;
Sauf le dernier td, qui n'aura pas de bordure droite. Nous plaçons la bordure droite à 0 pour cette.
.ui-datepicker tbody td: dernier-enfant border-right: 0px;
La rangée de la table sera presque la même. Il aura une bordure inférieure 1px sauf pour la dernière ligne.
.ui-datepicker tbody tr bordure-bas: 1px solide #bbb; .ui-datepicker tbody tr: dernier-enfant border-bottom: 0px;
Mise en forme de l'état par défaut, survolé et actif
Dans cette étape, nous définirons le survol de la date et les styles actifs. Nous allons d’abord définir l’état par défaut de la date en spécifiant la dimension; centrer la position du texte de la date, ajouter une couleur de dégradé et une ombre blanche intérieure.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; poids de police: gras; text-align: center; largeur: 30px; hauteur: 30px; hauteur de ligne: 30px; couleur: # 666666; text-shadow: 1px 1px 0px #fff; filtre: ombrage (couleur = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background: #ededed; arrière-plan: -moz-linear-gradient (en haut, #ededed 0%, #ededede 100%); arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, stop de couleur (0%, # modifié), stop de couleur (100%, # déduit)); arrière-plan: -webkit-linear-gradient (en haut, #ededed 0%, # dedede 100%); arrière-plan: -o-linear-gradient (haut, #ededed 0%, # dedede 100%); arrière-plan: -ms-linear-gradient (haut, #ededed 0%, # dedede 100%); fond: linéaire-dégradé (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: encart 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: encart 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: incrément 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; couleur: # b4b3b3;
Lorsque vous survolez la date, elle devient légèrement blanche..
.ui-datepicker-calendar .ui-state-hover background: # f7f7f7;
Lorsque la date est dans un état actif, elle aura les styles suivants.
.ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: encart 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: encart 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: incrément 0px 0px 10px 0px rgba (0, 0, 0, .1); couleur: # e0e0e0; ombre du texte: 0px 1px 0px # 4d7a85; filtre: ombrage (couleur = # 4d7a85, offx = 0, offy = 1); bordure: solide 1px # 55838f; position: relative; marge: -1px;
Maintenant, le calendrier devrait bien paraître.
Fixer la position
À ce stade, regardez attentivement la date. Lorsque vous cliquez sur la date dans la première ou la dernière colonne, vous remarquerez que l'état actif déborde d'un pixel du bord de l'agenda..
Donc, ici, nous allons faire quelques petites corrections.
Tout d'abord, nous allons réduire la largeur de la date à 29px, et définissez la marge droite de la dernière colonne et la marge gauche de la première colonne sur 0 inverser le -1px marge que nous avons définie précédemment pour l'état actif.
.ui-datepicker-calendar td: premier-enfant .ui-state-active width: 29px; marge gauche: 0; .ui-datepicker-calendar td: dernier-enfant .ui-state-active width: 29px; marge droite: 0;
La date à la dernière ligne du calendrier aura également un traitement similaire.
.ui-datepicker-calendar tr: dernier-enfant .ui-state-active hauteur: 29px; marge inférieure: 0;
Voyons maintenant le résultat. Eh bien, le calendrier est maintenant magnifique et correspond parfaitement à notre référence de conception. Et, vous pouvez voir la démo et télécharger la source pour examiner le code à partir des liens situés sous l'image..
- Démo
- Source de téléchargement
Bonus: étendre le calendrier
Aujourd'hui, nous avons beaucoup appris sur la création d'un thème personnalisé pour jQuery UI Datepicker. Mais vous ne devriez pas vous arrêter ici, car il y a encore beaucoup de choses qui peuvent être étendues à partir de cette datepicker. En fonction de vos compétences jQuery et CSS, vous étendez le calendrier pour qu'il ressemble à ceci: saisie de texte avec un sélecteur de date superposé.
- Démo
- Source de téléchargement
Lectures complémentaires
Pour en savoir plus sur l'interface utilisateur de jQuery. Vous pouvez lire la documentation complète ici:
- Premiers pas avec jQuery UI
- Theming jQUery UI
- Interface utilisateur jQuery: classes de l'API Theming
Dernières pensées
Merci d'avoir lu et suivi ce tutoriel, j'espère que vous le trouverez utile. Et, si vous avez des commentaires ou souhaitez ajouter des éléments qui pourraient ne pas figurer dans ce didacticiel, n'hésitez pas à les signaler dans la section commentaires ci-dessous. Merci encore).
