zoukankan      html  css  js  c++  java
  • JQuery版评分控件

    Hi All,

    分享一个学习JQuery做的一个评分控件。

    需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果;当鼠标推出 ‘☆’时,所以字符为 ‘☆’,并清空评价结果。

    注:一个 '★' 为:差

      二个 '★' 为:一般

      三个 '★' 为:良好

      四个 '★' 为:满意

      五个 '★' 为:很满意

    1. 用HTML画好布局: 

       <div class="myPosition">
            <h2>评分:</h2>
            <table class="myFont">
                <tr id="tr_mark">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="myComment">
            <span id="myComment">一般</span>
        </div>

    2. 用CSS控制表现形式:

    .myPosition {     position:absolute;     top:35%;     left:20%; }

    .myFont {     font-size: 24px; }

    .myComment {     color: red;     font-weight:bold;     font-size: 20px;     position:absolute;     top: 44%;     left:30%; }

    3. 用JQuery控制行为

        <script src="../Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(function () {
                $tds = $("#tr_mark > td"); // 获取所有的td
                $tds.text("☆"); // 设置td的innerText
                $tds.mousemove(function () { // 给所有的td注册mouseove事件
                    $tds.text("★");
                    $(this).nextAll().text("☆");
                    var td = $(this).get(0);
                    var index = td.cellIndex;
                    switch (index)
                    {
                        case 0:
                            $("#myComment").text("差");
                            break;
                        case 1:
                            $("#myComment").text("一般");
                            break;
                        case 2:
                            $("#myComment").text("良好");
                            break;
                        case 3:
                            $("#myComment").text("满意");
                            break;
                        case 4:
                            $("#myComment").text("很满意");
                            break;
                    }
                }).mouseout(function () { // 给所有的td注册mouseout事件
                    $tds.text("☆"); // 将所有td内容变成空 ☆
                    $("#myComment").text(""); // 将评价结果内容清空
                });
            });
        </script>

    4. 显示结果:

    这样一个简单的淘宝评分控件就完成了,大家可以尝试一下 :).

  • 相关阅读:
    算法设计与分析——背包问题求解
    并行多核体系结构基础——第五章的多级高速缓存中的包含、排他、NINIE策略
    并行多核体系结构基础——第五章知识点和课后习题
    多耦合效应下的网络传播演化与分析
    算法设计与分析——矩阵链相乘求解
    算法设计与分析——动态规划之矩阵连乘
    并行多核体系结构基础——第五章的伪LRU(PLRU)算法简要介绍
    算法设计与分析——分治DC算法
    常见概率分布的特征函数推导
    算法设计与分析——最长公共子序列问题
  • 原文地址:https://www.cnblogs.com/bennettwang00/p/JQueryRanking.html
Copyright © 2011-2022 走看看