jQueryによる星評価制御

キーテイクアウト

• この記事では、jQueryを使用してインタラクティブスターレーティングウィジェットを構築する方法に関する詳細なガイドを提供します。これには、スターアイコンに置き換えられたラジオボタングループの作成が含まれます。ユーザーは、評価を提供するために対話できます。
STARレーティングシステムは、キーボードアクセス可能であるように設計されており、半分星の評価を可能にします。これは、CSSスプライト画像を使用し、バックグラウンドポジションプロパティを操作して星のさまざまな状態を表示することによって達成されます。
• 評価システムは、スケールを5つではなく4つ星に制限することにより、ユーザーのエンゲージメントと思慮深い評価選択を促進するように設計されており、それによって中央のオプションが排除されます。また、精度を高めるためにハーフスターの評価を可能にします。
• システムはjQueryを使用して、星のホバリングやクリックなど、ユーザーのインタラクションを処理します。星がクリックされると、対応するラジオボタン値が更新され、星とすべての前の星が強調表示されます。システムはまた、潜在的な問題を管理するためにエラー処理を実装しています。
• 新しくリリースされた本
jQuery：Novice to Ninja

には、豊富な優れたすぐに使用できるソリューションが含まれており、進行するにつれてjQueryの基本的で高度な概念の両方を教えてくれます。テイスターとして、クレイグ・シャーキーがjQueryを使用して堅牢で洗練されたスター評価ウィジェットを構築する方法を示している抜粋があります。キーボードアクセス可能であり、ハーフスターの評価を可能にします。

以前にjqueryを使用したことがない場合は、無料のサンプルPDFをつかんで、第2章で紹介する速度を上げます。ここで。私たちはこれについて少し考え、彼に星評価のアイデアを投げました。光沢のある新しいコントロールは、図1「Star Rating Control」に示すように表示されます。 図1. Star Rating Control

星評価制御の基礎はラジオボタングループです。ブラウザはグループからの単一の選択を実施するため、完璧です。正しい数のボタンを追加するだけで、ユーザーに選択したい範囲を選択できます。

例1. Chapter_07/11_Star_ratings/index.html（Excerpt）

>

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

もちろん、難しい部分は、これらのラジオボタンをスターコントロールに置き換えています。 CSSのみでHTMLコントロールをスタイリングすることに取り組むことはできますが、コントロールを2つの部分に分割すると、データを保存する基礎モデルと星付きの光沢のあるビューの2つの部分に分割すると、はるかに簡単で柔軟になります。この場合、モデルは元のHTMLラジオボタングループです。私たちの攻撃計画は、ラジオボタンを非表示にし、星のように見えるスタイルのJQueryを介して追加したリンクのリストを表示することです。 リンクと対話すると、選択したラジオボタンが切り替わります。 JavaScriptのないユーザーは、単にラジオボタン自体を見るだけで、これは私たちが問題ありません。このようにして、私たちのコントロールは単一の画像にのみ依存します（図2、「Star CSS Sprite Image」を参照）。これにより、HTTPリクエストを保存し、グラフィックデザイナーが編集しやすくなります。さまざまな画像状態を移動するには、

例2.章07/11_star_ratings/stars.css（抜粋）

は限られたスケールです。だからこそ、半分星の評価を許可したいと考えています。これは、光学的幻想を介して実装されます。おそらく、星の画像が半分に刻まれていることに気付くでしょう。 HTMLには8つのラジオボタンが含まれ、それぞれ半分の星の価値があります。 コードには、8つのラジオボタンを4つの星に変換するための2つの部分があります。まず、Createstars関数は、無線ボタンを備えたコンテナを使用し、Star Linksに置き換えます。 その後、各スターに適切なイベントハンドラー（AddHandlersメソッド）が補充され、ユーザーがコントロールと対話します。星空のスケルトンは次のとおりです。

例3.第3章3_star_ratings/script.js（Excerpt）<div > <label><input name="rating" type="radio" value="1"/>1 Star</label> <label><input name="rating" type="radio" value="2"/>2 Stars</label> <label><input name="rating" type="radio" value="3"/>3 Stars</label> <label><input name="rating" type="radio" value="4"/>4 Stars</label> ⋮</div>

新しいリンク（div要素）のコンテナを作成することから始めます。置き換えているラジオボタンごとに1つの新しいリンクを作成します。以下のラジオボタンをすべてのラジオボタンを選択した後、ラジオセレクターフィルターを使用して、各アイテムの評価を取得し、それを使用してハイパーリンク要素を作成します。注：AddClassアクションのために、Modulus

を使用した条件付き割り当てでは、数学のビットに基づいて、3月の演算子でクラス名を条件付きで指定します。本の前半で行ったように、Modulus（％）演算子を使用して、インデックスが偶数か奇数かを判断しています。インデックスが奇妙な場合は、評価右クラスを追加します。これにより、リンクが星の右側のように見えます。

リンクの準備ができたら、addhandlersメソッドに渡します。これは、作業に必要なイベントを添付する場所です。次に、リストコンテナに追加します。コンテナに入ったら、現在の無線ボタンが選択されているかどうかを確認します（チェックフォームフィルターを使用します）。チェックされている場合は、このハーフスターとその前のすべてのハーフスターに評価クラスを追加します。添付の評価クラスとのリンクには、ゴールドスターイメージ（ユーザーが現在の評価を確認できるようになります）が割り当てられます。

ゴールドを変えるために必要なすべての要素を選択するには、いくつかの新しいjQueryアクションの助けを求めます：prevall and andself。 prevallアクションは、現在の選択の前に

すべての兄弟を選択します（直前の兄弟のみを選択する前のアクションとは異なります）。この例では、以前の兄弟にクラスを追加し、現在の選択をに追加します。そのためには、現在の選択にオリジナルの選択を含む単純に自分自身のアクションを適用します。今、私たちは金になるすべてのリンクを持っているので、クラスを追加できます。ヒント：他のトラバーサル方法前に、jQueryは次のすべての方法を提供し、同じ容器で

の後にすべての要素の兄弟をつかむことができると推測したかもしれません。 JQuery 1.4は、PrevuntilとNextil -untilという2つの新しいコンパニオン方法も導入しました。これらはセレクターで呼び出され、セレクターに一致する要素にヒットするまで、要素の兄弟（使用しているものによっては前方または後方に向かって）をスキャンします。 ページ上の最初のH2と同じコンテナ要素の次のH2の間に座っているすべての要素が得られます。例5. Chapter_07/11_Star_ratings/script.js（Exterpt）例6.第6章07/11_star_ratings/script.js（excerpt）<div > <label><input name="rating" type="radio" value="1"/>1 Star</label> <label><input name="rating" type="radio" value="2"/>2 Stars</label> <label><input name="rating" type="radio" value="3"/>3 Stars</label> <label><input name="rating" type="radio" value="4"/>4 Stars</label> ⋮</div>
例：

例7.章07/11_star_ratings/script.js（Excerpt）モデルを更新して、CSSスプライトをいじくり回すことができます。最初に、現在持っているリンクから評価クラスをクリアし、ユーザーが選択したリンクのすべてのリンクに追加します。最後のタッチは、リンクのデフォルトアクションをキャンセルすることです。そのため、星をクリックすることでは場所の変更が発生しません。

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

結論

jqueryの良さのこの味を楽しんだことを願っています。この例を含む無料のサンプルPDFと、150ページ相当のより優れた学習資料を入れることを忘れないでください。すでに販売されている場合は、SitePointから直接本を購入できます。

jQueryスター評価に関するよくある質問（FAQ）

星評価の外観をカスタマイズするにはどうすればよいですか？

var starRating = {  create: function(selector) {    $(selector).each(function() {      // Hide radio buttons and add star links    });  },  addHandlers: function(item) {    $(item).click(function(e) {      // Handle star click    })    .hover(function() {      // Handle star hover over    },function() {      // Handle star hover out    });  }}

​​
星評価の外観をカスタマイズすることで、CSSを変更することで実現できます。星の色、サイズ、間隔を変更できます。たとえば、色を変更するには、CSSの「色」プロパティを使用できます。サイズを変更するには、「フォントサイズ」プロパティを調整できます。これらの変更を適用するために、CSSの星評価の特定のクラスをターゲットにすることを忘れないでください。

jQueryスター評価でハーフスターの評価を使用できますか？

はい、JQuery Star Ratingでハーフスターの評価を使用できます。これは、星評価を初期化するときに「半分」オプションをtrueに設定することで実現できます。これにより、より正確な評価が可能になり、ユーザーが半分の星で評価する機能を提供します。

ユーザーの評価を保存するにはどうすればよいですか？

ユーザーの評価を保存するには、Ajaxを使用してサーバー側のスクリプトに評価値を送信できます。このスクリプトは、評価をデータベースに保存できます。ページが読み込まれると、スクリプトは格納された評価を取得して表示できます。

平均評価を表示するにはどうすればよいですか？

平均評価を表示するには、すべての保存定格の平均を計算し、星評価の値をこの平均に設定することで実行できます。これは、データベースからすべての評価を取得し、平均を計算してからクライアント側のスクリプトに戻すサーバー側のスクリプトを使用して実行できます。これは、評価を表示したいが、ユーザーが変更できるようにしたくない場合に役立ちます。スター評価を無効にするために、星評価を初期化するときに「読み取り」オプションをtrueに設定できます。これらのオプションは、使用するアイコンの名前を受け入れます。アイコンは、プロジェクトに含まれているフォントアイコンセットの一部である必要があります。

jQueryなしでjQueryスター評価を使用できますか？ jQueryなしで星評価を使用する場合は、純粋なJavaScript Star Ratingライブラリなどの別のソリューションを見つける必要があります。たとえば、星評価インスタンスが「評価」という名前の変数に保存されている場合、「rating.rating（0）」でリセットできます。星評価は、フォームの非表示の入力フィールドにリンクできます。ユーザーがフォームを送信すると、星評価の値はフォームデータに含まれます。このイベントは、無効な値が設定されている場合など、スター評価にエラーが発生したときにトリガーされます。このイベントを聞いてから、アプリケーションに適した方法でエラーを処理できます。

以上がjQueryによる星評価制御の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。