公司一个新项目中,有个功能很吸引人.. 在很多网站上也很常见,虽然标签是用repeater动态绑定的,可以用到OnItemCommand来做,但是后台这么做很是复杂而且在选取标签的时候会刷新页面,这个不可取.在网上貌似也没相关的资料,这里我用JS做了这个功能,现在拿出来给大家分享下. 也希望大家能赞下我,多关注下我~

 

再次点击 Darren标签的时候,图如下

这里绑定的标签,我用到一个随机颜色方法,JS我写的很全面,点击下面的标签上面文本框添加这个标签的值,并且标签上加样式,当再次添加这个标签的时候,这个标签样式取消,文本框中值去除,因为项目策划中,需要标签只能限定在三个上.这里不管手写还是自选标签都被我控制在三个以内.(数据库中就一个标签名称和标签ID) 好了,废话不多说,我上代码了：

前台绑定标签:

后台标签随机颜色的方法:

调用的JS:

//点击标签使用的方法

function MarkSelectByID(a, b) {

    var m = document.getElementById("tx_markname");

    var num = 0;

    if (num<=3&&$("#lbl_MarkSelect" + b + "").css("background-color") == "transparent") //没有选择

    {

        if (m.value != "") {

            if (m.value.substr(m.value.length - 1) != " ") {

                m.value += " ";

            }

            var s = $("#tx_markname").val().split(" "); //遍历文本框

            if (s.length < 4) {

                m.value += a + " ";

                $("#lbl_MarkSelect" + b + "").css("background-color", "#f2eada");

            }

        } else {

            m.value += a + " ";

            $("#lbl_MarkSelect" + b + "").css("background-color", "#f2eada");  //选中之后设置为象牙色

        }

        num += 1;

    }

    //已经被选择的标签,再次点击去除样式,文本框中相对应的值也去除

    else {

        //如果文本框最后没有给空格,默认给一个空格

        if (m.value.substr(m.value.length - 1) != " ") {

            m.value += " ";

        }

        $("#lbl_MarkSelect" + b + "").css("background-color", "transparent");

        m.value = m.value.replace(a + " ", "");

        num -= 1;

    }

}

var m; //保存三个标签时的值来控制超过标签

//文本框值改变的方法

function MatkChange() {

    var g = $("#tx_markname").val();

    //清楚首位空格

    if (g==" ") {

        $("#tx_markname").val("");

    }

    //不允许输入2个连续的空格

    if (g.substr(g.length - 1,1) == " "&&g.substr(g.length - 2,1) ==" ") {

        $("#tx_markname").val(g.substr(0,g.length - 1));

    }

    //清空所有样式

    $(".Cs_Mark").each(function () {

        $(this).css("background-color", "transparent");

    });

    var s = $("#tx_markname").val().split(" "); //遍历文本框

    var num = s.length - 1;

    if (num == 3) {

        var LastIndex = $("#tx_markname").val().lastIndexOf(" ");

        m = $("#tx_markname").val().substr(0, LastIndex + 1);

        $("#tx_markname").val(m);

    }

    if (num>3) {

        $("#tx_markname").val(m);

    }

    var j = $("#tx_markname").val().split(" ");

    $.each(j, function () {

        var a = this;  //文本框每个元素

        $(".Cs_Mark").each(function () {

            if (a == this.text) {

                $(this).css("background-color", "#f2eada");

            }

        });

    });

}

如果博友觉得哪里有不懂的可以加我QQ：357253950 来交流~