版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_29673403/article/details/78214681
上一版的链接地址：http://blog.csdn.net/sinat_29673403/article/details/53195760
为什么会出这么一个新版的原因，是因为产品需求的改变，导致分类从二级分类变换为三级分类，导致顶部导航栏的布局出现了调整。对右侧二级分类的展开添加了划入划出的效果，同时对整个导航栏的布局进行了调整。
效果图如下：
看到了大概的效果图，现在话不多说，来看看代码吧：
<div id="bg" class="hide"></div>
<div id="nav" class="overflowh">
<?php //添加筛选的参数
$choose = '';
if(isset($arr['h']))
$choose .= $arr['h'];
if(isset($arr['j']))
$choose .= $arr['j'];
if(isset($arr['t']))
$choose .= $arr['t'];
?>
<script>
$(function(){
if($('.flexsearch--input-wrapper input')[0].value.length>0){
$('.flexsearch--input-wrapper input').attr('style','font-size:1.2rem;font:normal 15px/16px 微软雅黑');
}else{
$('.flexsearch--input-wrapper input').attr('style','font-size:1.2rem;');
}
$('.flexsearch--input-wrapper input').bind('keyup',function(){
if(this.value.length > 0){
$(this).attr('style','font-size:1.2rem;font:normal 15px/16px 微软雅黑');
}else{
$(this).attr('style','font-size:1.2rem;');
}
})
$('.flexsearch--input-wrapper input')[0].onsearch=function(){
if(this.value.length > 0){
$(this).attr('style','font-size:1.2rem;font:normal 15px/16px 微软雅黑');
}else{
$(this).attr('style','font-size:1.2rem;');
}
};
});
</script>
<!-- 搜索框 -->
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="<?php echo SITE_RECEPTION_URL.$nextUrl?><?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['select'])){echo "/select/".$_GET['select'];}?>" method="get">
<div class="flexsearch--input-wrapper">
<?php if(isset($btb_catalogs)){switch(true){case $btb_catalogs == '3':?>
<input class="flexsearch--input iconfont" type="search" value="<?php if(isset($_GET['keyword']))echo $_GET['keyword'];?>" placeholder=" 请输入发布者关键字" name="keyword" style="font-size:1.2rem;"><?php break; case $btb_catalogs == '2':?>
<input class="flexsearch--input iconfont" type="search" value="<?php if(isset($_GET['keyword']))echo $_GET['keyword'];?>" placeholder=" 请输入标题关键字" name="keyword" style="font-size:1.2rem;"><?php break; case $btb_catalogs == '1':?>
<input class="flexsearch--input iconfont" type="search" value="<?php if(isset($_GET['keyword']))echo $_GET['keyword'];?>" placeholder=" 请输入商品关键字" name="keyword" style="font-size:1.2rem;"><?php break; case $btb_catalogs == '0':?>
<input class="flexsearch--input iconfont" type="search" value="<?php if(isset($_GET['keyword']))echo $_GET['keyword'];?>" placeholder=" 请输入商品关键字" name="keyword" style="font-size:1.2rem;"><?php break; default:break;?>
<?php }}?>
</div>
</form>
</div>
</div>
<!-- 筛选 -->
<div class="dorpdown" id="categorys-2014">
<div class="dtd">
<div class="dt">
<a href="javascript:void(0)">行业分类</a>
</div>
<div class="dd hide">
<div class="dd-inner">
<?php if(!isset($class) && isset($dafenlei['yiji'])){ $class = $dafenlei['yiji'];}?>
<a target="_self" href="<?php echo SITE_RECEPTION_URL.$nextUrl?><?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>" value="">
<div class="item fore0" style="color: #333!important">
<h3>全部分类</h3></div></a>
<?php foreach($class as $k=>$yiji) { if(!isset($yiji['xiaji']) || empty($yiji['xiaji'])){?>
<a href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/parameter/m<?php echo $yiji['id'].$choose;?><?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>" target="_self" value="m<?php echo $yiji['id'];?>">
<div class="item fore<?php echo $k+1;?> yiji">
<h3>
<?php echo $yiji['name'];?>
</h3></div></a>
<?php }else{?>
<div class="item fore<?php echo $k+1;?> yiji">
<h3>
<a href="javascript:void(0)" target="_self" value="m<?php echo $yiji['id'];?>"><?php echo $yiji['name'];?></a>
</h3></div>
<?php } if(isset($yiji['xiaji']) && !empty($yiji['xiaji'])){?>
<div class="subitems hide">
<ul id="accordion" class="accordion">
<li>
<a target="_self" value="m<?php echo $yiji['id'];?>" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/parameter/m<?php echo $yiji['id'].$choose;?><?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="item fore1" style="color: #333!important;border-bottom: 1px solid #ddd">
<h3>全部分类</h3></div></a></li>
<?php foreach ($yiji['xiaji'] as $kk => $erji){ ?>
<?php if(isset($erji['xiaji']) && !empty($erji['xiaji'])){?>
<li><div class="item fore1 link">
<!-- -------------------如果有三级则增加i标签,默认往下，三级显示的话增加class名up------------------------- -->
<i></i>
<h3>
<a href="javascript:void(0)" target="_blank" value="i<?php echo $erji['id'];?>"><?php echo $erji['name'];?></a>
</h3></div>
<ul class="submenu">
<li><a target="_self" value="i<?php echo $erji['id'];?>" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/parameter/m<?php echo $yiji['id'];?>i<?php echo $erji['id'].$choose;?><?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="item fore1">
<h3>全部子类</h3></div></a></li>
<?php foreach ($erji['xiaji'] as $key => $item ){?>
<li><a target="_self" style="color: #333!important;" value="s<?php echo $item['id'];?>" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/parameter/m<?php echo $yiji['id'];?>i<?php echo $erji['id'];?>s<?php echo $item['id'].$choose;?><?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="item fore1">
<h3><?php echo $item['name'];?></h3></div></a></li>
<?php }?>
</ul></li>
<?php }else{?>
<li><a target="_self" style="color: #333!important;" value="i<?php echo $erji['id'];?>" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/parameter/m<?php echo $yiji['id'];?>i<?php echo $erji['id'].$choose;?><?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="item fore1 link">
<h3><?php echo $erji['name'];?></h3></div></a></li>
<?php }}?>
</ul>
</div>
<?php }}?>
</div>
</div>
</div>
<!-- 排序 -->
<div id="right">
<div class="dtr">
<?php if(isset($btb_catalogs) && $btb_catalogs == 3){?>
<div class="drt">
<a href="javascript:void(0)">认证情况</a>
</div>
<div class="drd">
<a target="_self" value="s0" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/select/s0<?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="drw">
<h3>
全部</h3>
</div></a>
<a target="_self" value="s1" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/select/s1<?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="drw">
<h3>
个人</h3>
</div></a>
<a target="_self" value="s2" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/select/s2<?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="drw">
<h3>
组织</h3>
</div></a>
</div>
<?php }else{?>
<div class="drt">
<a href="javascript:void(0)">默认排序</a>
</div>
<div class="drd hide">
<a target="_self" value="s0" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/select/s0<?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="drw">
<h3>
默认排序</h3>
</div></a>
<a target="_self" value="s1" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/select/s1<?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="drw">
<h3>
发布时间最近</h3>
</div></a>
<a target="_self" value="s2" href="<?php echo SITE_RECEPTION_URL.$nextUrl?>/select/s2<?php if(isset($_GET['parameter'])){echo "/parameter/".$_GET['parameter'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>">
<div class="drw">
<h3>
价格最高</h3>
</div></a>
</div>
<?php }?>
</div>
</div>
<?php if(isset($class) && $btb_catalogs == 2){?>
<div id="screen">
<a href="javascript:void(0)">筛选</a>
</div>
<!-- 下拉的条件筛选部分 -->
<div class="screen_content" id="screen_content">
<div class="demand_state">
<p>状态</p>
<div class="demand_state_list flex-box">
<div class="percent_25 flex1"><a href="javascript:void(0)" value="">全部</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="h1">众筹中</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="h2">进行中</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="h3">已完成</a></div>
</div>
</div>
<div class="demand_state">
<p>金额</p>
<div class="demand_state_list flex-box" style="margin-bottom:15px;">
<div class="percent_25 flex1"><a href="javascript:void(0)" value="">全部</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="j1">5000以下</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="j2">5k-10k</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="j3">10k-50k</a></div>
</div>
<div class="demand_state_list flex-box">
<div class="percent_25 flex1"><a href="javascript:void(0)" value="j4">50k以上</a></div>
<div class="percent_25 flex1"></div>
<div class="percent_25 flex1"></div>
<div class="percent_25 flex1"></div>
</div>
</div>
<div class="demand_state">
<p>发布日期</p>
<div class="demand_state_list flex-box" style="margin-bottom:21px;">
<div class="percent_25 flex1"><a href="javascript:void(0)" value="">全部</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="t<?php echo strtotime( date('Y-m-d',time()));?>">今日发布</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="t<?php echo strtotime( date('Y-m-d',time())) - 172800;?>">三天内</a></div>
<div class="percent_25 flex1"><a href="javascript:void(0)" value="t<?php echo strtotime( date('Y-m-d',time())) - 518400;?>">一周内</a></div>
</div>
</div>
<div class="screen_btn_list">
<div class="screen_left" style="text-align:right;"><a href="javascript:void(0)" id="reset" style="margin-right:6px;">重置</a></div>
<div class="screen_right" style="text-align:left;"><a href="javascript:void(0)" id="ensure" style="margin-left:6px;">确定</a></div>
</div>
</div>
<?php }?>
</div>
</div>
<script>
function getTopNavHeight(){
if($('#web_common_header').length==0){
return $("#nav").height();
}
return $("#nav").height()+$('#web_common_header').height();
}
$(function() {
$(".container").height(document.body.clientHeight-getTopNavHeight());//让页面内容完全显示，而不会因为固定导航栏的原因内容被挤到屏幕之外
$(".screen_content").height(document.body.clientHeight-getTopNavHeight());//让筛选的高度占满
keepPar();
$('#bg').bind("touchmove",function(e){
e.preventDefault(); //禁止遮罩层滚动。
});
$('#nav').bind("touchmove",function(e){
e.preventDefault(); //禁止导航滚动。
});
$('.dd').bind('touchmove',function(e){e.stopPropagation(); });//禁止滚动事件冒泡到父类，使得自己可以滚动，父类禁止滚动
//wrapper.refresh();
$(".dtd").hover(function(){//一级导航
$("#screen_content").hide();
if($("#nav").is(".overflowh")){
$("#nav").removeClass("overflowh");
}
if($(".dd").is(".hide")){
if($(".dd").height() > $(".container").height()){
$(".dd").height($(".container").height());
}
$(".dd").removeClass("hide");
}
if(!$(".drd").is(".hide")){
$(".drd").addClass("hide");
}
if($("#bg").is(".hide")){
$("#bg").removeClass("hide");
$('html,body').animate({scrollTop: '0px'}, 100);//因为页面很长，有纵向滚动条，先让页面滚动到最顶端，然后禁止滑动事件，这样可以使遮罩层锁住整个屏幕
}
},function(){
if(!$(".dd").is(".hide")){
$(".dd").addClass("hide");
}
});
$(".yiji").hover(function(){//二级导航
if($(this).next(".subitems").is(".hide")){
if( $(this).next('.subitems').height() > $(".container").height()){
$(this).next('.subitems').height($(".container").height());
}
$(this).next(".subitems").removeClass("hide");
$(this).addClass("hover").siblings(".yiji").removeClass("hover");
$(".dd-inner").find(".subitems").not($(this).next(".subitems")).addClass("hide");
}
});
$(".link").click(function(){//三级导航
$this = $(this);
$next = $this.next(".submenu");
if(!$this.parent().is(".open")){
$next.slideToggle('normal', function(){
console.log($(".container").height());
$this.parents('.subitems').css('height','auto');
if($this.parents('.subitems').height() > $(".container").height()){
$this.parents('.subitems').height($(".container").height());
}
console.log($this.parents('.subitems').height());
});
$this.parent().toggleClass('open');
$("#accordion").find('.submenu').not($next).slideUp().parent().removeClass('open');
}else{
$this.parents('.subitems').css('height','auto');
$next.slideUp('normal',function(){
if($this.parents('.subitems').height() > $(".container").height()){
$this.parents('.subitems').height($(".container").height());
}
}).parent().removeClass('open');
}
});
$(".dtr").hover(function(){//排序导航
$("#screen_content").hide();
if($("#nav").is(".overflowh")){
$("#nav").removeClass("overflowh");
}
if(!$(".dd").is(".hide")){
$(".dd").addClass("hide");
}
if($(".drd").is(".hide")){
if($(".drd").height() > $(".container").height()){
$(".drd").height($(".container").height());
}
$(".drd").removeClass("hide");
}
if($("#bg").is(".hide")){
$("#bg").removeClass("hide");
$('html,body').animate({scrollTop: '0px'}, 100);//因为页面很长，有纵向滚动条，先让页面滚动到最顶端，然后禁止滑动事件，这样可以使遮罩层锁住整个屏幕
}
},function(){
if($(".drd").is(".hide")){
$(".drd").addClass("hide");
}
});
$("#bg").click(function(){
if(!$(".dd").is(".hide")){
$(".dd").addClass("hide");
}
if(!$(".drd").is(".hide")){
$(".drd").addClass("hide");
}
$(".subitems").each(function(){
if(!$(this).is(".hide")){
$(this).addClass("hide");
}
});
if(!$("#nav").is(".overflowh")){
$("#nav").addClass("overflowh");
}
$("#bg").addClass("hide");
$('.container').css('pointer-events', 'none');
setTimeout(function(){
$('.container').css('pointer-events', 'auto');
}, 400);//防止底层元素点击穿透事件
});
// 控制筛选条件的js部分
$("#screen").hover(function(){
if($("#nav").is(".overflowh")){
$("#nav").removeClass("overflowh");
}
$(".dd").addClass("hide");
$(".drd").addClass("hide");
$("#bg").addClass("hide");
$("#screen_content").show();
});
//点击重置按钮时间
$("#reset").click(function(){
$(".demand_state").each(function(){
$(this).find("a").removeClass("active");
})
})
//点击a选中
$(".demand_state a").each(function(){
$(this).click(function(){
$(this).closest('.demand_state').find("a").removeClass('active');
$(this).addClass('active');
})
})
//筛选滚动
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
//event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
//event.preventDefault();
},false);
}
}
touchScroll("screen_content");
//点击确定按钮
$("#ensure").click(function(){
var arr = [];
var param = "";
$(".demand_state a").each(function(){
if($(this).hasClass('active')){
arr.push($(this));
param += $(this).attr("value");
}
})
if(arr.length == 0){
$("#screen_content").hide();
}else{
<?php //添加分类筛选的参数
$param = '';
if(isset($arr['m'])){
$param .= $arr['m'];
}if(isset($arr['i'])){
$param .= $arr['i'];
}if(isset($arr['s'])){
$param .= $arr['s'];
}
?>
var url = "<?php echo SITE_RECEPTION_URL.$nextUrl."/parameter/"?><?php echo $param;?>" + param + "<?php if(isset($_GET['select'])){echo "/select/".$_GET['select'];}if(isset($_GET['keyword'])){echo "/keyword/".$_GET['keyword'];}?>";
window.location.href=url;
}
})
window.onresize = function(){
resizeS();
}
function keepPar(){//页面刷新后将参数信息显示在页面上
var fl = "";
var tj = "";
<?php if(isset($arr["m"])) {if($arr["m"] == 'm66'){?>
$(".item").parent("a[value=<?php echo $arr["m"]?>]").find("div").addClass("supabackimg");
$(".item").parent("a[value=<?php echo $arr["m"]?>]").addClass("abackimg");
$(".item").parent("a[value=<?php echo $arr["m"]?>]").siblings().removeClass("supabackimg");
fl += $(".item").parent("a[value=<?php echo $arr["m"]?>]").find("h3").html();
<?php }else{?>
$(".item a[value=<?php echo $arr["m"]?>]").closest("div").addClass("supabackimg");
$(".item a[value=<?php echo $arr["m"]?>]").addClass("abackimg");
$(".item a[value=<?php echo $arr["m"]?>]").siblings().removeClass("supabackimg");
fl += $(".item a[value=<?php echo $arr["m"]?>]").html();
<?php }}if(!isset($arr["i"]) && isset($arr["m"])) {?>
$(".subitems a[value=<?php echo $arr["m"]?>]").find("div").addClass("abackimg");
$(".subitems a[value=<?php echo $arr["m"]?>]").find("div").siblings().removeClass("abackimg");
<?php }else if(isset($arr["i"])){?>
$(".subitems a[value=<?php echo $arr["i"]?>][href='javascript:void(0)']").addClass("abackimg");
<?php if(!isset($arr['s'])){?>
$(".subitems a[value=<?php echo $arr["i"]?>]").find("div").addClass("abackimg");
<?php }?>
$(".subitems a[value=<?php echo $arr["i"]?>]").find("div").siblings().removeClass("abackimg");
fl += "/" + "<?php echo $dafenlei['catalog']->queryCatalogName(substr($arr['i'],1))?>";
<?php } if(isset($arr["s"])){?>
$(".submenu a[value=<?php echo $arr["s"]?>]").find("div").addClass("abackimg");
$(".submenu a[value=<?php echo $arr["s"]?>]").find("div").siblings().removeClass("abackimg");
fl += "/" + $(".submenu a[value=<?php echo $arr["s"]?>]").find("h3").html().replace(/\s+/g,"");
<?php }if(isset($arr["j"])){?>
$(".demand_state a[value=<?php echo $arr["j"]?>]").addClass("active");
$(".demand_state a[value=<?php echo $arr["j"]?>]").siblings().removeClass("active");
<?php }if(isset($arr["h"])){?>
$(".demand_state a[value=<?php echo $arr["h"]?>]").addClass("active");
$(".demand_state a[value=<?php echo $arr["h"]?>]").siblings().removeClass("active");
<?php }if(isset($arr["t"])){?>
$(".demand_state a[value=<?php echo $arr["t"]?>]").addClass("active");
$(".demand_state a[value=<?php echo $arr["t"]?>]").siblings().removeClass("active");
<?php }?>
if(fl != ""){
$(".dt a").html(fl);
}
<?php if(isset($sel["s"])) {?>
$(".drd a[value=<?php echo $sel["s"]?>]").addClass("abackimg");
$(".drd a[value=<?php echo $sel["s"]?>]").siblings().removeClass("abackimg");
tj += $(".drd a[value=<?php echo $sel["s"]?>]").find("h3").html();
<?php }?>
if(tj != ""){
$(".drt a").html(tj);
}
}
});
//手机横屏调整(横屏)
function resizeH(){
$(".container").height(document.body.clientHeight-getTopNavHeight());//让页面内容完全显示，而不会因为固定导航栏的原因内容被挤到屏幕之外
if(!$(".dd").is(".hide")){
if($(".dd").height() > $(".container").height()){
$(".dd").height($(".container").height());
}
}
$(".subitems").each( function(){if(!$(this).is(".hide")){
if($(this).height() > $(".container").height()){
$(this).height($(".container").height());
}
}
});
if(!$(".drd").is(".hide")){
if($(".drd").height() > $(".container").height()){
$(".drd").height($(".container").height());
}
}
}
//手机横屏调整(竖屏)
function resizeS(){
$(".container").height(document.body.clientHeight-getTopNavHeight());//让页面内容完全显示，而不会因为固定导航栏的原因内容被挤到屏幕之外
$(".screen_content").height(document.body.clientHeight-getTopNavHeight());
if(!$(".dd").is(".hide")){
$(".dd").css("height","auto");
if($(".dd").height() > $(".container").height()){
$(".dd").height($(".container").height());
}
}
$(".subitems").each( function(){if(!$(this).is(".hide")){
$(this).css("height","auto");
if($(this).height() > $(".container").height()){
$(this).height($(".container").height());
}
}
});
if(!$(".drd").is(".hide")){
$(".drd").css("height","auto");
if($(".drd").height() > $(".container").height()){
$(".drd").height($(".container").height());
}
}
}
</script>以上就是页面全部的代码，我相信也不需要过多的说明了吧。现在就来看看页面样式代码吧：
@charset "utf-8";
#categorys-2014 {
height: 44px;
position: relative;
width: 100%;
float:left;
border-bottom: 1px solid #ddd;
-webkit-overflow-scrolling:auto;
}
#categorys-2014 .dt a {
color: #999;
display: inline-block;
font: 400 15px/44px "microsoft yahei";
height: 44px;
text-decoration: none;
background-attachment: scroll;
background-color: #fefafa;
background-image: none;
background-repeat: repeat;
background-position: 0 0;
border-right: 0.5px solid #ddd;
width:100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
#categorys-2014 .dtd {
width:33.33333333333333333333333333333%;
float:left;
}
#categorys-2014 .dd {
background-attachment: scroll;
background-color: #f1f1f1;
background-image: none;
background-repeat: repeat;
background-position: 0 0;
overflow: auto;
}
#categorys-2014 .dd-inner .item {
color: #666;
height: 43px;
position: relative;
text-indent:10px;
margin: 0;
padding: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#categorys-2014 .dd-inner .item a {
color: #666;
}
#categorys-2014 .dd-inner h3 {
font-family: "microsoft yahei";
font-size: 14px;
font-weight: 400;
height: 43px;
text-indent:10px;
line-height: 51px;
position: absolute;
margin: 0;
padding: 0;
}
#categorys-2014 .dd-inner i{
display: block;
width:12px;
height:6.7px;
background: url(../wximg/boult2down.png) no-repeat center;
position: absolute;
right:10px;
top:50%;
background-size: 100% 100%;
}
#categorys-2014 .dd-inner .accordion li.open .link i{
background: url(../wximg/boult2up.png) no-repeat center;
background-size: 100% 100%;
}
#categorys-2014 .dd-inner .hover {
/*background: #f1f1f1 none repeat scroll 0 0;*/
background-color: #fefafa;
}
#categorys-2014 .yiji .hover{
background: #fefafa;
}
#nav{
width:100%;
margin:0px auto;
top:0px;
left:0px;
position:relative;
z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:center;
background-color: #f1f1f1;
color:#333;
}
#right{
height: 44px;
overflow: visible;
position: relative;
width: 33.333333333333333333333333%;
float:left;
}
#right .drt a{
color: #999;
display: inline-block;
font: 400 15px/44px "microsoft yahei";
height: 100%;
text-decoration: none;
background-attachment: scroll;
background-color: #fefafa;
background-image: none;
background-repeat: repeat;
background-position: 0 0;
border-left: 0.5px solid #ddd;
border-right: 0.5px solid #ddd;
width:100%;
}
#right .drd{
background-attachment: scroll;
background-color: #f1f1f1;
background-image: none;
background-repeat: repeat;
background-position: 0 0;
}
#right .drd .drw {
color: #999;
height: 43px;
position: relative;
text-indent:10px;
margin: 0;
padding: 0;
}
#right .drd .drw a {
color: #999;
}
#right .drd .drw h3 {
font-family: "microsoft yahei";
font-size: 14px;
font-weight: 400;
height: 51px;
text-indent:10px;
line-height: 51px;
position: absolute;
margin: 0;
padding: 0;
}
.flexsearch--wrapper {
height: auto;
width: auto;
max-width: 100%;
overflow: hidden;
background: transparent;
margin: 0;
position: static;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--input-wrapper {
padding: 10px 28px 10px 13px; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
/***********************
右侧筛选
************************/
#screen{
height: 44px;
width: 33.333333333333333333333333%;
float:left;
}
#screen a{
color: #999;
display: inline-block;
font: 400 15px/44px "microsoft yahei";
height: 100%;
text-decoration: none;
background-attachment: scroll;
background-color: #fefafa;
background-image: none;
background-repeat: repeat;
background-position: 0 0;
border-left: 0.5px solid #ddd;
width: 100%;
}
.screen_content{
width:100%;
position: absolute;
top:44px;
left:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #f1f1f1;
font-family: 'PingFangSC Light';
overflow: auto;
display: none;
}
.screen_content .demand_state p{
padding:12px 0;
font-size:1.33rem;
color:#666;
text-align: left;
font: 400 15px "PingFangSC Light";
text-indent: 12px;
}
.screen_content .demand_state .demand_state_list{
padding:0 6px;
}
.screen_content .demand_state .demand_state_list a{
display: inline-block;
width:80%;
height:30px;
background-color: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-align: center;
line-height: 30px;
text-decoration: none;
color:#999999;
font-size:12px;
margin:0 auto;
}
.screen_content .demand_state .demand_state_list .active{
background-color:#fbcd2e;
color:#333333;
}
.screen_content .screen_btn_list{
width:100%;
height:auto;
margin:12px 0;
}
.screen_content .screen_btn_list .screen_left,.screen_right{
width:50%;
float:left;
}
.screen_content .screen_btn_list a{
display: inline-block;
width:120px;
height:45px;
font: 400 16px "PingFangSC Light";
color:#333333;
text-decoration: none;
text-align: center;
line-height: 45px;
background-color: #fbcd2e;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.screen_content .screen_btn_list .screen_left a{
background-color: #dddddd;
}
/***********************
* Configurable Styles *
***********************/
.flexsearch {
/*padding: 0 25px 0 200px; Padding for other horizontal elements */
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-color: #bcbcbc;
border-radius: 35px; /* (height/2) + border-width */
border-style: solid;
border-width: 1px;
margin: auto;
color: #333;
font: normal 15px/16px "microsoft yahei";
-webkit-appearance: none;
-moz-appearance: none;
padding-top:10px;
padding-bottom: 9px;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
::-webkit-input-placeholder {
color: #888;
}
input:-moz-placeholder {
color: #888
}
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1477547042_4651453.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1477547042_4651453.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1477547042_4651453.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1477547042_4651453.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1477547042_4651453.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:15px
}
.abackimg{
color:#fac611!important;
}
.abackimg h3{
color:#fac611!important;
}
.supabackimg{
background-color: #fefafa;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
.select{
color:#333!important;
}
#bg{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #333;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.hide{
display: none;
}
.subitems{
position:absolute;
right:0px;
width:66.666666666666666666666666666%;
top:44px;
background-color: #fefafa;
border-top: 1px solid #f1f1f1;
overflow:auto;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
position: relative;
border-bottom: 1px solid #ddd;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li.open .link {
color: #fac611;
}
.submenu {
display:none;
background: #fefafa;
font-size: 14px;
}
.submenu li {
border-bottom:1px solid #ddd;
}
.submenu a {
color:#999;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#categorys-2014 .dd-inner .submenu h3{
padding-left:12px;
color:#999999;
}
.overflowh{
overflow: hidden;
}
::-webkit-input-placeholder { /* WebKit browsers */
color:#979797;
opacity:.7;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#979797;
opacity:.7;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#979797;
opacity:.7;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#979797;
opacity:.7;
}以上就是修订版之后的移动web顶部导航的全部代码。
下面，对于上拉刷新的代码进行了插件换用，缩短了加载的延迟时间，在此进行说明，换用的插件名称为dropload.js。关于插件的简述及简单实用可参考大大的文章：http://www.cnblogs.com/ccblogs/p/5257997.html（在此对大大表示感谢。）但不再赘述，关于具体的下拉刷新可以参见之前的文章，有问题欢迎大家来提问。下面还是简单粗暴的上代码吧：
<link rel="stylesheet" href="<?php echo WX_CSS_URL;?>dropload.css">
<script src="<?php echo WX_JS_URL;?>dropload.min.js"></script>//引用插件
//插件使用的javascript代码（内容部分在之前已经写过了，并没有多余的变化，所以在此不再赘述）
<script>
var i = 2;
$('#wrapper').dropload({
scrollArea : window,
loadDownFn : function(me){
$.ajax({
type: 'GET',
url:"<?php echo SITE_RECEPTION_URL?><?php echo $this->viewBase;?>LeaderTask/index?type=1<?php if(isset($_GET['parameter'])){echo "¶meter=".$_GET['parameter'];}if(isset($_GET['select'])){echo "&select=".$_GET['select'];}if(isset($_GET['keyword'])){echo "&keyword=".$_GET['keyword'];}?>",
data:{page:i},
dataType: 'json',
success: function(data){
var el, li, i;
el =document.querySelector("#wrapper ul");
var leaderTask_infos = data;
if(data.length > 0){
$.each(leaderTask_infos, function(index,leaderTask_info){
li = document.createElement('li');
var baojia;
var time = '';
var biaozhi = '';
if(leaderTask_info['maxprice']==0){
if(leaderTask_info['budget']==0){
baojia="报价";}
else{ baojia="￥"+leaderTask_info['budget'];}
}else{ baojia="￥"+leaderTask_info['budget']+"-"+leaderTask_info['maxprice'];}
if(leaderTask_info['home_recommended'] & 1){
biaozhi += '<em class="icon_emergencywx"></em>';
}
if(leaderTask_info['new']){
biaozhi += '<em class="icon_newwx"></em>';
}
if(leaderTask_info['finish'] == 1){
time = '已完成';
}else{
time = leaderTask_info['timestr'];//"<?php $c = "<script>document.write(leaderTask_info['end_time']);</script>"; echo formatTime($c); ?>";
}
li.innerHTML="<a href='<?php echo SITE_RECEPTION_URL;?><?php echo $this->viewBase;?>LeaderTask/see?leaderTaskId="+leaderTask_info['id']+"'>"+
"<section class='box'>"+
"<div class='left'>"+
"<h4>"+ biaozhi + leaderTask_info['title']+"</h4>"+
"<p><span class='time'></span><em>"+time+"</em></p><p><span class='bid'></span><em>"+leaderTask_info['tbgs']+"</em>位支持</p>"+
"</div>"+
"<div class='right' style=\"width:auto;\"><p>"+baojia+"</p></div>"+
"</section>"+"</a>"
el.appendChild(li, el.childNodes[2]);
});
}else{
$("#mess").remove();
$(".pullUp").hide();
var html='';
html='<li id="mess" style="width: 100%;height: 40px;text-align: center;font-size: 12px;color: #888;z-index: 1;line-height: 40px;"><p>没有更多了...</p></li>';
// $("#mess").show();
$("#parent").append(html);
$('.dropload-down').hide();
me.lock();
me.noData();
}
// 每次数据加载完，必须重置
me.resetload();
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
i++;
}
});
</script>到此，就是本文的全部内容。最后附上转载来的大大的文章，供大家参考（链接地址已在上面，要看原文的可点击上面的链接进行跳转）：
移动端翻页插件dropload.js（支持Zepto和jQuery）
一. 声明
代码来源：github上的dropload项目。
二. 问题
dropload.js提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。
但是，需求往往不是服务端一次性返回所有数据，往往还要支持服务端分页，搜索，排序，多条件筛选等功能。（比较类似美团美食的界面）
三. 解决方案。
改进1：由于有分页，搜索，排序，多条件筛选功能，可能都不需要上拉，进到页面就没有数据。
例如：搜索一个服务端不存在的名字。
所以，添加接口设置setHasData。
MyDropLoad.prototype.setHasData = function(ishasData) {
var me = this;
if (ishasData) {
me.isData = true;
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
} else {
me.isData = false;
me.$domDown.html(me.opts.domDown.domNoData);
fnRecoverContentHeight(me);
}
};
改进2：由以上问题还引发了一个bug，选择不同的筛选条件，然后上拉加载更多，此时没有反应了。
原因较复杂，举例说明：选择不同的筛选条件，数据量不一样，如果不执行resetload，那么页面的的上拉计算距离就存在问题。
1. 只要发API到服务端，无论返回成功失败，都必须执行resetload，成功时需要在加载完全部新增的数据后resetload。
2. 更改resetload如下，添加调用计算屏幕尺寸的方法。
MyDropLoad.prototype.resetload = function() {
var me = this;
if (me.direction == 'down' && me.upInsertDOM) {
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd mozTransitionEnd transitionend', function() {
me.loading = false;
me.upInsertDOM = false;
$(this).remove();
fnRecoverContentHeight(me);
});
} else if (me.direction == 'up') {
me.loading = false;
if (me.isData) {
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
} else {
me.$domDown.html(me.opts.domDown.domNoData);
}
}
}
3. 解决以上两个问题，基本解决了90%的问题，还有一个是setHasData(false)之后的处理。（假设每页的count时20条）
bug: 在筛序条件1：返回20条数据，上拉加载更多返回10条数据，此时设置setHasData(false)。选择筛选条件2，返回20条数据，上拉加载，你会惊奇的发现拉不动了。
why: setHasData(false)之后状态还停留在没有更多数据的状态。此时应该锁定了上拉加载，更改筛选条件后，没有解除锁定，所以不能上拉加载了。
解决方法：每次更改搜索条件，筛选条件，排序等时，都需要设置setHasData(true)。
四. 调用方法
整体页面逻辑较复杂。这里在整体解释一遍。
1. 选择要上拉加载的DIV，添加调用方法。
注意事项：
（1）记得保存返回对象。
（2）LoadDownFn时上拉加载后的回调，这里自己要处理的逻辑。我这里时翻页发API，API参数中offset加20，然后发API。
（3）无论API返回失败成功，都必须resetload。
这里强调：
fetchData函数调用发API，失败或者成功都必须self.moreFund.resetload()。
并且失败时直接调用self.moreFund.resetload()即可。成功时要在新的数据返回后，要先用JS动态加载HTML，加载完成后在执行
self.moreFund.resetload()。self.moreFund = $('#table-fundlist').dropload({
scrollArea: window,
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh"><img class="drop-up-icon" src="images/dropload_up.png"><span>上拉加载更多</span></div>',
domLoad: '<div class="dropload-load"><img class="loading-icon" src="images/droploading.gif"></div>',
domNoData: ''
},
loadDownFn: function() {
self.apiParams.offset += 20;
self.fetchData(true);
}
});
2. setHasData详解
（1）什么时候需要设置true。
当非翻页API触发之前。即选择新的筛选条件，选择新的搜索字段，选择新的排序字段。这个时候必须setHasData(true)。
this.moreFund.setHasData(true);（2）什么时候设置false。
服务端返回数据后，比较服务端返回的条目数与API发送的条目数是否一致，不一致设置setHasData(false)。
if (data.length < this.apiParams.count){
this.moreFund.setHasData(false);
this.moreFund.lock();
}3. lock与unlock详解
（1）设么时候设置lock。
服务端返回数据后，比较服务端返回的条目数与API发送的条目数是否一致，不一致设置lock()。
当前页面状态不需要上拉加载时需要设置lock()。例如：在搜索框输入的状态。
（2）什么时候设置unlock。
只有一个地方需要调用。发送API之前设置unlock。
if (self.moreFund) {
self.moreFund.unlock();
};五. JS和CSS源代码
(function($) {
'use strict';
var win = window;
var doc = document;
var $win = $(win);
var $doc = $(doc);
$.fn.dropload = function(options) {
return new MyDropLoad(this, options);
};
var MyDropLoad = function(element, options) {
var me = this;
me.$element = $(element);
me.upInsertDOM = false;
me.loading = false;
me.isLockUp = false;
me.isLockDown = false;
me.isData = true;
me._scrollTop = 0;
me.init(options);
};
MyDropLoad.prototype.init = function(options) {
var me = this;
me.opts = $.extend({}, { scrollArea: me.$element, domUp: { domClass: 'dropload-up', domRefresh: '<div class="dropload-refresh"><img class="drop-down-icon" src="../images/dropload_down.png"><span>下拉刷新</span></div>', domUpdate: '<div class="dropload-update"><img class="drop-up-icon" src="../images/dropload_up.png"><span>释放更新</span></div>', domLoad: '<div class="dropload-load"><img class="loading-icon" src="../images/droploading.gif"></div>' }, domDown: { domClass: 'dropload-down', domRefresh: '<div class="dropload-refresh"><img class="drop-up-icon" src="../images/dropload_up.png"><span>上拉加载更多</span></div>', domLoad: '<div class="dropload-load"><img class="loading-icon" src="../images/droploading.gif"></div>', domNoData: '' //domNoData : '<div class="dropload-noData"><span>暂无数据</span></div>' }, distance: 50, // 拉动距离 threshold: '', // 提前加载距离 loadUpFn: '', // 上方function loadDownFn: '' // 下方function }, options);
if (me.opts.loadDownFn != '') {
me.$element.append('<div class="' + me.opts.domDown.domClass + '">' + me.opts.domDown.domRefresh + '</div>');
me.$domDown = $('.' + me.opts.domDown.domClass);
}
if (me.opts.scrollArea == win) {
me.$scrollArea = $win;
me._scrollContentHeight = $doc.height();
me._scrollWindowHeight = doc.documentElement.clientHeight;
} else {
me.$scrollArea = me.opts.scrollArea;
me._scrollContentHeight = me.$element[0].scrollHeight;
me._scrollWindowHeight = me.$element.height();
}
$win.on('resize', function() { if (me.opts.scrollArea == win) { me._scrollWindowHeight = win.innerHeight; } else { me._scrollWindowHeight = me.$element.height(); } });
me.$element.on('touchstart', function(e) { if (!me.loading) { fnTouches(e); fnTouchstart(e, me); } });
me.$element.on('touchmove', function(e) { if (!me.loading) { fnTouches(e, me); fnTouchmove(e, me); } });
me.$element.on('touchend', function() { if (!me.loading) { fnTouchend(me); } });
me.$scrollArea.on('scroll', function() { me._scrollTop = me.$scrollArea.scrollTop(); fnRecoverContentHeight(me) if (me.opts.threshold === '') { me._threshold = Math.floor(me.$domDown.height() * 1 / 3); } else { me._threshold = me.opts.threshold; } if (me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && me._threshold != 0 && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)) { fnLoadDown(); } });
function fnLoadDown() {
me.direction = 'up';
me.$domDown.html(me.opts.domDown.domLoad);
me.loading = true;
me.opts.loadDownFn(me);
}
};
function fnTouches(e) {
if (!e.touches) {
e.touches = e.originalEvent.touches;
}
}
function fnTouchstart(e, me) {
me._startY = e.touches[0].pageY;
me.touchScrollTop = me.$scrollArea.scrollTop();
}
function fnTouchmove(e, me) {
me._curY = e.touches[0].pageY;
me._moveY = me._curY - me._startY;
if (me._moveY > 0) {
me.direction = 'down';
} else if (me._moveY < 0) {
me.direction = 'up';
}
var _absMoveY = Math.abs(me._moveY);
if (me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp) {
e.preventDefault();
me.$domUp = $('.' + me.opts.domUp.domClass);
if (!me.upInsertDOM) { me.$element.prepend('<div class="' + me.opts.domUp.domClass + '"></div>'); me.upInsertDOM = true; }
fnTransition(me.$domUp, 0);
if (_absMoveY <= me.opts.distance) { me._offsetY = _absMoveY; me.$domUp.html(me.opts.domUp.domRefresh); } else if (_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance * 2) { me._offsetY = me.opts.distance + (_absMoveY - me.opts.distance) * 0.5; me.$domUp.html(me.opts.domUp.domUpdate); } else { me._offsetY = me.opts.distance + me.opts.distance * 0.5 + (_absMoveY - me.opts.distance * 2) * 0.2; }
me.$domUp.css({ 'height': me._offsetY });
}
}
// touchend
function fnTouchend(me) {
var _absMoveY = Math.abs(me._moveY);
if (me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp) {
fnTransition(me.$domUp, 300);
if (_absMoveY > me.opts.distance) { me.$domUp.css({ 'height': me.$domUp.children().height() }); me.$domUp.html(me.opts.domUp.domLoad); me.loading = true; me.opts.loadUpFn(me); } else { me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd transitionend', function() { me.upInsertDOM = false; $(this).remove(); }); }
me._moveY = 0;
}
}
// 重新获取文档高度
function fnRecoverContentHeight(me) {
if (me.opts.scrollArea == win) {
me._scrollContentHeight = $doc.height();
} else {
me._scrollContentHeight = me.$element[0].scrollHeight;
}
}
MyDropLoad.prototype.lock = function(direction) {
var me = this;
if (direction === undefined) {
if (me.direction == 'up') { me.isLockDown = true; } else if (me.direction == 'down') { me.isLockUp = true; } else { me.isLockUp = true; me.isLockDown = true; }
} else if (direction == 'up') {
me.isLockUp = true;
} else if (direction == 'down') {
me.isLockDown = true;
}
};
MyDropLoad.prototype.unlock = function() {
var me = this;
me.isLockUp = false;
me.isLockDown = false;
};
MyDropLoad.prototype.setHasData = function(ishasData) {
var me = this;
if (ishasData) {
me.isData = true;
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
} else {
me.isData = false;
me.$domDown.html(me.opts.domDown.domNoData);
fnRecoverContentHeight(me);
}
};
MyDropLoad.prototype.resetload = function() {
var me = this;
if (me.direction == 'down' && me.upInsertDOM) {
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd mozTransitionEnd transitionend', function() { me.loading = false; me.upInsertDOM = false; $(this).remove(); fnRecoverContentHeight(me); });
} else if (me.direction == 'up') {
me.loading = false;
if (me.isData) { me.$domDown.html(me.opts.domDown.domRefresh); fnRecoverContentHeight(me); } else { me.$domDown.html(me.opts.domDown.domNoData); }
}
};
function fnTransition(dom, num) {
dom.css({ '-webkit-transition': 'all ' + num + 'ms', 'transition': 'all ' + num + 'ms' });
}
})(window.Zepto || window.jQuery);
.dropload-up,
.dropload-down {
background-color: #F0EFF5;
position: relative;
height: 0;
overflow: hidden;
}
.dropload-down {
height: 50px;
border-top: 1px solid #e5e5e5;
}
.dropload-refresh .drop-up-icon,
.dropload-refresh .drop-down-icon,
.dropload-update .drop-up-icon,
.dropload-update .drop-down-icon {
vertical-align: text-bottom;
margin-right: 3px;
height: 16px;
width: 12px;
}
.dropload-load .loading-icon {
vertical-align: middle;
height: 20px;
width: 20px;
}
.dropload-refresh span,
.dropload-update span {
vertical-align: middle;
line-height: 18px;
font-size: 16px;
color: #585858;
}
.dropload-noData {
border-bottom: 1px solid #e5e5e5;
background-color: #FFFFFF;
}
.dropload-noData span {
line-height: 18px;
font-size: 14px;
color: #999999;
}
.dropload-refresh,
.dropload-update,
.dropload-load,
.dropload-noData {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
line-height: 50px;
text-align: center;
}
.dropload-down .dropload-refresh,
.dropload-down .dropload-update,
.dropload-down .dropload-load {
top: 0;
bottom: auto;
}