jquery lq-score实现星级评分效果代码

代码语言:html

所属分类:星级评分

代码描述:jquery lq-score实现星级评分效果代码

代码标签: jquery lq-score 星级 评分

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lq-score.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lq-score.min.js"></script>

    <script>
        $(function () {$("#demo1").lqScore();$("#demo2").lqScore({callBack:function (score,ele) {alert(score);}
        });$("#demo3").lqScore({$tipEle:$("#tip3"),tips:["不推荐","一般","不错","很棒","极力推荐!"],zeroTip:"未评分"
        });$("#demo4").lqScore({$tipEle:$("#tip4"),tips:"default",score:3.5
         });$("#demo5").lqScore({content:"♀" 
         });$("#demo6").lqScore({fontSize:"35px"
        });$("#demo7").lqScore({selectColor:"#8eb9f5",});$("#demo8").lqScore({isReScore:true
         });$("#demo9").lqScore({$tipEle:$("#tip9"),tips:"default" 
         });$("#demo10").lqScore({$tipEle:$("#tip10"),tips:"我是{{lq-score}}" 
         });});
    </script>
</head>

<body>
    <div id="root">
        <div>
            <p>相信我,<b>使用真的很简单:</b></p>
        </div>
        <div>
            <p class="note">注:以下demo的效果都能组合使用</p>
        </div>
        <br />
        <br />
        <div>
            <p><b>demo1:</b>最简单的例子</p>
            <div class="myapp-score">
                <div id="demo1"></div>
            </div>
        </div>
        <hr />
        <div>
            <p><b>demo2:</b>有回调函数</p>
            <div class="myapp-score">
                <div id="demo2"></div>
            </div>
        </div>
        <hr />
        <div>
            <p><b>demo3:</b>带有提示信息</p>
            <div class="myapp-score">
                <div id="demo3">
                </div>
                <div class="myapp-tip">
                    <span id="tip3" class="lq-score-tip"></span>
                </div>
            </div>
        </div>
        <hr />
        <div>
            <p><b>demo4:</b>设置分值&nbsp;&nbsp;&nbsp;<span class="note">注:可以在设置后触发回调</span></p>
            <div class="myapp-score">
                <div id="demo4&qu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0