ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用して星評価コードを共有する_jquery

jQuery を使用して星評価コードを共有する_jquery

WBOY
リリース: 2016-05-16 16:28:06
オリジナル
1425 人が閲覧しました

以前の記事 Native js は星評価を実装します があります。カバー範囲はそれほど広くないかもしれませんが、jquery 実装について星評価を付けます。

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

jQuery のスター レビュー評価
  • 1

  • 2

  • 3

  • 4

  • 5





  • コードをコピーします コードは次のとおりです:
    <スタイル>
    *{マージン:0;パディング:0;フォントサイズ:13px;}
    ul,li{リストスタイル:なし;}
    .star {位置:相対;幅:600px;高さ:24px;マージン:20px 自動 0;}
    .star スパン {float:left;height:19px;line-height:19px;}
    .star ul{margin:0 10px;}
    .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
    .star li.on{背景位置:0 -28px;}
    .star p {パディング:10px 10px 0;位置:絶対;トップ:20px;幅:159px;高さ:60px;z-index:100;}
    .star p em {色: #FF6600;表示: ブロック;フォント スタイル: 通常;}
    .starstrong {color:#ff6600;padding-left:10px;}
    .hidden{表示:なし;}



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



    <スクリプトタイプ="text/javascript"> $(関数(){
    var スコア = 新しいスコア({
    コールバック: function(cfg) {
    console.log(cfg.starAmount); }
    });
    });







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

    /**
     * JQ评分效果
     */ 
     function Score(options) { 
        this.config = { 
            selector                  :   '.star',     // 评分容器 
            renderCallback            :   null,        // 渲染页面后回调 
            callback                  :   null         // 点击评分回调                          
        }; 
     
        this.cache = { 
            aMsg : [ 
                    "很不满意|差得太离谱,与卖家描述的严重不符,非常不满", 
                    "不满意|部分有破损,与卖家描述的不符,不满意", 
                    "一般|质量一般,没有卖家描述的那么好", 
                    "满意|质量不错,与卖家描述的基本一致,还是挺满意的", 
                    "非常满意|质量非常好,与卖家描述的完全一致,非常满意" 
                    ], 
            iStar  : 0, 
            iScore : 0 
        }; 
     
        this.init(options); 
     } 
     
     Score.prototype = { 
     
        constructor: Score, 
     
        init: function(options){ 
            this.config = $.extend(this.config,options || {}); 
            var self = this, 
                _config = self.config, 
                _cache = self.cache; 
     
            self._renderHTML(); 
        }, 
        _renderHTML: function(){ 
            var self = this, 
                _config = self.config; 
            var html = '' +  
                       ''; 
            $(_config.selector).each(function(index,item){ 
                $(item).append(html); 
                $(item).wrap($('
    ')); 
                varparentCls = $(item).closest('.parentCls'); 
                self._bindEnv(parentCls); 
                _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback(); 
            }); 
     
        }、
        _bindEnv: function(parentCls){
            var self = this,
                _config = self.config,
                _cache = self.cache; 
     
            $(_config.selector ' li',parentCls).each(function(index,item){
                 
                // ネズミ标移上
                $(item).mouseover(function(e){
                    var offsetLeft = $('ul',parentCls)[0].offsetLeft; 
                    ismax(インデックス 1); 
                     
                    $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden'); 
                    $('p',parentCls).css({'left':index*$(this).width() 12 'px'}); 
                     
     
                    var html = ''   
                                  ''インデックス '分 ' _cache.aMsg[index].split('|')[0] ''
                               '
    ' _cache.aMsg[インデックス].split('|')[1]; 
                    $('p',parentCls).html(html); 
                }); 
     
                // ネズミ标移出
                $(item).mouseout(function(){
                    ismax(); 
                    !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
                }); 
                 
                // 鼠标点击
                $(item).click(function(e){
                    varindex = $(_config.selector ' li',parentCls).index($(this)); 
                    _cache.iStar = インデックス 1; 
                                     
                    !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
                    var html = ''  
                                    インデックス
    「分割
    」 _cache.aMsg[index].split('|')[1];
    $('.desc',parentCls).html(html); _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar}); });                                                                       });

    関数 ismax(iArg) {
    _cache.iScore = iArg ||
    var lis = $(_config.selector ' li',parentCls);                                                                       for(var i = 0; i < lis.length; i ) {
    lis[i].className = i < _cache.iScore ? : "";                                                                                                                                                                                                                                           }
    };



    使用方法は非常に簡単なので、これを自由に使用してください。
    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート