移动web顶部导航修订版（续上版）
来源：互联网 发布：think in java pdf中文 编辑：程序博客网 时间：2024/06/02 03:05
上一版的链接地址：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;}阅读全文
0 0
- 移动web顶部导航修订版（续上版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- Web Desktop App（修订版）
- 顶部导航
- 横向导航/顶部导航
- 返回顶部，到达顶部消失（移动端）
- 主成分分析PCA
- flat型网络
- MySQL主从复制配置
- 配置Jekins时，由于Jekins上gradle版本较低，而将本地项目的gradle版本由26.0.0变成24.2.0的相关配置
- Spring基础-2-IOC注解
- 移动web顶部导航修订版（续上版）
- LeetCode 39,40,46,47,78,90 回溯法专题
- C++结构体中的位域
- Spark内核源码深度剖析：SparkContext原理剖析与源码分析
- hdu1074 Doing Homework 【状压dp】
- gcc编译选项
- jacob word转html 图片显示失败解决方案
- iOS 限制输入框的字符长度
- MySQL的btree索引和hash索引的区别
