jquery星級評分外掛(支援各種回撥函式、自定義配置、只讀模式、最大星級等)

老廖發表於2019-05-11

廢話不多說,直接上程式碼。哈哈,這就是我的風格!!!!

功能:支援各種回撥函式、自定義配置、只讀模式、最大星級、結合表單提交

1、使用


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js"></script>
    <script src="jquery-star.js" type="text/javascript"></script>
    <link href="jquery-star.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $('#demo1').newStar();
            $('#demo2').newStar({ max: 9,onSelect: function (d) { alert("你選擇了:" + d + "星級"); } });
            $('#demo3').newStar({ initStar: 3, readonly: true });
            $('#demo4').newStar({ onSelect: function (d) { alert("你選擇了:" + d + "星級"); } });
            $('#demo5').newStar();
            $('#demo6').newStar();
        });

        function getval() {
            alert($('#demo5').getStar());
        }

        function setval() {
            $('#demo6').setStar($('#starnum').val());
        }
    </script>
</head>
    <body>
        demo1(服務):預設
        <div id="demo1" name="serveice">
        </div>
        demo2(速度):指定最大星級
        <div id="demo2" name="speed">
        </div>
        demo3:初始化繫結3星級,只讀
        <div id="demo3">
        </div>
        demo4:單擊回撥
        <div id="demo4">
        </div>
        demo5:獲取星級
        <div id="demo5">
            <button onclick="getval()">getValue</button>
        </div>
        demo6:設定星級
        <div id="demo6">
            <button onclick="setval()">setValue</button>
            <input type="text" id="starnum"/>
        </div>
    </body>
</html>



2、原始碼、效果圖


原始碼請在附件中下載,謝謝!

老廖最後編輯於:4年前

內容均為作者獨立觀點,不代表八零IT人立場,如涉及侵權,請及時告知。

相關文章