// html css 省略 // html 保持拼接字符串 ; data 借口数据 ;userSelectList_one 右侧栏 // userList_one 左侧栏 data-hidden 用于标志右侧 var html = []; if (data.length > 0) { var right_array = []; $("#pop_yingji #userSelectList_one li").each(function (index, value) { right_array.push($(this).attr("data-guid")); }); if (right_array.length >= 0) { $.each(data, function (index, value) { if ($.inArray(value.guid, right_array) >= 0) { html[index] = '<li title="' + value.userName + '">' + '<span class="name">' + MY_TOOL_FUNCTION.cutStr(value.userName, 15) + '</span>' + '<input type="checkbox" checked class="xy_checkbox3" data-guid="' + value.guid + '" data-account="' + value.account + '">' + '</li>'; } else { html[index] = '<li title="' + value.userName + '">' + '<span class="name">' + MY_TOOL_FUNCTION.cutStr(value.userName, 15) + '</span>' + '<input type="checkbox" class="xy_checkbox3" data-guid="' + value.guid + '" data-account="' + value.account + '">' + '</li>'; } }); } if (html.length > 0) { $("#pop_yingji #userList_one").html(html.join('')); } else if (html.length == 0) { $("#pop_yingji #userList_one").html('<li>无此联系人!</li>'); } //点击选中的人员,右移 $("#pop_yingji #userList_one li input.xy_checkbox3").on("click", function () { var _this = this, html = "", name = "", guid = "", account = ""; var checkTrueOrFalse = $(_this).is(":checked"); if (checkTrueOrFalse) { //$("body").find("div[data-hidden]").remove(); $('div[data-hidden="' + $("select#noticeGroup_one option:selected").val() + '"]').html(""); guid = $(_this).attr("data-guid"); account = $(_this).attr("data-account"); name = $(_this).prev().text(); html = '<li title="' + name + '" class="lf" data-account="' + account + '" data-guid="' + guid + '"><input data-guid="' + guid + '" data-account="' + account + '" type="checkbox" checked class="xy_checkbox2"><span class="name">' + MY_TOOL_FUNCTION.cutStr(name, 3) + '</span></li>'; $("#pop_yingji #userSelectList_one").append(html); var $ul = $("#userSelectList_one").html(); //var $div='<div class="hide" data-hidden="'+guid+'">'+$ul+'</div>' $('div[data-hidden="' + $("select#noticeGroup_one option:selected").val() + '"]').html($ul); } else { guid = $(_this).attr("data-guid"); $("#pop_yingji #userSelectList_one li").each(function (index, value) { if (guid == $(this).attr("data-guid")) { $(this).remove(); } }); } $("#pop_yingji #NumofConnect_one").text($("#pop_yingji #userSelectList_one li").length); }); } else if (data.length == 0) { $("#pop_yingji #userList_one").html('<li>无此联系人!</li>'); } $("#pop_yingji").on("click", "input.xy_checkbox2", function () { var _this = this; var checkTrueOrFalse = $(_this).is(":checked"); if (!checkTrueOrFalse) { $(_this).parents("li").remove(); var NumofConnect = $("#pop_yingji #userSelectList_one li").length; $("#pop_yingji #NumofConnect_one").text(NumofConnect); $("#pop_yingji #userList_one li input.xy_checkbox3").each(function (index, value) { var guid = $(this).attr("data-guid"); if (guid == $(_this).attr("data-guid")) { $(this).prop("checked", false); } }) } });
自定义实现select placeholder 效果
if("请选择要通知的协同组"===$("select#noticeGroup_one option:selected").html()){ $("select#noticeGroup_one").css("color","#aaa"); } $("select#noticeGroup_one").on("change", function () { var guid = $("select#noticeGroup_one option:selected").val(); if("请选择要通知的协同组"!==$("select#noticeGroup_one option:selected").html()){ $("select#noticeGroup_one").css("color","#000"); } });
自定义CheckBox
xy_checkbox3{ position:relative; width: 0px; height: 0px; border:none; color:transparent; } .xy_checkbox3::before{ content:''; position: absolute; top: -6px; left: 6px; display: inline-block; width: 22px; height: 22px; /* border-radius: 50%; */ background: url("images/icon/checkbox_off.png") center center no-repeat; } .xy_checkbox3:checked::before{ background: url("images/icon/checkbox_on.png") center center no-repeat; }