Geekly Articles each Day

星評価を表示するJQueryプラグイン

それはすべて、ブログのメモの評価を変更することにしたという事実から始まりました。

評価を変更する主な理由は、評価が「整数」の星によって推定されたという事実でした。まあ、星の半分も導出できました。 つまり、記事の評価が4.75の場合、4.5星または5星のいずれかを表示する必要がありましたが、これは私にはあまり適していませんでした。

したがって、星の形で評価を形成するために、独自のjQueryプラグインを作成することが決定されました。

基本的なプラグインの要件：


プラグインの要件が開発された後、プログラミングを開始しました。 その結果、星の形でメモを評価するためのjQueryプラグインが得られました。これを喜んで共有します。


サイトでこのプラグインを使用するには、最初にjQueryライブラリ自体とプラグイン自体を接続する必要があります。 jQueryライブラリーを通常の方法で接続するのではなく、Googleリポジトリーから接続します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>'); </script> <script type="text/javascript" src="js/jquery.rating.js"></script>


このコードは、サイトの<head> </ head>タグの間に配置する必要があります。

jQueryをGoogleリポジトリから接続する理由については、 こちらをご覧ください 。

また、プラグインが正しく機能するには、次のスタイルを接続する必要があります。

 <link href="styles/jquery.rating.css" rel="stylesheet" type="text/css" />


これらはすべてソースコードにあります。

必要なすべてのスタイルとライブラリが接続されたら、プラグイン自体を呼び出すことができます。 これを行うには、たとえば評価クラスを使用して、ページの適切な場所にdivを挿入します。
 <div class="rating"></div>


これで、この要素のプラグインを次のように呼び出すことができます。

 $('div.rating').rating();


この場合、デフォルト設定のプラグインが呼び出され、その結果、5つの影なしの星が作成されます。

特定の数の影付きの星を設定するには、評価の値を含む要素内にクラスvalを持つ非表示の入力フィールドを挿入する必要があります。

 <div class="rating"> <input type="hidden" class="val" value="2.75"/> </div>


評価の横にある投票数を要素内に表示するには、別の非表示入力フィールドを投票クラスに追加する必要があります。

 <div class="rating"> <input type="hidden" class="val" value="2.75"/> <input type="hidden" class="votes" value="2"/> </div>


今すぐプラグインを呼び出すと、次の評価が作成されます。

画像

ユーザーが星をクリックすると、選択が考慮されて評価が自動的に再計算され（影付きの星の数が変わります）、投票数も変わります。

1つのページに複数の評価が配置され、サーバーにデータを送信する必要がある場合、評価を識別するためにvote-idクラスを持つ別の非表示入力フィールドが使用されます。

 <div class="rating"> <input type="hidden" class="val" value="2.75"/> <input type="hidden" class="votes" value="2"/> <input type="hidden" class="vote-id" value="voteID"/> </div>


このフィールドの値は、投票結果とともにサーバーに送信されます。 したがって、評価を特定し、必要な評価の値を更新できます！

次に、プラグインの設定とその変更方法について説明します。

fx浮く星上のマウスへの影響。
  • float-マウスの上にカーソルを合わせると、マウスポインターに従って星が徐々にペイントされます
  • half-マウスの上にカーソルを合わせると、星が床の下に徐々にペイントされます
  • full-マウスにカーソルを合わせると、星全体が塗りつぶされます

画像星の画像へのパス。 絵はスプライトの形で作成する必要があることに注意する必要があります。
星評価
画像の一番上には、未塗装の星に表示される星があります。 その下には、マウスの上にカーソルを合わせると表示される星があります。 そして、一番下にあるのは、影付きの星に対して表示される星です。 星を変更する場合は、このシーケンスを保存する必要があります。 また、1つの星の高さと幅が等しくなければならないという事実に注意を向けます。 そうしないと、評価が正しく表示されません。
幅32星の幅
星5ランキングに表示される星の数
タイトル[
「声」
「声」
「投票」
]		投票を説明するために表示される名詞の配列
readOnly偽操作の評価モード。 デフォルトはfalseです。 trueに設定されている場合、投票する方法はありません。
最小限の0ユーザーが投票できない最低評価値
url投票の結果とともにAJAXリクエストが送信されるページのアドレス
タイプポストAJAXリクエストタイプ。 デフォルトはpostです。 GETリクエストをサーバーに送信する必要がある場合、この値を-getに設定します
ローダーサーバーへのAJAXリクエスト中にその時点で表示される画像へのパス
クリックユーザーが星をクリックしたときに呼び出されるカスタム関数。 関数の最初のパラメーターは評価オブジェクト自体であり、2番目はユーザーの投票の結果です


カスタムメッセージ出力形式

評価データがサーバーに送信されると、この操作の結果をユーザーに表示できます。

サーバーでリクエストを処理し、メモの評価を更新するとします。 この場合、メッセージ「ありがとう。 あなたの投票がカウントされました」、星の評価を再構築し、ユーザーのブラウザの投票者の数を更新します。

しかし、ほとんどの場合、評価を更新する前に、この人がこの記事に投票したかどうかを確認する必要があります。 そして、ある人がすでにこのメモに投票している場合、ユーザーのブラウザに警告を表示し、評価値と有権者の数を更新しないことが必要です。

したがって、プラグインが正しく機能するには、サーバーが次の形式のjsonオブジェクトを返す必要があります。

 {'status': 'OK','msg': '.   '}


または

 {'status': 'ERR','msg': '     '}


ステータスが値に等しい場合-OK、星の評価が更新され、投票者の数が再カウントされます。それ以外の場合は、警告メッセージが単に表示されます。

これは、星の形でノートの評価を表示するためのこのようなユニバーサルプラグインです。

ここでデモを見ることができます。

ソースはここからダウンロードできます。

このプラグインが便利な場合は、以下のコメントで感謝することができます。 だから、私の仕事が無駄になっていないことを知っています。

このプラグインを改善するための提案や質問がある場合は、コメントに書いてください。

あなた自身に役立つと思います！

UPD：コメント内のコメントを考慮して、プラグイン設定にオプションを追加して、ユーザーが投票できない最低評価値を設定しました。 プラグインの結果のhtmlコードも作り直しました。その結果、0と5の両方の評価を自由に設定できるようになりました。

Source: https://habr.com/ru/post/J132807/

More articles:


All Articles