灵活的评价星实现

最新推荐文章于 2025-07-25 13:39:19 发布

最新推荐文章于 2025-07-25 13:39:19 发布 · 154 阅读

文章标签：

#CSS #IE #WordPress #YUI #JavaScript #ViewUI

ui 专栏收录该内容

12 篇文章

订阅专栏

就是cnbeta常见的评价星，更简单灵活：

demo

截图：

目标：

1.可访问性 ，即使读屏器，css失效,javascript禁用也可正常提交结果。（使用a hover跨浏览器得实现动态改变表现，以及绝对定位的z-index特性使得可以随时鼠标滑动改变星级。）

2.灵活的换肤 ，可以任意设置评价星的颜色。（反模式使用透明星星图片（摘自wordpress），使用YUI3 StyleSheet来修改内嵌星星父元素a的hover背景颜色css，效率高更灵活）

关键代码：

YUI().use("node", "stylesheet", function (Y) {
    //换肤控制
    var skin = Y.one("#skin");
    var skinCss = Y.StyleSheet("#skinCss");
    var opts = "";
    Y.each(Y.Color.KEYWORDS, function (v, k) {
        opts += "<" + "option value='#" + v + "'" + ">" + k + "</option>";
    });
    skin.append(opts);
    skin.on("change", function (e) {
        var v = this.get("value");
        //直接操纵external css
        skinCss.set("ul.rate.operable li a:hover", {
            "backgroundColor": Y.Color.toHex(v)
        });
    });
    skin.set("value", "#f00");
    var rate = Y.one("#rateContainer");
    var rateAs = rate.all("a");
    //js可用，则去除href，注意ie去除后不可hover了
    if (Y.UA.ie) rateAs.on("click", function (e) {
        e.preventDefault();
    });
    else rateAs.removeAttribute("href");
    //js可用，则点击后去除绑定事件以及不再可鼠标掠过改变
    var rateHandler = rate.delegate("click", function (e) {
        this.setStyles({
            "backgroundColor": skin.get("value")
        });
        rate.removeClass("operable");
        e.halt();
        rateHandler.detach();
        alert("选择了" + this.get("title"));
    },
    "a");
});

实现原理：

1. 5个宽度不等的 a 由绝对定位层叠在一起，每个里面都包括透明的星图案 img,且从 a1 到 a5 z-index 从高到低排列，使得在重叠的部分由宽度小的a（星数少）在最上面接收响应：

2.当相应的a接到响应时：鼠标掠过（hover），则该 a z-index 设为最大，覆盖其他 a，并且设置其背景为红色，着色其包含的对应星图片。

.operable a:hover{
   z-index:9999;
   background:red;
}

3.在容器监听 click 事件，当发生click事件时，根据click的发生源 a 判断点击的星数，并且清除父容器的 click 事件以及operable css 类，使得鼠标掠过 hover 的反应不对该容器内的 a 起作用