非常使用的js组件

浏览数：22 / 时间：2015年06月09日

1.实现商城评分小星星

/**
* JS评分效果
*/
function Score(options) {
    this.config = {
        selector: ‘.star‘,     // 评分容器
        renderCallback: null,        // 渲染页面后回调
        callback: null         // 点击评分回调
    };

    this.cache = {
        aMsg: [
            "很不满意|差得太离谱",
            "不满意|部分有破损",
            "一般|质量一般",
            "满意|质量不错",
            "非常满意|质量非常好"
        ],
        iStar: 0,
        iScore: 0
    };
    var scoreResult = 0;

    this.init = function (options) {
        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

        self._renderHTML();
    };
    this._renderHTML = function () {
        var self = this,
            _config = self.config;
        var html = ‘<span class="des"></span>‘ +
            ‘<p class="star-p hidden"></p>‘;
        $(_config.selector).each(function (index, item) {
            $(item).append(html);
            $(item).wrap($(‘<div class="parentCls" style="position:relative"></div>‘));
            var parentCls = $(item).closest(‘.parentCls‘);
            self._bindEnv(parentCls);
            _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
        });

    };
    this._bindEnv = function (parentCls) {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.selector + ‘ li‘, parentCls).each(function (index, item) {
            var score = index + 1;
            // 鼠标移上
            $(item).mouseover(function (e) {
                var offsetLeft = $(‘ul‘, parentCls)[0].offsetLeft;
                ismax(index + 1);

//                $(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).removeClass(‘hidden‘);
                $(‘p‘, parentCls).css({‘left‘: index * $(this).width() + 12 + ‘px‘});

//                var html = ‘<em>‘ +
//                    ‘<b>‘ + score + ‘</b>分 ‘ + _cache.aMsg[index].split(‘|‘)[0] + ‘‘ +
//                    ‘</em>‘ + _cache.aMsg[index].split(‘|‘)[1];
//                $(‘p‘, parentCls).html(html);
            });

            // 鼠标移出
            $(item).mouseout(function () {
                ismax();
                !$(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).addClass(‘hidden‘);
            });

            // 鼠标点击
            $(item).click(function (e) {
                var index = $(_config.selector + ‘ li‘, parentCls).index($(this));
                _cache.iStar = index + 1;

                !$(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).addClass(‘hidden‘);
                var html = ‘<strong>‘ +
                    score +
                    ‘分</strong>‘ + _cache.aMsg[index].split(‘|‘)[1];
                $(‘.des‘, parentCls).html(html);
                _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount: _cache.iStar});
                scoreResult=score;
            });

        });

        function ismax(iArg) {
            _cache.iScore = iArg || _cache.iStar;
            var lis = $(_config.selector + ‘ li‘, parentCls);

            for (var i = 0; i < lis.length; i++) {
                lis[i].className = i < _cache.iScore ? "on" : "";
            }
        }
    }

    this.getScore = function(){
        return scoreResult;
    }
}

HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/Public/Review/Assets/review.css">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="/Public/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/Public/Review/Assets/score.js" ></script>
    <script type="text/javascript" src="/Public/js/jquery.enplaceholder.js" ></script>
    <script type="text/javascript" src="/Public/Review/Assets/review.js" ></script>

    <title>商家评价</title>
</head>
<body>
<div class="body">
    <div class="title">
        <span class="titleText">我要点评</span>
    </div>
    <form id="regForm" class="form" name="regForm" action="/Review/Review/save" method="post" >


        <div class="navi">
            <input type="hidden" id="uid" name = "uid" value="{$uid}" />
            <input type="text" id="nickName" name="nickName" class="input" placeholder="请输入用户昵称" />
        </div>
        <div id="nickTip" class="sellerTip"></div>
        <div class="content">
            <div class="textarea">
                <textarea   id="reviewContent" name="reviewContent" class="input" placeholder="请输入评价内容"></textarea>
            </div>

        </div>

        <div id="contentTip" class="sellerTip"></div>

        <div class="star">
            <div>
                <span>总体评分</span>
            </div>
            <div>
                <div class ="list">
                    <ul>
                        <li value="1"><a href="javascript:;">1</a></li>
                        <li value="2"><a href="javascript:;">2</a></li>
                        <li value="3"><a href="javascript:;">3</a></li>
                        <li value="4"><a href="javascript:;">4</a></li>
                        <li value="5"><a href="javascript:;">5</a></li>
                    </ul>
                </div>
                <input type="hidden" id="score" name = "score" value="0" />
            </div>
        </div>

        <div class="centerBtn">
            <a href="javascript:saveHandler()">
                <img src="/Public/img/bts/submit.png">
            </a>
        </div>
    </form>
</div>
</body>
</html>

css文件

* {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

ul, li {
    list-style: none;
}

.star {
    position: relative;
    height: 24px;
    margin: 10px auto 0;
}

.title {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    background: #fcfcfc;
    font-size: 20px;
    font-weight: bold;
    color: #5c5c5c;
    background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
    padding: 13px;
    text-align: center;
}

.titleText {
    text-align: center;
}

.star span {
    float: left;
    height: 19px;
    line-height: 19px;
    padding-right: 20px;

}

.star ul {
    margin: 0 10px;
}

.star li {
    float: left;
    width: 24px;
    height: 22px;
    text-indent: -9999px;
    background: url(‘/Public/img/star.png‘) no-repeat;
    cursor: pointer;
    padding-left: 5px;
}

.star li.on {
    background-position: 0 -28px;
}

.star p {
    background: url(‘/Public/img/icon.gif‘) no-repeat;
    padding: 10px 10px 0;
    position: absolute;
    top: 20px;
    width: 159px;
    height: 60px;
    z-index: 100;
}

.star p em {
    color: #FF6600;
    display: block;
    font-style: normal;
}

.star strong {
    color: #ff6600;
    padding-left: 50px;

}

.hidden {
    display: none;
}

.des {
    padding-left: 60px;
    height: 24px;
    padding-top: 5px;
}

.sellerTip {
    text-align: left;
    height: 12px;
    font-size: 13px;
    margin-top: -5px;
}

#contentTip {
    margin-top: 20px;
}

.centerBtn {
    padding-top: 22px;
    text-align: center;
}
.form{
    padding:0px 25px 0px 10px;
    margin-top: 10px
}
.form input {
    width: 100%;
    height: 30px;
}

.textarea textarea {
    width: 100%;
    height: 150px;
}

.navi {
    padding-top: 10px;
}

.content {
    padding-top: 10px;
    height: 150px;
}

.input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border-radius: 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
}

textarea:focus, input:focus {
    border-color: rgba(82, 168, 236, 0 sss .8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
    border-radius: 4px;
}