Mellieurs plugins pour CMS Minuterie et compteur intelligentsMellieurs plugins pour CMS Minuterie et compteur intelligents

Voir la démoAcheter $25

- Voir Plus d'information - le script

Smart Timer And Counter est un plugin jQuery qui peut être utilisé pour ajouter des minuteries et des horloges à la page Web. Le plugin est hautement configurable et extensible grâce à des skins personnalisés (composant visuel), des modes (logique d’horloge / minuterie) et des langues (traduire les étiquettes).

Suivre sur Twitter Suivez Envato S'inscrire à la Newsletter

Tout le style est fait en utilisant CSS (et Canvas pour la peau circulaire), et tous les styles inclus sont du CSS pur sans images utilisées. Les contrôles sont réactifs, utilisent des requêtes multimédias pour modifier la taille des compteurs et peuvent se diviser en plusieurs lignes sur des écrans plus petits.

Le plug-in est testé avec les navigateurs Android actuels, iPhone et iPad Safari et Chrome, tous les navigateurs de bureau modernes (IE8 et IE9 ne montreront pas la plupart des styles liés à certains skins plus complexes). Il nécessite la prise en charge de JavaScript et de jQuery pour fonctionner.

Possibilités de coiffage infinies

Skins: cercles et rondes

Modes d’horloge et de compteur, dispositions personnalisées

Le plugin peut fonctionner comme horloge ou comme compteur. S’il est utilisé comme horloge, vous pouvez afficher la date / heure actuelle, ou vous pouvez commencer à partir de n’importe quelle date. Le mode horloge peut afficher l’heure au format 24 heures (par défaut) ou au format 12 heures (avec le badge AM / PM). Le compteur peut compter à rebours jusqu’à n’importe quelle date, compter à rebours n’importe quel nombre de secondes ou jusqu’à n’importe quelle limite de secondes. Le plugin peut afficher différentes combinaisons d’éléments d’heure et de date, de diviseurs et d’étiquettes.

Liste des commandes de modes
  • Disposition: ordre de combinaison pour «années,« mois »,« jours »,« heures »,« minutes »,« secondes ».
  • Diviseurs: plusieurs diviseurs disponibles pour diviser les éléments date / heure.
  • Nombre de chiffres: personnalisez le nombre de chiffres pour chaque élément date / heure.
Liste des méthodes de comptage
  • Date: il doit être dans le futur défini à l’aide de l’objet de données JavaScript. Le plugin comptera jusqu’à zéro pour atteindre la date définie.
  • Écoulé: il doit être dans le passé défini à l’aide de l’objet de données JavaScript. Le plugin compte le temps écoulé depuis la date passée.
  • Secondes: comptez jusqu’à zéro à partir du nombre de secondes spécifié.
  • Cible: compter de zéro au nombre de secondes spécifié.

Module de comptage ascendant et descendant basé sur des nombres

Le plugin peut également utiliser un format basé sur des nombres pour compter vers le haut ou vers le bas avec une grande flexibilité. Il permet un nombre personnalisé de chiffres, de décimales, de décimales et de milliers de séparateurs, une étape personnalisée (même aléatoire à partir de la plage définie). Vous pouvez spécifier un caractère avant et après le compteur (comme le signe de la devise).

Tous les skins inclus (à l’exception de Circular) fonctionnent avec le module de nombres. Certains skins peuvent avoir des paramètres un peu différents.

7 skins de base: base, simple, animé, circulaire, personnalisé, simple et en ligne

7 skins de base: base, simple, animé, circulaire, personnalisé, simple et en ligne
Le plugin a 7 skins intégrés pour afficher les horloges / compteurs. Les skins simples et animés ont 14 styles chacun (certains identiques). La peau animée utilise des animations (SlideIn, SlideOut, Fade, FadeIn, FadeOut) pour changer les chiffres. L’enveloppe en ligne peut être utilisée sur les balises SPAN pour ajouter des compteurs en ligne avec du texte avec des changements de style minimes.

Liste des skins disponibles
  • Facile: moyen simple d’afficher les chiffres, avec 14 styles prédéfinis.
  • Animé: animation pour changer de chiffres, avec 14 styles prédéfinis et 5 animations.
  • En ligne: pour les éléments à l’intérieur du texte, avec 6 styles prédéfinis.
  • Circulaire: utilise Canvas pour rendre les cadrans circulaires, personnalisations de couleurs illimitées.
  • Douane: étendu de la peau animée, contrôle gratuit des couleurs et du style.
  • Plaine: une peau plus simple avec un contrôle libre des couleurs et un certain contrôle pour les styles.
  • Base: skin bonus sans style inclus, avec le même comportement que le skin Simple.

Retourner la peau

Animation de retournement de minuterie
Flip skin est entièrement personnalisable et vous permet d’utiliser des couleurs personnalisées pour les chiffres, l’arrière-plan et l’étiquette, d’utiliser des ombres, de spécifier les dimensions, de modifier la famille et la taille de police.

Numéros Flip Animation
Skin fonctionne avec les modules de minuteries et de nombres dans le plugin Smart Timer And Counter. Il peut inverser plusieurs chiffres en même temps.

4 skins LED: segments, barres, matrice 3 × 5 et 5 × 7

Peau: 7 segments
Il s’agit d’un écran LED classique à 7 segments, et il prend en charge différentes tailles (poids de 2 à 20 pixels) avec une largeur et une hauteur personnalisées pour les segments, les couleurs personnalisées, les transitions et l’effet de biais à n’importe quel degré. Les paramètres de rayon de bordure ne sont pas pris en charge pour cet habillage.

Peau: Matrice de points 5x7
Ces skins créent une matrice avec 3 × 5 ou 5 × 7 points pour chaque nombre. Vous pouvez personnaliser la taille (n’importe quelle valeur de poids de point), les couleurs personnalisées, le rayon de la bordure pour les points, les transitions et l’effet d’inclinaison à n’importe quel degré.

8 Peau plate: panneaux, diamants, carreaux, carrés, barres, rectangles, cercles, ronds

8 Peau plate: panneaux, diamants, carreaux, carrés, barres, rectangles, cercles, ronds
Peaux supplémentaires basées sur des formes de base. Ces skins sont réservés au module Counter, ils ne peuvent pas être utilisés avec le module Numbers.

Liste des skins disponibles
  • Panneaux
  • Diamants
  • Carrelage
  • Bars
  • Sqaures
  • Rectangles
  • Cicles
  • Les manches

La peau personnalisée permet une personnalisation gratuite

La peau personnalisée permet une personnalisation gratuite
Pour utiliser ce skin, le skin animé doit également être chargé. Cette peau n’a pas de peaux prédéfinies. Mais, vous pouvez définir des couleurs personnalisées, l’arrière-plan, les ombres et les effets à partir des paramètres du plugin. Cela vous permet de personnaliser facilement les couleurs et les styles. En outre, vous pouvez changer les couleurs indépendamment pour chaque élément de compteur.

Plain Skin permet une personnalisation facile

Plain Skin permet une personnalisation facile
Il s’agit d’un skin très simple qui permet de personnaliser les couleurs, la police et d’autres éléments.

Circular Skin utilise Canvas pour afficher les cadrans circulaires

Circualar Skin utilise Canvas pour afficher des cadrans circulaires
Basé sur une bibliothèque tierce jQuery Knob, permet une personnalisation complète de la taille et des couleurs (même en utilisant la transparence) pour les numéros de numérotation.

Personnalisation et intégration faciles avec une documentation détaillée

Personnalisation et intégration faciles avec une documentation détaillée
Le plugin a une large gamme de paramètres pour les skins, les modes, la langue. Il est facile à personnaliser et à utiliser avec n’importe quel projet basé sur jQuery. La documentation contient une explication détaillée de tous les paramètres, une liste de valeurs, une liste de styles et plus encore. Le package de plugins contient de nombreuses démos.

De nombreux événements et méthodes disponibles pour un contrôle supplémentaire

De nombreux événements et méthodes disponibles pour un contrôle supplémentaire
De nombreux événements disponibles pour attacher votre propre code pour contrôler les choses en dehors des minuteries (barre de progression, événements sur la page) avec des méthodes pour obtenir l’état actuel des comptages ou des horloges, arrêter ou démarrer les minuteries et plus encore. L’exemple dans le package montre comment contrôler la barre de progression pour le compte à rebours.

Autres fonctionnalités du plugin

  • Prise en charge de la traduction en utilisant objets langage pour changer les étiquettes des éléments.
  • Joindre votre propre code sur événements de rappel pour gérer le démarrage, l’arrêt, la fin…
  • De nombreux paramètres à contrôler affichage des compteurs: séparateurs, espacement, étiquettes…
  • Comprend des méthodes pour démarrer, arrêter, réinitialiser ou modifier contre les éléments d’objet.
  • Comprend 7 fichiers de documentation PDF avec des informations sur le plugin.
  • Comprend 26 fichiers démo avec près de 100 démos.

Configuration requise

  • jQuery 1.7 ou plus récent
  • Fonctionne avec jQuery 2.x et 3.x

Documentation

Le plugin contient des guides d’utilisation et de développement PDF dans le package du plugin, dans le répertoire ‘docs’. Consultez ces documents pour obtenir des informations sur les options du plugin, son utilisation et plus encore. Pour commencer avec le plugin, ouvrez le fichier ‘index.html’ dans le navigateur pour obtenir des informations sur l’utilisation du plugin et une liste de démos pour vous familiariser avec l’utilisation du plugin. Vous pouvez également trouver chaque exemple dans le répertoire «demo».

Avis de la version 4

La version 4.0 du plugin contient tous les skins qui appartenaient auparavant aux addons. Pour cette raison, certains noms de fichiers ont été modifiés, donc lorsque vous passez à la nouvelle version, assurez-vous de vérifier les fichiers dont vous avez besoin et si certains d’entre eux ont changé de nom.

Changelog

Version 4.1 / 2020.06.12.

  • Mise à jour: testé avec jQuery 3.5.1
  • Mise à jour: refactorisation de certains gestionnaires d’événements jQuery
  • Mise à jour: diverses améliorations du noyau du plugin
  • Mise à jour: suppression de plusieurs instances de variables inutilisées
  • Correction: quelques cas de valeur de vitesse d’animation mal utilisée

Version 4.0 / 2019.04.23.

  • Ajouté: Tous les skins supplémentaires inclus dans le package principal
  • Ajouté: Toutes les démos supplémentaires pour tous les skins
  • Ajouté: Dropdown utilisé pour le contrôle de navigation de démonstration
  • Ajouté: packs d’installation supplémentaires pour divers skins ajoutés
  • Mise à jour: Minfication CSS améliorée à l’aide du moteur CSSO
  • Mise à jour: JavaScript uniquement minifié, n’utilisant plus de packer
  • Mise à jour: exemples de démonstration et instructions d’installation améliorés
  • Mise à jour: de nombreuses améliorations du noyau JavaScript
  • Mise à jour: diverses modifications apportées aux noms de fichiers pour une meilleure cohérence
  • Mise à jour: fichiers de démonstration CSS et JS déplacés vers leur propre emplacement
  • Mise à jour: fonctionne avec jQuery 3, testé avec jQuery 3.4
  • Mise à jour: certains noms de fichiers de distribution et de pack sont modifiés
  • Correction: plusieurs constructions mineures liées au langage
  • Correction: certains skins de base n’étaient pas minfiés
Site Web du plugin Journal des modifications du plugin Vidéo sur YouTube Posez n'importe quelle question

Laisser un commentaire