实际项目中应用到的电话簿

Html

Css

.tree li {
	list-style:none;
	height:25px;
	line-height:25px;
	padding:2px;
}
.tree_title {
	font-family:"微软雅黑";
	font-size:24px;
}
.div1 {
	width:300px;
	height:auto;
	border:1px solid gray;
	margin:0 auto;
}
.tree li input {
	border:none;
	height:25px;
	line-height:25px;
}
.tree li input:hover {
	cursor:pointer;
	color:lightblue;
}

//下拉菜单
window.onload = function() {
    var tree_title = document.getElementsByClassName("tree_title");
    for (var i = 0; i < tree_title.length; i++) {
        tree_title[i].onclick = function() {
            $(this).parent().find("ul").stop(false, false).slideToggle();
        }
    }
}

$(document).ready(function() {
    $("#checkedAll").click(function() { //全选<或>全不选
        var checked = this.checked;
        $("input[class='group_tree']").each(function() {
            if (checked) {
                $(this).prop("checked", true);
                $(".tree li input").css("color", "lightblue");
            } else {
                $(this).removeAttr("checked");
                $(".tree li input").css("color", "");
            }
        });
    });
    //查询详细信息
    var treeChild = $(".tree li input");
    for (var i = 0; i < treeChild.length; i++) {
        treeChild[i].onclick = function() {
            alert("查询" + this.value + "的详细信息")
        }
    }
    //当前选中的部门的人员高亮显示
    $("input[class='group_tree']").each(function() {
        $(this).click(function() {
            var checked = this.checked;
            if (checked) {
                $(this).next().children("li").children("input").css("color", "lightblue");
            } else {
                $(this).next().children("li").children("input").css("color", "");
            }
        })
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

实际项目中应用到的电话簿



代码描述：简单的电话簿

这个是前期用HBuilder写的，应用到实际项目中需要用ajax去后台查询数据，动态添加各组组名一级人员分组

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

菇凉……我是好人

相关代码

实际项目中应用到的电话簿

最新