jQuery_jquery に基づく星評価プラグイン-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:03:29

オリジナル

1693 人が閲覧しました

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

マウスを星の上に移動すると、その星の前のすべての星が点灯します。マウスをクリックすると、クリックされた星の数が記録され、その前のすべての星が点灯します。
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