例如:在一个页面中要想底部对齐的。本人对"div"的控制
比如:在一个div中用title还有描述"description"两部分,如果标题站得像素大了,显而易见描述部分就小了所以要写一个js 来控制。
下面是一个页面(在HMY项目中一个页面)我来总结一下
<script type="text/javascript">
$(function(){
$.post('getLoadDetroitCompanyItems.action',function(jsonObj) {
var items = jsonObj.ITEMS;
for (var i=0; i < items.length; i ++) {
var tmpul='';
if ((i+1)%2!=0) {
tmpul="<li class='li_left_style'>";
} else if((i+1)%2==0){
tmpul="<li class='li_right_style'>";
}
if (items[i].imageURL == null || items[i].imageURL =='') {
tmpul+= "<div class='border_style_img'><a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><img width='160px;' height='138px;' src='././images/profile_no_logo.gif'/></a></div>";
} else {
tmpul+="<div class='border_style_img'><a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><img width='160px;' src='"+items[i].imageURL+"'/></a></div>";
}
tmpul+= " <div class ='li_left_div'>"+
// 这个蓝色的字体原来是<span class='spand_content_style1' id='"+i+"'>为了区别加了一个titleclass='title spand_content_style1'这样就唯一了
" <div class='title_wrap'><span class='title spand_content_style1' name='"+i+"'><a href='viewCompanyProfile.action?orgId="+items[i].url+" 'target='_blank'>"+items[i].title+"</a></span>"+
" <a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><span class='spand_content_style' >[ "+items[i].jobPositionCount+" Job Openings]</span></a></div>"+
" <div class='hr'><hr /></div>"+
" <div class='company_hiring_style1' id='company_content_"+i+"' style='height:110px;' >"+items[i].description+"</div>"+
" </div>"+
" </li>";
$("#portfolio_comp_hring").append(tmpul);
}
resizeCompanyHeight();
} );
});
function resizeCompanyHeight(){
setTimeout(function(){
// 这是 <ul id="portfolio_comp_hring"> ul 的id 为“portfolio_comp_hring”。这个是 title<span ></span > 的id
$("#portfolio_comp_hring .title").each(
function(){
// 这个获取整个第一个<span>
var div = $(this);
// 获得name值,这个是name名称。也可以用id='"+i+"' 那就改 var currentId = div.attr("id");
//通过attr("name") 可以获得name 的值
var currentId = div.attr("name");
// var currentId = div.attr("id");就是获取自增”i “的值
//关键的这个显示的<span></span>和<div class='company_hiring_style1' id='company_content_"+i+"' style='height:110px;' >"+items[i].description+"</div>"是同一个
//因为我上面通过ajax 循环获取的值要通过id 或者class 判断唯一性
var forResizeCompanyId = "company_content_"+currentId;
resizeSpan(true, 24, div, forResizeCompanyId);
}
)
},200);
}
</script>
<div style="height:550px;">
<div style="height:514px;">
<ul id="portfolio_comp_hring">
</ul>
</div>
</div>
===========================================================================
function resizeSpan(isHeight, maxHeight, span,forResizeId) {
setTimeout(function(){
if (isHeight == null) {
isHeight = true;
}
var divHeight =$("#"+forResizeId).height();
//为true;判断
if (isHeight) {
var spanhg = '';
var span_height=span.height();
if (span.height() > maxHeight) {
newheight = span.height();
spanhg= newheight-maxHeight;
var tpheight='';
if (spanhg < divHeight) {
tpheight = divHeight-spanhg;
}else{
tpheight = 0;
}
$("#"+forResizeId).height(tpheight);
}
}else{
alert("not implemented...");
}
},0);
}
=================================8888888888888888888
//下面的js 是判断图片的大小来调整显示图片
function resizeImg(isHeight, maxLength, img) {
// 加载延长 setTimeout(function(){
if (isHeight == null) {
isHeight = true;
}
if (isHeight) {
if (img.height() > maxLength) {
// calculate new image dimensions
newHeight = maxLength;
newWidth = img.width() / (img.height() / maxLength);
// set new image dimensions
img.height(newHeight).width(newWidth);
} else {
// center the img
if (img.height() > 1) {
img.css("margin-top", (maxLength - img.height()) / 2);
img.css("margin-bottom", (maxLength - img.height()) / 2);
}
}
} else {
if (img.width() > maxLength) {
// calculate new image dimensions
newWidth = maxLength;
newHeight = img.height() / (img.width() / maxLength);
// set new image dimensions
img.height(newHeight).width(newWidth);
}
}
},1000);
}