Jquery および WebMethod 投票 function_jquery に基づくコード

1: 機能の説明
1) ユーザーが投票するときは、マウスで星をクリックするだけで投票できます。2) 投票せず、投票します 投票完了後、スターのスタイルが異なります
3) 各スターには、「悪い」、「平均」、「OK」、「良い」などのカスタマイズされたプロンプトを含めることができます
4)投票が完了すると、投票結果がアニメーションで表示されます。これ以上の投票はできません


2: アイデアの説明
1, 3) ループを使用し、最大値は星の数を指定し、各ループ a> ステートメントに / を追加します。このハイパーリンクは、クラスを通じて星のスタイルを指定し、ループの完了後にマウスがその上に移動したときに表示されるテキストを指定します。 、Jquery の append 関数 を介してターゲット コンテンツ領域に追加されます。 2) Jquery の addClass およびremoveClass を介して、このメソッドは星のスタイルを動的に調整できることに注意してください。特定の位置にある場合は、前のスターのスタイルを追加する必要があります。Jquery の prevAll() を使用して現在の位置の前のスターを取得し、add($(this)) を使用して現在の位置のスターの参照を取得します。
得点前:

得点中:

得点後:

4) ターゲット領域の子ノードで選択した星の位置 1 に基づいてスコアを生成します Children().index($( this)) その後、スコアは ajax を介してサーバーと対話し、返されます評価スコアを削除し、を追加し、背景画像を横位置に設定すると、幅に応じて調整できます。 *平均スコアによって の最終的な幅が決まり、アニメーション効果を実現するために animate が使用されます。

1) JavaScript コード
便宜上、AJAX インタラクション用に独自のロジックを作成しました。コードは次のとおりです。


コードをコピーします

コードは次のとおりです: (function ($) { $.fn.Rate = function (options) {

options = オプション || {};

var StarTip = options.StarTip || ['一見の価値がない'、'信頼できる情報'、'非常に役に立った'、'素晴らしい情報']; >var アイテム金額 = オプション.アイテム金額 ||
var レートクラス名 = 'スター_オン'; || 'OriginalState';
var PostURL = options.DoAfterPost || ''; ;
var messageID = オプション .messageID || '';
var content = $(this);
for (var i = 0; i ) {
starList = [''].join ('');
}
content.empty().append(starList).find('a').hover(function () {
$(this).prevAll().add( $(this)).addClass(RateClassName);
}, function () {
$(this).prevAll().add($(this)).removeClass(RateClassName); .one('click', function () {
var core = parseInt(content.children().index($(this))) 1;
$.ajax({
type: "POST ",
url: PostURL ,
data: "{messageID:" messageID ",userID:" userID ",Score:" スコア "}",
contentType: "application/json; 8",
dataType: "json",
success: function (msg) {
var result = (jQuery.parseJSON(msg.d)).SuccessFlag;
DoAfterPost(result);
content.empty().removeClass();
$('').addClass(originalStateClassName).prependTo(content).animate({ 'width': 16 * result 'px', '不透明度': 1 }, '遅い')
}
}); );

参数说明:

参数名称	描述	默认值	参数类型
StarTip	鼠标移到星星上的文本提示	['不值一看', '平平无奇', '信息靠谱', '对我很有帮助', '极品信息']	javascript数组 [tip]:数组元素个数必须要和星星个数一致
ItemAmount	星星的个数	5	数字
UnRateClassName	还没投票时星星的样式名称	'star'	字符串
RateClassName	投票中，鼠标移过时星星的样式	'star_on'	字符串
originalStateClassName	投票完成后，结果展示时星星的样式	'OriginalState'	字符串
PostURL	ajax交互时，url参数	''	字符串
DoAfterPost	投票完成后，在投票页面使用自定义方法	''	字符串
userID	ajax交互时用户ID，防止重复投票	''	数字
messageID	ajax交互时文章ID	''	数字

2) フロントエンド参照コード

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

$( '#left table tr :eq(1) td:eq(0) #StarRate').Rate({
PostURL: 'http://www.cnblogs.com/ServiceProvider/MessageInfoService.asmx/VoteMessage',
userID: UserID 、
messageID: messageID、
DoAfterPost: function (data) {
if (data > 0) {
$(voteResultContext).html(data); }
else {
Process NoticeShow('既に投票しました')
}
}
});
}

4) スタイルシート

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

.star{ height:16px; 16px; float:left; 背景:url(../images/star.gif) 繰り返しなし 0 0;}

.star_on{ 背景: url(../images/star.gif) 繰り返しなし 0 - 32px !重要;}
.OriginalState{ width:0px;background: url(../images/star.gif)repeat-x 0 -16px !重要;不透明度:0;高さ:16px;}


3) サーバー側コード

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

/// < ;summary>

/// メッセージに投票します。戻り値が 0 より大きい場合は成功を意味します
/// ;param name="メッセージID">メッセージID
/// ユーザーID
/// ///
[WebMethod]
public string VoteMessage(int messageID, int userID ,int Score)
>SQLCMD = new SqlCommand("MessageInfo_Add_VoteUsefull_MessageIDUserID", SQLConnect);
SQLCMD.CommandType = CommandType.StoredProcedure;
SQLCMD.Parameters.Add(new SqlParameter("@messageID",SqlDbType.Int)); SQLCMD.Parameters["@messageID"]. 値 = messageID;
SQLCMD.Parameters.Add(new SqlParameter("@userID",SqlDbType.Int));
SQLCMD.Parameters["@userID"]。値 = ユーザー ID;
SQLCMD.Parameters .Add(new SqlParameter("@Score", SqlDbType.Int));
SQLCMD.Parameters["@Score"].Value = スコア; BasicSQLAccess.ExeScalarReturnValueFloat(SQLCMD);
HTFlag = new HTFlag();
return JsonConvert.SerializeObject(HTFlag);

JsonConvert.SerializeObject について コンテンツの概要とフロントエンド Jquery との対話については、以前の記事
4:
をダウンロードする
を参照してください。 CSS、JS、スター画像を含む圧縮パッケージ

クリックしてダウンロード