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

老廖發表於2019-05-11
jQuery函式模式

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

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

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、原始碼、效果圖


原始碼請在附件中下載，謝謝！

由老廖最後編輯於：3年前

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

相關文章