jqueryスタープラグイン、サポートpages_jqueryでの複数の使用

レンダリングは次のとおりです:

CSS に必要な背景画像:

面倒なことはせずに、投稿コード:
html コード

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

総合評価:* < div
class="評価ラップ">

href= "javascript:;" data-rate-value="20" data-hint="悪い" title="悪い" class="2 つ星">

> 星をクリックして評価を開始します
float : left">広告効果:*

class="評価-ラップ" > ;

< ;li>
;

スターのスコア付けを開始


JS コード




コードをコピー


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

スクリプトタイプ= "text/javascript">
$(function(){
$(".rated-wrap a").mouseover(function(){

$(this).parent() .siblings( ).find("a").removeClass("アクティブスター"); $(this).addClass("アクティブスター"); .parent( ).parent().attr("id")).html($(this).attr("data-hint")) }).mouseleave(function(){ var selectID =$( this).parent().parent().attr("id") "select"; $(this).removeClass("active-star"); if($("# " selectID) .length==0) {

$("." $(this).parent().parent().attr("id")).removeClass("active-hint") .html( "星をクリックしてスコアを開始します");

}
else
{
$("." $(this).parent().parent().attr("id ")).html ($("#" selectID).attr("data-hint"));
$("#" selectID).addClass("active-star");
}
}).click (function(){
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id ") "select" );
$(this).parent().siblings().find("a").attr("id","");
$("." $( this).parent( ).parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint");
})



CSS コード




コードをコピー


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

<スタイル>
.item-rank-rst、.user-rank-rst、.rated-wrap ul、.rated-wrap a:hover、.rated-wrap .active-star、.user-m-star、.urr- Rank60, .breadcrumb .note {
background-image: url(xing_bg.png);/**-----スタープラグインの背景画像----**/
background-repeat: no-repeat;
}
.rated-wrap {
背景: なし 繰り返しスクロール 0 0 #FFF9F1;
ボーダー: 1px ソリッド #EFE0D7;
表示: インラインブロック;
フロート: 左;
高さ: 20px;
マージン右: 5px;
パディング: 4px 0 0 5px;
位置: 相対。
トップ: -2px;
幅: 89px;
z インデックス: 0;
}
.rated-wrap ul {
背景位置: 0 -250px;
高さ: 16px;
位置: 相対。
幅: 85px;
z インデックス: 10;
}
.rated-wrap li {
display: inline;
}
.rated-wrap a {
display: block;
高さ: 16px;
左: 0;
位置: 絶対。
トップ: 0;
}
.rated-wrap .five-stars {
背景位置: 0 -160px;
幅: 84px;
z インデックス: 10;
}
.rated-wrap .four-stars {
背景位置: 0 -178px;
幅: 68px;
z インデックス: 20;
}
.rated-wrap .three-stars {
background-position: 0 -196px;
幅: 51px;
z インデックス: 30;
}
.rated-wrap .two-stars {
background-position: 0 -214px;
幅: 34px;
z インデックス: 40;
}
.rated-wrap .one-star {
背景位置: 0 -232px;
幅: 17px;
z インデックス: 50;
}
.評価ブロック .hint {
色: #999999;
フロート: 左;
}
.active-hint {
色: #CC0000;
}
.評価ブロック .err-hint {
色: #EE0000;
フォントの太さ: 太字;
}

注：css代码从项目中分解出，一部不完完，大家可以自己的要求に応じてcssスタイルを修正