JobList.CSS示范脚本

admin

操作办法：
人才招聘功能菜单的栏目显示方式，选择第3项,即list=2。

参考案例(ito)：
CSS:
.JobList{ position:relative;}
.JobList .head{ height:50px; padding:0 20px; border-top-left-radius:6px; border-top-right-radius:6px; background:#2B63AC; font-size:0;}
.tr{ padding:2px 20px; clear:both; border:1px solid #f7f7f7; height:36px; border-top:0; background:#fff;}
.th{ float:left; display:block; width:25%; font-size:16px; line-height:30px; padding:5px; color:#fff;}
.td1,.td2,.td3,.td4{ float:left; display:block; width:25%; padding:9px 0;}
.JobList .foot{ height:40px; padding:0 20px; border-top:1px solid #fff; border-bottom-left-radius:6px; border-bottom-right-radius:6px; background:#eee; font-size:0;}
.JobList .td1{ cursor:pointer;}
.JobList .detail{ display:none; background:#fff; position:absolute; width:460px; left:180px; top:0; padding:20px; padding-left:37px; box-shadow:8px 0 15px 0 #f7f7f7 inset; border-top-right-radius:6px;}
.JobList .detail .close{ text-align:right; font-size:30px; color:#000; line-height:30px; cursor:pointer;}
.JobList .detail .post{ font-size:20px; color:#054780; margin-bottom:20px;}
JS:
jQuery(window).load(function(e) {
if(jQuery(".JobList").length>0){
jQuery(".JobList .tr").click(function(){jQuery("JobList .tr").css("background","#f7f7f7");jQuery(this).css("background","#eee");jQuery(".JobList .detail").css("display","none");jQuery(".JobList .detail").eq(jQuery(this).index()-1).css({"display":"block","height":jQuery(".JobList").height()-80});});
jQuery(".close").click(function(){jQuery(".JobList .detail").css("display","none");});
}
}

admin

后台注意事项，模板功能选企业招聘
人才招聘功能菜单的栏目显示方式，选择第4项，即list=3。


.JobList .JobRows *{ font-size:16px;}
.JobList .JobRows{ border-bottom:1px dashed #eee;}
.JobList .JobApply{ float:right;}
.JobList .JobDetail{ margin-bottom:20px; margin-top:8px;}