在做更新页面的时候时常会有需求限制用户，一部分属性值可改 另一部分的属性值不能修改 当不能修改的属性值多于可修改属性值的时候 那么在页面初始化的时候设置每个控件的disable非常麻烦 且select还需要单独设置 于是我想到了利用蒙版 将可以修改的属性控件置于蒙版之上
<html>
<head>
<title>编辑蒙版示例</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
addmask();
//页面大小改变重绘蒙版
$(window).resize(function(){
addmask();
});
$("#editPart").bind("click",editPart);
$("#editAll").bind("click",editAll);
$("#sub").click(function(){
alert("现在可以提交啦！！！！");
})
$("#cantedit").bind("click",cantEdit);
})
function addmask() {
var offsettop = $("#tb").offset().top;
var offsetleft = $("#tb").offset().left;
var width = $("#tb").width();
var height = $("#tb").height();
$("#mask").css( {
position : "absolute",
'top' : offsettop,
'left' : offsetleft,
'width' : width,
'height' : height,
'z-index' : 2,
'opacity' : '0.4'
});
}
//可全部编辑
function editAll(){
$("#mask").hide();
}
//可部分编辑
function editPart(){
//由于z-index只能在定位元素上生效，所以将需要设置的元素的position设置为relative（相对定位）若设置成absolute（绝对定位）则会影响页面排板效果
//.addClass("show") 是给修改过属性的元素加上一个伪类 便于获取修改过属性的控件
$("#t1").css({position : "relative",'z-index':3}).addClass("show");
$("#sub").css({position : "relative",'z-index':3}).addClass("show");
}
//不可编辑
function cantEdit(){
$(".show").removeClass("show").css({position : "static",'z-index':0});
addmask();
$("#mask").show();
}
</script>
</head>
<body>
<table width="100%" border="1" id="tb">
<tr><td >姓名:<input type="text" id="t1"/> <input type="text" style=""/></td></tr>
<tr><td>年龄:<input type="text" /></td></tr>
<tr><td>性别<input type="text" /></td></tr>
<tr><td><input type="text" /> <input type="button" id="sub" value="提交"/> </td></tr>
</table>
<div id="mask" style="background:#CCC"></div>
<input type="button" id="editPart" value="编辑部分"/><input type="button" id="editAll" value="全部编辑"/> <input type="button" id="cantedit" value="不可编辑"/>
</body>
</html>
