6

Twitter ブートストラップを使用してサイトの UI を構築しています。

星評価ページを作りたいです。

右から左に配置したい (つまり、右に 1 つの星が選択されます)

ブートストラップにはそのようなツールがないため、Jquery-UIプラグインを使用するのが最善の方法だと思いますか?

評価方向を作成する方法: rtl ?

さらに、星を赤ではなく黄色に調整するにはどうすればよいですか

(ホバー時と選択後の両方) ?

4

5 に答える 5

15

私もブートストラップを使っています。今朝、私は星の評価を調べ始め、FontAwesomeサイトに出会いました。ここでは、ブートストラップ内の星評価の実際の例を見つけることができます。

CSS-tricksサイトでは、必要な CSS とそれが何をしているかについての適切な説明が提供されています。

以下、リンク切れで申し訳ありません。私はstackoverflowの「新しいポスター」であるため、2つのハイパーリンクしか含めることができません. したがって、それらを表示するには、要点を dabble.com の URL に貼り付ける必要があります。(他のリンクを投稿できるように、誰か私の評判に投票してください :)

dabblet.com サイトで実用的な例を見つけて、カウン コード ベースに組み込む前に少し試してみてください。css-tricks dabblet はhttps://gist.github.com/1709019にあります 。

あなたが見直したいかもしれない他のいくつかのダブレットがあります：

@chriscoyier はhttps://gist.github.com/1718992で別の実装をしてい ます 。float:right; を変更することにより、この実装で LTR から RTL に変更できます。浮かせる:左;

@mprogano には、さらに簡潔なバージョンがhttps://gist.github.com/1712123にあります。direction: rtl; を使用して、LTR から RTL に変更できます。

ちょっとした例の中には、星の色を変更できるものもあれば、画像を使用しているものもあるため、色を変更するには独自の画像を作成する必要があります。

お役に立てれば。

于 2012-04-19T17:14:07.100 に答える
13

少しインスピレーションを得て、「少ないコード」の行に沿って何かを試してみました。また、選択された星の数を警告する js 関数も追加されました (もちろん、これはもっと派手なことに簡単に変更できます)。

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>

楽しむ！

編集:事前設定された評価については、http: //jsfiddle.net/RpfLa/400/も参照してください。

<s class="rated"></s>
于 2012-07-29T18:02:18.863 に答える
5

これは、Twitter ブートストラップのフォント アイコンの星評価のための単純な純粋な CSS ソリューションです。fontawesome などの他のフォント アイコンで使用するには、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

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

これが作業コードです

于 2014-02-16T00:02:35.823 に答える
2

少し前に同じ問題が発生し、小さなプラグインを作成することになりました。最近、Bootstrap 3 用に更新しました。

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

フィードバックやプルリクエストをお送りください:-)

よろしくお願いします！

于 2014-01-03T19:06:15.287 に答える
1

さまざまなプラグインで直面する問題を考慮して、さまざまな構成可能なオプションを使用して作成したBootstrap JQuery スター評価プラグインを次に示します (シナリオのデモが含まれています)。これらのいくつかは、さまざまなアイデア (Victor など) やその他のユーザーのニーズに触発されたものです。言及されたシナリオでこれを試して、知らせることができると思います。

Bootstrap 3.x グリフィコンと純粋な CSS を可能な限り使用し、RTL サポートを含め、プラグイン イベントとメソッドをサポートします。ソースはこちらから参照できます。

編集: プラグインは、他のいくつかの機能強化とともに、部分的な星の評価をサポートするようになりました。

于 2014-03-07T07:12:21.293 に答える