继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery 评分

千岁不倒翁
关注TA
已关注
手记 362
粉丝 60
获赞 386

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery评分</title>

<load href="__PUBLIC__/Js/jquery.js" />

<style>

/*评分*/

.starsBg{

     background:url("/App/Tpl/default/Admin/Public/images/start.gif") 0 -22px; top:0; left:0; height:22px; padding:0px; cursor:pointer;

    }

.starsovering{

    background:url("/App/Tpl/default/Admin/Public/images/start.gif"); height:22px; position:absolute; top:0; left:0;

}

.starsON{

     position:absolute; top:0; left:0;height:22px;

}

</style>

</head>

<body>

<script type="text/javascript">

//jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

jQuery.fn.stars = function(options,callback){

    //默认设置

    var settings = { MaxStar:20,StarWidth:23,CurrentStar:5,Enabled:true};   

    if(options) {

        jQuery.extend(settings, options);

    };

    var container = jQuery(this);

    container.css({"position":"relative"})

    .html('<ul class="starsBg"></ul>')   

    .find('.starsBg').width(settings.MaxStar*settings.StarWidth)

    .html('<li class="starsovering"  id="starid"></li>');

    if(settings.Enabled){

        var ListArray = "";   

        for(k=1;k<settings.MaxStar+1;k++){

            ListArray +='<li class="starsON" ></li>';

        }

        container.find('.starsBg').append(ListArray)

        .find('.starsON').hover(

        function(){

            $("#starid").hide();

            $(this).removeClass('starsON').addClass("starsovering");

        },

        function(){

            $(this).removeClass('starsovering').addClass("starsON");

            $("#starid").show();

    })

    .click(function(){

        var star_count = settings.MaxStar - $(this).css("z-index")+1;

        $("#starid").width(star_count*settings.StarWidth)

        //回调函数

        if (typeof callback == 'function') {

            callback(star_count);

            return ;

        }

    })

    }

}

</script>

<script type="text/javascript">

        $(document).ready(function(){

            var star = {$vo.star};           $("#star").stars({MaxStar:5,CurrentStar:star,Enabled:true},function(value){

                var postStar = value;

                $.post("__URL__/starStatus","id="+$(".id").val()+"&star="+postStar,function(date) {

                    if (date == 1) {

                        alert("评分成功!");

                    }else {

                        alert("评分失败!");

                    }

                });

            });

        });

</script>

<tr>

    <td class="tRight" width="10%">评分:</td>

    <td class="tLeft">

        <input type="hidden" value="{$id}" class="id">

        <div id="star"></div>

    </td>

    <td>备注:满分5颗星</td>

</tr>

</body>

</html>

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP