L'exprimer

Avec une variété de carrousels là-bas, de nombreux pour Mootools que bien, j'ai encore décidé d'écrire mon propre classe Carousel, pour de bonnes raisons
1. Recherché une fonctionnalité de pagination (pour être capable de sauter une diapositive particulière / étape dans le carrousel).
2. Voulaient la liberté avec le placement des touches GAUCHE et DROITE / links, où jamais je s'il vous plaît.
3. Plus de contrôle sur les étapes de diapositives.

J'ai réussi à créer un nouveau carrousel, avec les caractéristiques ci-dessus ... comme ci-dessous ... N'hésitez pas à suggérer toute modification vous auriez besoin!

Mon exemple ressemble à ceci ... [ Voir la démo ]

Voir la démo | Télécharger Mootools Carousel Avec la version 1.0 de pagination (Téléchargé 1980 fois)

1. Paging Carousel

Vous pouvez facilement ajouter la pagination à votre carrousel, tout simplement en définissant l'indicateur de pagination, qui est passé parater dernière lors de la création de l'instance de la MooCarousel à true (paging voulez) ou faux (donot vouloir de pagination).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true); / / ns = nombre de diapositives, sss = taille étape diapositive

Et bien sûr, vous pouvez changer le look-n-feel de ces achors pagination que vous s'il vous plaît en modifiant leur CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actuelle, carousel_paging page {outline: none; largeur:... 15px; hauteur: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging actuelle {background: # 4D4D9B; color: # ffffff;}..

Eh bien! il ya un petit problème cependant, les ancres de pagination si elle est définie, puis elle sera généré toujours après que le composant Carousel. Je voulais le rendre dynamique ainsi, mais alors juste pour garder le script pour le soufflage des proportions, j'ai décidé de l'ignorer.
Mais vous savez un peu de JavaScript, vous pouvez facilement modifier le code de génération de pagination dans la classe MooCarousel à s'il vous plaît vos besoins.

2. Personnalisation des icônes de gauche et droite

Vous pouvez changer l'emplacement, des images ou tout bien displat des boutons gauche et droit tout simplement en jouant avec le CSS. pour être en mesure de modifier les placements des buttoms gauche et droit était la raison réelle pour moi à droite ma classe de notre Carousel.
Depuis cette classe MooCarousel, accepte l'id est un de ces boutons, vous pouvez y placer ces boutons partout sur la page, s'il vous plaît ... il ne doit pas être dans la hiérarchie des éléments, comme dans mon exemple.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; largeur: 23px; hauteur: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personnalisation étapes de diapositives

QU'EST-CE QUE JE VEUX DIRE MES PAS SLIDE Personnalisation?
La plupart des carrousels de diapositives de la complète avec de la fenêtre visible. Donc, dire que vous aviez quatre éléments (comme dans mon exemple ci-dessus), il glissera tous les quatre articles. Avec cette composante Carousel, vous passer le nombre de diapositives et de la taille étape de votre choix.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true);
c_ns = nombre de diapositives, c_sss = taille étape diapositive

En outre, dans mon exemple1 j'ai calcuted la taille étape diapositive, basé sur la logique, où, je sais que nombre d'articles, la largeur de chaque élément et les marges qui ont donné après chaque élément dans mon CSS.

/ * Pour Carrousel 1 * /

var = 92 c1_w; Largeur de l'article / / Carrousel

var c1_n = 10; Nombre / / Total des articles Carrousel Comparaison

var c1_pp = 4 / / Nombre de Carrousel Articles perpage Comparaison

var c1_marginFactor = 51;

var = c1_sss c1_w * c1_pp; / / sss = taille étape diapositive

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0,5); / / ns = nombre de diapositives

c1_sss + = c1_marginFactor; / / sss = taille étape diapositive, 51 pour les marges

Exigences: Mootools 1.2

Voir la démo | Télécharger Mootools Carousel Avec la version 1.0 de pagination (Téléchargé 1980 fois)

Mootools est un MooRating (navigateur croix, bien sûr, comme il utilise la puissance de la bibliothèque MooTools) simple, léger et une excellente solution à base de notation. Il n'est pas qualifié de "Star Rating", tout simplement parce que, l'image Note pourrait être que vous choisissez (que j'ai fournis étoiles, Bars et coeurs avec le téléchargement, mais vous pouvez créer votre propre variété et il suffit de déposer dans).

Comment ça ressemble:

	Note Mootools avec des images différentes Voir la démo
	Note Mootools avec des valeurs en pourcentage Voir la démo
	Note Mootools avec des valeurs fractionnaires Voir la démo

Télécharger Mootols Star Rating Script (Téléchargé 716 fois)

Note: les données nombre entier, décimal ou un pourcentage
Actuellement, le script est conçu pour afficher les données de notation que des valeurs entières (1,2,3,4,5), en décimales (1,24, 3,45 etc) ou en pourcentage (12%, 55% etc). Le choix pour afficher les données dans n'importe lequel des formats cités peuvent être mis en changeant simplement certaines valeurs de drapeau dans le javascript (moorating.js)
Fondamentalement, il existe deux e deux drapeaux pour jouer avec, pour afficher les valeurs dans le format de votre choix ...

var inpercent = false; / / Définissez cet indicateur la valeur true, si vous avez besoin des valeurs de pourcentage à afficher
var isFractional = false / / Mettez cela à true, si vous voulez des valeurs fractionnaires comme 1,24, 1,25, 4,56 plutôt que 1,2 ... 5

Et je ne crois pas qu'il soit nécessaire pour cette explication. En outre. Le script est très simple. Si vous connaissez un peu JavaScripting, vous pouvez modifier le script pour obtenir toute sorte de la valeur affichée. Pour exemple, si vous vouliez trois décimales à afficher ... juste modifier le script comme ci-dessous ...

si (isFractional) {si (x <= 5 | | x> = 0) moostartval [i] = innerHTML formatNumber (x, 3);.} / / 2 est changé à 3
else {moostartval [i] innerHTML = Math.round (x).;

Mise à jour Valeur Note:
I havent tracassé par écrit des scripts AJAX pour mettre à jour la valeur notes, parce que je sais par expérience que le font pas toujours l'intention de mettre à jour le CLASSEMENT dès que l'utilisateur taux de la chose. Vous êtes libre de faire ce que vous voulez avec la valeur nominale, mise à jour en utilisant AJAX ou Soumettez ou Définir une valeur sous forme cachée terrain, pour être soumis avec le formulaire en entier, etc

fonction updateRating (id, note) {
/ / Alert (id + "," + Note);
/ / Faites ce que à la cote
}

Il est fonction dans le javascript appelé "updateRating". Cette fonction a été adoptée l'ID de la de la Div Note, d'identifier à qui notes (s'il ya plus que l'on note sur la page) a été mis à jour et la valeur de la cote [updateRating (id, note)]. Vous pouvez choisir ce que vous voulez avec ces valeurs, comme je l'ai mentionné plus tôt.

Image Note: étoiles, coeurs, Bars ou quelque chose vous s'il vous plaît
Modification de la note à l'un des types ci-dessus (étoiles, coeurs, etc) est très simple. Il suffit de créer une image similaire à celle prévue et déposez-po Rappelez-vous, si vous changez le nom de l'image, ne faire les changements nécessaires dans le fichier CSS, voir ci-dessous.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; largeur: 84px; hauteur: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; largeur: 84px; hauteur: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') à gauche 25px;}

La plupart des widgets notation utiliser étoiles et demi-étoile des images avec la souris sur les événements de chaque étoile. Notes Moo utilise une image simple sprite comme image de fond pour obtenir les effets visuels requis avec un surcoût très faible.

Exigences: Mootools 1.2
Télécharger Mootols Star Rating Script (Téléchargé 716 fois)

J'avais été la recherche d'un double curseur épinglé (curseur avec deux boutons, minimum et maximum) en utilisant mootools. Bien, j'ai trouvé quelques-uns curseur bien fait à double épinglé dans le forum mootools, Le seul problème était que tous ces curseurs force ont le marqueur plage sélectionnée. Enfin! J'ai décidé de créer mon propre. Eh bien! J'ai utilisé le code d'origine et de le modifier pour avoir un fond curseur qui indique la gamme sélectionnée visuellement, comme dans mon exemple ci-dessous. Les zones bleues indiquent la gamme de la valeur choisie.

Voir la version 2.2 Démo | Mootools Télécharger Double Favoris Version 2.2 Curseur (Téléchargé 11514 fois)

Vous pouvez très facilement modifier l'apparence et la sensation de l'indicateur de gamme (en bleu dans l'exemple ci-dessus), le bouton curseur, la piste en modifiant le curseur slider.css comme l'exige.

Ne laissez moi un commentaire si vous le trouvez utile.

Si vous êtes un de ces gars (comme moi), qui, souvent, vérifier le CSS de la page HTML bien fait, à vous en inspirer ou que ce soit, alors vous avez sans doute remarqué que nous avons utilisé de positionnement FAUX (comme déjà mentionné dans mon précédent article , nous sommes en utilisant Faux Positionnement absolu: Une mise en page Brilliant CCS )

Nous avons fait du bon travail sur ce modèle, donc pensé qu'il serait agréable de le partager .... Télécharger ce thème WordPress (téléchargé 195 fois)