回到頂部

jquery星級評分插件(支持各種回調函數、自定義配置、只讀模式、最大星級等)

時間:5年前   作者:老廖   瀏覽:416   [站內原創,轉載請注明出處]

標簽: JavaScript   css   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、源碼、效果圖


源碼請在附件中下載,謝謝!

老廖最后編輯于:5年前

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

評論努力加載中...
暫無評論
暫無評論

手機掃碼閱讀

熱門相關

加載中...
關于我們   聯系我們   申請友鏈   贊助記錄   站點地圖
? 2014 - 2017 www.1255315.live All Rights Reserved. 京ICP備14042174號-1
本站遵循 CC BY 4.0 協議,轉載請注明出處 。
辽宁十一选五走实图 今日股票行情大盘走 山西快乐10分钟开讲结果 浪潮信息股票行情 贵州11选五开奖结果今天 股票开户营业部 11选5开奖结果 安徽十一选五技巧 股票期权个人怎么买卖 金呈配资 甘肃11选5 360