jQuery_jquery に基づく星評価プラグイン

まずは、下図のようなランニング効果をご覧ください。

マウスを星の上に移動すると、その星の前のすべての星が点灯します。マウスをクリックすると、クリックされた星の数が記録され、その前のすべての星が点灯します。
1. 原理
このプログラムの原理は次のとおりです。「ul」ラベル、ラベルの背景は灰色の星であり、表示する「ul」ラベルの幅を制御します。星の数。たとえば、星の絵の幅が 23px の場合、星を 10 個表示したい場合、星を 10 個表示するには「ul」の幅は 230px になります。
n 個の「li」タグ。n は表示する星の数を表します。たとえば、10 個の星を表示したい場合は、「li」タグが 10 個あります。次に、これら 10 個のラベルの幅は、1 つの星では 23 ピクセル、2 つの星では 46 ピクセル、...、10 つの星では 230 ピクセルになります。これらの「li」タグの背景は青い星になります。
マウスでクリックした星や初期設定を記録する「li」タグもあります。
これらのラベルはすべて重なっています。マウスのスライド効果を使用して、これらのラベルの重なり順を切り替え、クリックして星の数を記録します。
2. ソースコード

コードをコピーします コードは次のとおりです:

$.fn.studyplay_star=function(options,callback){
//デフォルト設定
var settings ={
MaxStar :20,
StarWidth :23,
CurrentStar :5,
有効:true
};
if(オプション) { jQuery.extend(設定, オプション) }; ({"位置" :"相対"})
.html('

')
.find('.studyplay_starBg').width(設定.MaxStar*settings.StarWidth)
.html('

');
if(settings.Enabled)
{
var ListArray = ""
for(k=1;k{
ListArray ='

;
}
container.find('.studyplay_starBg').append(ListArray)
.find('.studyplay_starON').hover(function(){
$ ("#studyplay_current" ).hide();
$(this).removeClass('studyplay_starON').addClass("studyplay_starovering");
},
function(){
$( this).removeClass( 'studyplay_starovering').addClass("studyplay_starON");
$("#studyplay_current").show();
})
.click(function(){
varstudyplay_count = settings.MaxStar - $(this).css("z-index") 1;
$("#studyplay_current").width(studyplay_count*settings.StarWidth)
//コールバック関数
if (typeof callback == 'function') {
callback(studyplay_count)
return ;
}
})
}
}


このプラグインには 2 つのパラメータがあります。最初のパラメータは、プラグインの基本設定を表すオプションです。コールバックは、ユーザーが選択した星の数を示すパラメータを持つコールバック関数を表します。

3.
を使用します。ID「z」の div に 5 つの星を表示したい場合、デフォルトで 1 つの星が選択され、星の数を選択するためのダイアログ ボックスが表示されます。次のようなポップアップが表示されます。 コードを書きます:

コードをコピー コードは次のとおりです:

評価結果を表示したい場合は、Enabled を false に設定すれば問題ありません。
4. コードのダウンロード

今日、ネチズンはこの問題が Firefox に存在することを報告し、デバッグしました。主な理由は、スタイル内の li タグの高さが定義されていないことです。ありがとうございます。 Firefox 改訂版のダウンロード アドレス:

star2.rar

ネチズンの皆様に心から感謝します
3 番目の修正: 0.5 ポイントのスコアリング関数を追加
使用説明: 半分は 0 に等しい。 1 ポイント増加、1 は 0.5 増加を意味します 例: $("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){アラート(値)}); ダウンロードアドレス:
halfstar2.rar

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。