一個運費模板的需求，類似淘寶的運費模板的設置，其中存在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