一个运费模板的需求，类似淘宝的运费模板的设置，其中存在div定位在文本框下
<script src="${ctx}/scripts/BillionFun/common.js"></script>
<style>
input{
width:50px;
}
#t_location li{
list-style: none;
float:left;
width:24%;
}
#t_location{
width:400px;
border:1px green solid;
background-color:gray;
position: absolute;
display: none;
}
</style>
<c:choose>
<c:when test="${shipfeetem.chargeMode==1}">
<c:set var="chargeMode" value="个"></c:set>
</c:when>
<c:when test="${shipfeetem.chargeMode==2}">
<c:set var="chargeMode" value="元"></c:set>
</c:when>
</c:choose>
<table>
<tr>
<td>模板名称：</td>
<td colspan="3">${shipfeetem.fullName }</td>
</tr>
<tr>
<td>计费方式：</td>
<td>
<c:choose>
<c:when test="${shipfeetem.chargeMode==1 }">数量</c:when>
<c:when test="${shipfeetem.chargeMode==2 }">金额</c:when>
</c:choose>
</td>
<td>模板类型：</td>
<td>
<c:choose>
<c:when test="${shipfeetem.dispatch==1 }">按区域计费</c:when>
<c:when test="${shipfeetem.dispatch==2 }">全国统一计费</c:when>
</c:choose>
</td>
</tr>
</table>
<table>
<tr>
<td>免邮条件：</td>
<td> 买 <input type="text" id="t_freeCondition" name="" value="" /> ${chargeMode}（含）以上免邮,</td>
</tr>
<tr>
<td>至 <input type="text" name="t_provinces" value="" />的运费：</td>
<td>
买 <input type="text" id="t_baseCondition" name="" value="" /> ${chargeMode}（含）以内,
收邮费<input type="text" name="" id="t_basePrice" value="" /> 元,
每多买 <input type="text" id="t_addCondition" name="" value=""/> ${chargeMode}（含）以内,
加收邮费 <input type="text" id="t_addPrice" name="" value=""/> 元.
</td>
</tr>
<tr>
<td>至 <input type="text" name="t_provinces" value="" />的运费：</td>
<td>
买 <input type="text" id="t_baseCondition" name="" value="" /> ${chargeMode}（含）以内,
收邮费<input type="text" name="" id="t_basePrice" value="" /> 元,
每多买 <input type="text" id="t_addCondition" name="" value=""/> ${chargeMode}（含）以内,
加收邮费 <input type="text" id="t_addPrice" name="" value=""/> 元.
</td>
</tr>
<tr>
<td>至 <input type="text" name="t_provinces" value="" />的运费：</td>
<td>
买 <input type="text" id="t_baseCondition" name="" value="" /> ${chargeMode}（含）以内,
收邮费<input type="text" name="" id="t_basePrice" value="" /> 元,
每多买 <input type="text" id="t_addCondition" name="" value=""/> ${chargeMode}（含）以内,
加收邮费 <input type="text" id="t_addPrice" name="" value=""/> 元.
</td>
</tr>
</table>
<div id="t_location">
<c:forEach var="province" items="${list}">
<c:if test="${province.parentId==0}">
<li><input type="checkbox" value="${province}">${province.fullName }</li>
</c:if>
</c:forEach>
<br/>
<c:forEach var="province" items="${list}">
<c:if test="${province.parentId!=0}">
<li><input type="checkbox" value="${province}">${province.fullName }</li>
</c:if>
</c:forEach>
<div style="clear: both;"><a href="javascript:$('#t_location').hide();">关闭</a></div>
</div>
<script type="text/javascript">
$().ready(function(){
$("input[name='t_provinces']").click(function(){
// alert(this.clientWidth);
var pos=new getPos(this);
$("#t_location").attr("style",";top:"+(pos.Top+this.clientHeight+5)+"px;left:"+pos.Left+"px");
$("#t_location").show();
});
});
</script>
common.js里面的用到的方法主要是：
function getPos(obj){
this.Left=0;
this.Top=0;
this.Height=obj.offsetHeight;
this.Width=obj.offsetWidth;
var tempObj=obj;
while (tempObj.tagName.toLowerCase()!="body" && tempObj.tagName.toLowerCase()!="html"){
this.Left+=tempObj.offsetLeft;
this.Top+=tempObj.offsetTop;
tempObj=tempObj.offsetParent;
}
}
用
getPos(obj)这个方法得到元素在网页中的绝对位置
用this.clientHeight得到元素的自身的高，如果需要用到宽，则是this.clientWidth 详细请见
知人不必言尽，留三分余地于人，留些口德于己；
责人不必苛尽，留三分余地于人，留些肚量于己；
才能不必傲尽，留三分余地于人，留些内涵于己；
锋芒不必露尽，留三分余地于人，留些收敛于己；
有功不必邀尽，留三分余地于人，留些谦让于己；得理不必抢尽，留三分余地于人，留些宽容于己；
得宠不必恃尽，留三分余地于人，留些后路于己；
气势不必倚尽，留三分余地于人，留些厚道于己；
富贵不必享尽，留三分余地于人，留些福择于己；
凡事不必做尽，留三分余地于人，留些余德于己。
N：
Q：412546724
E：yi.zhu89@yahoo.com.cn
M：13611084323