@smile.net  :txtRating

テキストレーティング(txtRating)とは？

上記のように星などのレーティング表記を簡単にするためのプラグインです。

同一親要素内の任意のクラスから点数を読み取り、レーティング表示に反映します。

>>>download<<<

★設置方法

• ・任意のIDを設定した要素の中に
• ・点数をratingPointクラス(少しなら文字が入っても大丈夫なようです)
• ・点数表示にしたいratingMarkクラス

★注意点として

• ・親要素には必ずIDをつけること
• ・同じ親要素内に2つ以上設置しないこと

具体的には下記のような記載で大丈夫です。

					
<!-- HTML -->
<div id="sampleInfo">
   <p class="ratingPoint">1.5点</p>
   <p class="ratingMark">★★★★★</p>
</div>

<!-- script -->
<script type="text/javascript">
	txtRating({
		mark:".ratingMark",
		point:".ratingPoint",
		max:5,
		color:"orange",
		bgcolor:"#ccc"
	});
</script>
					

★初期値(すべて省略可)　※特殊なことはしていませんがjquery-1.10.2.jsを使用しています。

mark

レーティング表示したいクラスを設定します

初期値:".ratingMark"

point

レーティングの点数を取得したいクラスを設定します。

初期値:".ratingPoint"

max

表示上で満点が何点かを設定します。

初期値:5

color

レーティングの色(点数として表示されている部分)

初期値:"orange"

bgcolor

レーティングの背景色(点数がない部分)

初期値:"#ccc"

マージンを設定

3.5点

★★★★★

パディングを設定

3.5点

★★★★★

マージンとパディングを設定

3.5点

★★★★★

フォントサイズ変更

3.5点

★★★★★

フォントサイズ変更やマージン・パディングをつけても問題ありません

クラスの設定を変えれば同ページ内でも別設定が可能です。

3.5点

★★★★★

<!-- HTML -->
<div id="sample0005">
	<p class="ratingPoint">3.5点</p>
	<p class="ratingMarkRed">★★★★★</p>
</div>

<!-- script -->
<script type="text/javascript">
	txtRating({
		mark:".ratingMarkRed",
		bgcolor:"#f00"
	});
</script>
					

4.8点

にゃんぱす

テキストであればひらがなや漢字も可能です。

(文字数や文字によって、4.8点などのギリギリの点数だと満点に見える場合があります)

100,000点

100万ドルの夜景って100万ドルの残業なんな！

文字数に特に制限はありません(ただし折り返すとうまくいかないのでおすすめできません)

最大点数を設定することによりすごい値での表記も可能！(※100段階なので精度はガタ落ちです)

txtRating({
	mark:".ratingMarkTxtMil",
	bgcolor:"000",
	max:1000000
});
					

jQueryのmaxは数値型のため桁区切りで設定しないでください