Twitter Bootstrap rtl étoiles

Je suis en utilisant twitter bootstrap pour construire mon site INTERFACE utilisateur.

Je veux créer une des stars de la cote de la page.

Je veux qu'il soit de droite à gauche (sens une étoile est choisi à droite)

Je vois mon meilleur opetion est d'utiliser Jquery-UI plugin, comme bootstrap ne dispose pas d'un tel outil?

Comment faire de la cote de direction: rtl ?

En outre, comment puis-je régler les étoiles en jaune et non rouge

(à la fois sur le vol stationnaire et après sélection) ?

InformationsquelleAutor Elad Benda | 2012-04-13
  1. 14

    J'ai aussi utiliser bootstrap. Ce matin, j'ai commencé à regarder dans les cotes étoiles et est venu à travers la FontAwesome site. Vous trouverez ici un exemple de travail d'Étoiles au sein de bootstrap.

    La CSS-tricks site fournit le nécessaire CSS avec une bonne explication de ce qu'il est en train de faire.

    Je m'excuse pour le manque de liens ci-dessous. Comme je suis "nouvelle affiche" sur stackoverflow, je ne peux que comprendre deux liens hypertexte. De sorte que vous aurez besoin de coller les gist en la dabble.com URL pour les voir. (quelqu'un s'il vous plaît voter ma réputation pour que je puisse publier plus de liens 🙂

    Vous pouvez trouver des exemples de travail à la dabblet.com site pour jouer avec elle un peu avant de l'amener dans votre cown de la base de code. Le css-tricks dabblet est à https://gist.github.com/1709019
    .

    Il existe plusieurs autres dabblets, vous pouvez la revoir:

    @chriscoyier a une mise en œuvre différente à
    https://gist.github.com/1718992
    . Vous pouvez modifier à partir d'LTR RTL dans ce implementaion en changeant float:right; float:left;

    @mprogano a une version plus concise à https://gist.github.com/1712123. Vous pouvez modifier à partir d'LTR à RTL à l'aide de la direction: rtl;

    Certains commencent à faire des exemples vous permettent de modifier l'étoile des couleurs, d'autres sont à l'aide d'images de sorte que vous auriez à créer vos propres images pour changer de couleur.

    Espère que cette aide.

    • Je préfère @chriscoyier la solution, car il utilise de vrais champs de saisie comme ils sont destinés à être utilisés, donc pas besoin de JS liaisons. Une chose à noter cependant: dans le dabblet.com code HTML, l'ordre des champs de saisie doit être inversée afin de relier les étiquettes pour le bon bouton radio (à droite maintenant en cliquant sur le 4ème étoile aura pour effet de sélectionner l'étoile-2 bouton radio). Les étiquettes sont inversés parce qu'ils sont de droite flotté.
    InformationsquelleAutor tim mcallister
  2. 11

    Suis un peu inspiré et a essayé un petit quelque chose le long des lignes de "moins de code". Également ajouté une fonction js pour alerter le nombre d'étoiles sélectionné (qui pourrait facilement être changé pour faire quelque chose de plus de fantaisie).

    http://jsfiddle.net/RpfLa/135/

    <div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>

    Amusez-vous!

    Edit: Voir aussi http://jsfiddle.net/RpfLa/400/ pour un preset de notation.

    <s class="rated"></s>
    • Génial! Assez propre code! Pouvez vous s'il vous plaît me montrer comment voulez-vous laisser les étoiles sélectionné après cliquez sur? (ie. Si je donne un 3 étoiles; 3 étoiles doivent être remplis) Si vous pouvez m'aider ce serait vraiment génial. Merci pour le jsfiddle que vous avez posté, c'est vraiment utile
    • Merci! Une façon pour elle serait de définir la classe="active" sur le nombre d'étoiles comme ceci: jsfiddle.net/RpfLa/400 une Autre serait de définir class="note-3star" sur l'élément parent, mais cela demanderait beaucoup plus de css pour faire de même.
    • Fantastique!!!! je vous remercie pour votre réponse rapide! Je peux certainement utiliser votre code pour travailler mon chemin à travers ce que je veux accomplir, vraiment utile. Une question importante: Pourquoi avez-vous nest le <s> balises comme ça? Je l'ai trouvé bizarre, sur près d'inspection
    • Pas de problèmes. L'imbrication rend toutes les étoiles déclencher leur :hover quand le dernier est a plané.
    • Travail impressionnant sur ce système de notation, j'ai eu un léger problème avec le fait d'avoir plusieurs éléments en une seule page, j'ai décidé une fois la notation sur un poste a été créé pour remplacer les étoiles, avec une représentation textuelle de la cote comme de l'alerte dans le violon. Pour ce faire et permettre à plusieurs de notation des éléments sur la page, j'ai simplement remplacé l'alerte JS avec $(this).replaceWith(numStars + (numStars == 1 ? " star" : " stars!"));
    • salut @Victor Grand code, mais peut-on l'a marqué les étoiles restent de couleur rouge, même pas de souris en vol stationnaire eux??? J'en ai vraiment besoin. merci~!!!

    InformationsquelleAutor Victor
  3. 4

    Ici est une simple CSS solution pour les étoiles pour les polices d'icônes de twitter bootstrap. À utiliser avec tout autre icône de police comme fontawesome etc juste besoin de changer le nom de la classe en HTML

    HTML:

    <div class="rating"
  <span id="5" class="glyphicon glyphicon-star"></span>
  <span id="4" class="glyphicon glyphicon-star"></span>
  <span id="3" class="glyphicon glyphicon-star"></span>
  <span id="2" class="glyphicon glyphicon-star"></span>
  <span id="1" class="glyphicon glyphicon-star"></span>
</div>

    CSS:

    .rating span {
  font-size: 25px;
  cursor: pointer;
  float: right; //remove 'float right' for right to left
}
.rating span:hover, .rating span:hover ~ span{
  color: red; //gold or any other color 
}

    Jquery pour la capture de notation sur cliquez sur

    $('.rating span').click(function(){
    alert($(this).attr('id'));
})

    Ici est la code de travail

    • où est la 'rtl' partie
    • 'rtl' est 'de droite à gauche", qui est contrôlé par flotter dans propriété dans .cote span mentionné ci-dessus...
    InformationsquelleAutor Anuradha Bajpai
  4. 2

    J'ai eu le même problème il y a quelques temps et a fini par créer un petit plugin. J'ai récemment mis à jour pour Bootstrap 3:

    https://github.com/javiertoledo/bootstrap-rating-input

    Vous êtes les bienvenus pour envoyer des commentaires ou des pull requests 🙂

    En ce qui concerne meilleur!

    • Fait exactement ce qui était nécessaire, avec RTL support. Merci beaucoup, juste eu à changer certaines classes de le faire démarrer 3 compatible si, maintenant sa fonctionne bien.
    • Génial, je suis curieux de revoir ce qui a été défaillant dans le Bootstrap 3 et les changements que vous avez besoin de faire, si vous soumettez une PR je vais jeter un oeil et de fixer le widget pour les futures versions. Merci!
    • Mes excuses les plus sincères, en fait je voulais dire que j'ai eu à régler pour le rendre compatible avec bootstrap 2.xx et a déclaré la vice versa.. putain de gueule de bois de la nuit dernière...:D
    InformationsquelleAutor Javier Toledo
  5. 1

    Considérant les problèmes rencontrés dans les différents plugins - voici un Bootstrap, JQuery Étoiles plugin que j'ai créé avec diverses options configurables (démos pour les scénarios sont inclus). Certains sont inspirés par des idées différentes (par exemple, par Victor) et d'autres besoins de l'utilisateur. Je pense que vous pouvez essayer ce pour vos scénarios mentionnés et laisser savoir.

    Utilise Bootstrap 3.x glyphicons et pur CSS autant que possible, comprend RTL soutien, plugin prend en charge les événements et les méthodes. Vous pouvez vous référer à la source ici.

    EDIT: Le plugin prend désormais en charge fractionnaire étoiles avec quelques autres améliorations.

    InformationsquelleAutor Kartik V