/**
  jQuery version: 1.8.3
   Author: 小dee
   Date: 2014.11.8
*/

接上一篇博客。

实现带缓存的仿亚马逊下拉面板

效果图:

图1 初始

图2 点击省份

图3 选择省份

图4 如果有第四级菜单

说明:该功能模块是固定前三极菜单,第四级菜单如果存在则动态加载 (  不足:没有做到所有菜单完全动态加载 )。

图5

细节流程:

① 点击固定菜单时发生的动作:

  ■ 如果存在下拉面板,则下拉面板消失

■ 如果不存在下拉面板,则查看是否有缓存的下级菜单数据

  ■ 如果没有缓存数据,则通过 ajax 获取,同时缓存数据

■ 如果存在缓存数据,则直接读取缓存数据

■ 删除后级的菜单隐藏域信息、菜单数据以及菜单,同时后级菜单选择框的文字与样式还原成默认,删除动态加载的菜单选择框

② 点击固定菜单下单条数据时发生的动作:

■ 单条数据名称添加进相应选择框

■ 单条数据的 id 存入页面相应隐藏域

■ 对应的下拉面板消失

  ■ 请求下级菜单的数据

  ■ 把该数据追加至相应下拉面板中

  ■ 同时把该数据缓存在页面中

③ 点击最后一个固定菜单下单条数据时发生的动作:

  ■ 单条数据名称添加进城市选择框

  ■ 单条数据 id 存入页面隐藏域

  ■ 对应的下拉面板面板消失

  ■ 检测是否含有下级数据,如果有则追加动态菜单框

  ■ 请求动态菜单的数据

  ■ 把该数据追加至相应下拉面板中

  ■ 同时把该数据缓存在页面中

④ 点击动态加载的菜单下单条数据时发生的动作:

■ 单条数据名称添加进相应选择框

■ 单条数据的 id 存入页面相应隐藏域

■ 对应的下拉面板消失

addr.html 代码:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>仿亚马逊 - 动态添加的多级联动菜单</title>
 <style>
 body,html{ font-size:14px;}
 form{ margin-top:20px; margin-left:20px;}

 /* 选择框 */
 .con{ float:left; margin-right:10px; position:relative;}
 .sel{ 

     padding:4px 23px 3px 5px;
     border:1px solid #ccc;
     background:url("images/dropdown_bg.gif") right 2px no-repeat;
 }
 .sel:hover{ 

     text-decoration:underline;
     cursor:pointer;
 }

 /* 下拉面板 */
 .dropdiv{

     width:500px;
     margin: 0;
     border: solid 1px #cbe3f7;
     padding: 7px 0 15px 15px;
     background-color: #fff;
     position:absolute;

     font-size:12px;
 }
 /* 省市信息 */
 .span-new{ 

     display:inline-block;
     width:110px;
     padding-right:15px;
     line-height:24px;

     color:rgb(0, 75, 145);
     cursor:pointer;
 }

 .span-new:hover{ text-decoration:underline; color:orange;}

 /*结果*/
 #result{ margin:20px;}

 .cls{ clear:both;}
 </style>
 <script src="../js/jquery-1.8.3.min.js"></script>
 </head>
 <body>

     <form id="sel-form" action="addr.php" method="post">

         <div id="pcon" class="con">
             <div id="province" class="sel">请选择省</div>
         </div>

         <div id="ccon" class="con">
             <div id="city" class="sel">请选择城市</div>
         </div>

         <div id="acon" class="con">
             <div id="area" class="sel">请选择区县</div>
         </div>

         <div class="cls"></div>
         <br>
         <input type="submit" id="sub" value="提交">

         <!-- 隐藏域 -->
         <input type="hidden" id="pid" name="pid">
         <input type="hidden" id="p" name="p">
         <input type="hidden" id="cid" name="cid">
         <input type="hidden" id="c" name="c">
         <input type="hidden" id="aid" name="aid">
         <input type="hidden" id="a" name="a">
         <input type="hidden" id="sid" name="sid">
         <input type="hidden" id="s" name="s">

     </form>

     <!--缓存数据-->
     <input type="hidden" id="pdata" name="pdata">

     <!-- 显示选择的结果 -->
     <div id="result">
         省份:<{$pid}> - <{$p}><br>
         城市:<{$cid}> - <{$c}><br>
         区县:<{$aid}> - <{$a}><br>
         <{if $sid && $s }>
         街道:<{$sid}> - <{$s}>
         <{/if}>
     </div>

     <script>

         $(function(){

             //初始状态下只有第一级菜单显示可用(黑色字体),后级菜单显示不可用(灰色字体)
             $(".sel:gt(0)").css("color","#ccc");

             //定义下拉面板
             $dropdiv = $("<div class='dropdiv'></div");

             /*******************
             * 点击第一级菜单  *
             ********************/
             $("#province").click(function(){

                 //可以封装函数
                 //删除后级 - 菜单单条信息
                 $("#citytab .span-new").remove();
                 $("#areatab .span-new").remove();
                 $("#streettab .span-new").remove();
                 $("#citytab").remove();
                 $("#areatab").remove();
                 $("#streettab").remove();
                 //删除后级 - 菜单信息
                 $("#city").text("请选择城市");
                 $("#area").text("请选择区县");
                 //清空后级对应的隐藏域
                 $("#cid").val("");
                 $("#c").val("");
                 $("#aid").val("");
                 $("#a").val("");
                 $("#sid").val("");
                 $("#s").val("");
                 //后级文字颜色
                 $("#city").css("color","#ccc");
                 $("#area").css("color","#ccc");

                 if( $("#provincetab").length == 0 ){

                     //如果有省份缓存数据
                     if($("#pdata").val() == ""){

                         //使用ajax获取省份信息
                         $.post("../sel2.php",{
                             city:true
                         },function(data,textStatus){

                             //接收json数据
                             var dataObj = eval("("+data+")"); //转换为json对象 

                             //缓存数据
                             $("#pdata").val(data);

                             $.each(dataObj,function(idx,item){ 

                                 //给下拉面板加上ID
                                 $dropdiv.attr("id","provincetab").css({"top":"25px","left":"0px"});
                                 $dropdiv.insertAfter($(".sel:eq(0)"));

                                 //把获取到的数据追加至面板中
                                 if( $("#provincetab .span-new").length < dataObj.length ){

                                     $span_new = $("<span class=\"span-new\" id=\""+item.provinceID+"\">"+item.province+"</span>");
                                     $span_new.appendTo($("#provincetab"));
                                 }
                             })

                         });
                     }
                     else{

                         //取出缓存数据
                         var $bufferData = $("#pdata").val();
                         var dataObj = eval("("+$bufferData+")"); 

                         $.each(dataObj,function(idx,item){ 

                             //给下拉面板加上ID
                             $dropdiv.attr("id","provincetab").css({"top":"25px","left":"0px"});
                             $dropdiv.insertAfter($(".sel:eq(0)"));

                             //把获取到的数据追加至面板中
                             if( $("#provincetab .span-new").length < dataObj.length ){

                                 $span_new = $("<span class=\"span-new\" id=\""+item.provinceID+"\">"+item.province+"</span>");
                                 $span_new.appendTo($("#provincetab"));
                             }
                         })
                     }

                 }else{

                     //当下拉面板已经存在时点击一级菜单,删除下拉面板
                     $("#provincetab").remove();
                 }

             //$("#province").click(function(){})结束
             });

             /*******************
             * 点击单条省份时  *
             ********************/
             $("#provincetab .span-new").live("click",function(){

                 //省份选择框
                 $("#province").text($(this).text());

                 //隐藏域信息
                 $("#pid").val($(this).attr("id"));
                 $("#p").val($(this).text());

                 $pid = $("#pid").val();

                 //给$pid加上城市标识c,防止jQuery错误识别id
                 $pid4id = "c"+$pid; 

                 //同时创建以该省id为id的input隐藏域id=c+pid,用作缓存城市数据
                 if($('#'+$pid4id).length == 0){

                     $bufferCtiy = $("<input type='hidden' id='"+$pid4id+"'>");
                     $bufferCtiy.insertAfter($("#pdata"));

                 }

                 //删除省菜单信息
                 $("#provincetab .span-new").remove();

                 //后级 - 城市菜单弹出
                 //检查是否有缓存数据
                 if($("#"+$pid4id+"").val() == ""){

                     $id = $(this).attr("id");
                     $id4id = "c"+$id

                     //使用ajax获取省份信息
                     if( $("#citytab").length == 0 ){

                         $.post("../sel2.php",{
                             pid : $("#pid").val()
                         },function(data,textStatus){

                             //接收json数据
                             var dataObj = eval("("+data+")"); //转换为json对象 

                             //同时缓存对应省份的城市数据
                             $("#"+$id4id).val(data);

                             $.each(dataObj,function(idx,item){ 

                                 //给下拉面板加上ID
                                 $dropdiv.attr("id","citytab").css({"top":"24px","left":"0px"});
                                 $("#citytab").appendTo($("#ccon"));

                                 //后级菜单文字颜色
                                 $("#city").css("color","#000");

                                 //把获取到的数据追加至面板中
                                 if( $("#city .span-new").length < dataObj.length ){

                                     $span_new = $("<span class=\"span-new\" id=\""+item.cityID+"\">"+item.city+"</span>");
                                     $span_new.appendTo($("#citytab"));
                                 }
                             });
                         });
                     }
                 }else{

                     //取出缓存数据
                     var $bufferData = $('#'+$pid4id).val();
                     var dataObj = eval("("+$bufferData+")"); 

                     //给下拉面板加上ID
                     $dropdiv.attr("id","citytab").css({"top":"24px","left":"0px"});
                     $("#citytab").appendTo($("#ccon"));

                     //后级菜单文字颜色
                     $("#city").css("color","#000");

                     $.each(dataObj,function(idx,item){ 

                         //把获取到的数据追加至面板中
                         if( $("#city .span-new").length < dataObj.length ){

                             $span_new = $("<span class=\"span-new\" id=\""+item.cityID+"\">"+item.city+"</span>");
                             $span_new.appendTo($("#citytab"));
                         }
                     });
                 }

             //$("#provincetab .span-new").live("click",function(){})结束
             });

             /*******************
             * 点击单条城市时  *
             ********************/
             /******************************************
             *    7个动作:                              *
             *                                          *
             *    1.城市名称添加进城市选择框              *
             *      2.城市id存入页面隐藏域                  *
             *    3.城市面板消失                          *
             *    4.在dom中插入城市后级 - 区域下拉面板 *
             *    5.请求城市后级 - 区县的数据              *
             *    6.把该数据追加至区县面板中              *
             *    7.同时把该数据缓存在页面中              *
             *                                          *
             *******************************************/
             $("#citytab .span-new").live("click",function(){

                 //1.城市名称添加进城市选择框
                 $("#city").text($(this).text());

                 //2.城市id存入页面隐藏域
                 $("#cid").val($(this).attr("id"));
                 $("#c").val($(this).text());

                 $cid = $("#cid").val();

                 //3.城市面板消失
                 $("#citytab .span-new").remove();
                 $("#citytab").remove();

                 //4.在dom中插入城市后级 - 区域下拉面板
                 //给$cid加上城市标识c,防止jQuery错误识别id
                 $cid4id = "c"+$cid;

                 //同时创建以该城市id为id的input隐藏域id=c+cid,用作缓存区县数据
                 //创建隐藏域
                 if($('#'+$cid4id).length == 0){

                     $bufferArea = $("<input type='hidden' id='"+$cid4id+"'>");
                     $bufferArea.insertAfter($("#pdata"));
                 }

                 //检查是否有缓存数据
                 if($("#"+$cid4id+"").val() == ""){

                     $id = $(this).attr("id");
                     $id4id = "a"+$id;

                     //使用ajax获取省份信息
                     if( $("#areatab").length == 0 ){

                         $.post("../sel2.php",{
                             cid : $("#cid").val()
                         },function(data,textStatus){

                             //接收json数据
                             var dataObj = eval("("+data+")"); //转换为json对象 

                             //同时缓存对应城市的城市数据
                             $("#"+$cid4id).val(data);

                             $.each(dataObj,function(idx,item){ 

                                 //给下拉面板加上ID
                                 $dropdiv.attr("id","areatab").css({"top":"24px","left":"0px"});
                                 $dropdiv.appendTo($("#acon"));

                                 //后级菜单文字颜色
                                 $("#area").css("color","#000");

                                 //把获取到的数据追加至面板中
                                 if( $("#area .span-new").length < dataObj.length ){

                                     $span_new = $("<span class=\"span-new\" id=\""+item.areaID+"\">"+item.area+"</span>");
                                     $span_new.appendTo($("#areatab"));
                                 }
                             });
                         });
                     }
                 }else{

                     //取出缓存数据
                     var $bufferData = $('#'+$cid4id).val();
                     var dataObj = eval("("+$bufferData+")"); 

                     //给下拉面板加上ID
                     $dropdiv.attr("id","areatab").css({"top":"24px","left":"0px"});
                     $dropdiv.appendTo($("#acon"));

                     $.each(dataObj,function(idx,item){ 

                         //把获取到的数据追加至面板中
                         if( $("#area .span-new").length < dataObj.length ){

                             $span_new = $("<span class=\"span-new\" id=\""+item.areaID+"\">"+item.area+"</span>");
                             $span_new.appendTo($("#areatab"));
                         }
                     });
                 }

             });

             /**************************
             * 点击二级菜单 - 城市时  *
             ***************************/
             $("#city").click(function(){

                 if($("#pid").val() != ""){

                     //删除后级 - 菜单信息
                     $("#areatab .span-new").remove();
                     $("#streettab .span-new").remove();
                     $("#streettab").remove();
                     $("#aid").val("");
                     $("#a").val("");
                     $("#sid").val("");
                     $("#s").val("");
                     $("#street").remove();
                     //后级菜单文字颜色
                     $("#area").css("color","#ccc");
                     $("#area").text("请选择区县");

                     //当下拉面板不存在时
                     if( $("#citytab").length == 0 ){

                         //根据表单中的省份id的隐藏域和表单外省份id=c+id的隐藏域的id进行对比,从页面缓存中读取数据
                         $pid = $("#pid").val();

                         //存在缓存,直接从页面的隐藏域读取数据
                         //取出缓存数据
                         var $bufferData = $('#c'+$pid).val();    

                         var dataObj = eval("("+$bufferData+")"); 

                         //给下拉面板加上ID
                         $dropdiv.attr("id","citytab").css({"top":"24px","left":"0px"});
                         //注意:此处不能使用$("#citytab")
                         $dropdiv.appendTo($("#ccon"));

                         $.each(dataObj,function(idx,item){ 

                             //把获取到的数据追加至面板中
                             if( $("#city .span-new").length < dataObj.length ){

                                 $span_new = $("<span class=\"span-new\" id=\""+item.cityID+"\">"+item.city+"</span>");
                                 $span_new.appendTo($("#citytab"));
                             }
                         });

                     }else{

                         $("#citytab .span-new").remove();
                         $("#citytab").remove();
                     }
                 }
             });

             /*******************
             * 点击单条区域时  *
             ********************/
             /******************************************
             *    7个动作:                              *
             *                                          *
             *    1.区域名称添加进城市选择框              *
             *      2.区域id存入页面隐藏域                  *
             *    3.区域面板消失                          *
             *    4.检测是否含有下级数据,如果有则追加  *
             *    5.请求区县后级 - 街道的数据              *
             *    6.把该数据追加至区县街道面板中          *
             *    7.同时把该数据缓存在页面中              *
             *                                          *
             *******************************************/
             $("#areatab .span-new").live("click",function(){

                 //1.区域名称添加进城市选择框
                 $("#area").text($(this).text());
                 $("#area").css("color","#000");

                 //2.区域id存入页面隐藏域
                 $("#aid").val($(this).attr("id"));
                 $("#a").val($(this).text());

                 $sid4id = "s"+$("#aid").val();
                 //创建隐藏域
                 if($('#'+$sid4id).length == 0){

                     $bufferArea = $("<input type='hidden' id='"+$sid4id+"'>");
                     $bufferArea.insertAfter($("#pdata"));
                 }

                 //3.区域面板消失
                 $(this).siblings().remove();
                 $(this).parent().remove();
                 $(this).remove();

                 //先检查是否有缓存
                 if($("#"+$sid4id).val() == ""){

                     //4.如果没有缓存的话再检测是否含有下级数据,如果有则追加
                     $.post("../sel2.php",{
                         aid : $("#aid").val()
                     },function(data,textStatus){

                         //如果有返回值
                         if(data){

                             //动态添加下一级菜单
                             $street = $("<div id=\"scon\" class=\"con\"><div id=\"street\" class=\"sel\">选择街道</div></div>");
                             $street.insertAfter($("#acon"));

                             //接收json数据
                             var dataObj = eval("("+data+")"); //转换为json对象 

                             //同时缓存对应城市的街道数据
                             $("#"+$sid4id).val(data);

                             $.each(dataObj,function(idx,item){ 

                                 //给下拉面板加上ID
                                 $dropdiv.attr("id","streettab").css({"top":"24px","left":"0px"});
                                 $dropdiv.appendTo($("#scon"));

                                 //把获取到的数据追加至面板中
                                 if( $("#street .span-new").length < dataObj.length ){

                                     $span_new = $("<span class=\"span-new\" id=\""+item.streetID+"\">"+item.street+"</span>");
                                     $span_new.appendTo($("#streettab"));
                                 }
                             });
                         }
                     });

                 }else{

                     //存在缓存,直接从页面的隐藏域读取数据
                     //取出缓存数据
                     var $bufferData = $("#"+$sid4id).val();    

                     var dataObj = eval("("+$bufferData+")"); 

                     //动态添加下一级菜单
                     $street = $("<div id=\"scon\" class=\"con\"><div id=\"street\" class=\"sel\">选择街道</div></div>");
                     $street.insertAfter($("#acon"));

                     //给下拉面板加上ID
                     $dropdiv.attr("id","streettab").css({"top":"24px","left":"0px"});
                     $dropdiv.appendTo($("#scon"));

                     $.each(dataObj,function(idx,item){ 

                         //把获取到的数据追加至面板中
                         if( $("#street .span-new").length < dataObj.length ){

                             $span_new = $("<span class=\"span-new\" id=\""+item.streetID+"\">"+item.street+"</span>");
                             $span_new.appendTo($("#streettab"));
                         }
                     });

                 }

             });

             /**************************
             * 点击三级菜单 - 区域时  *
             ***************************/
             /******************************************************
             *    4个动作:                                          *
             *                                                      *
             *    1.如果存在下拉面板,则下拉面板消失                  *
             *      2.如果不存在下拉面板,则查看是否有缓存数据          *
             *    3.如果没有缓存数据,则通过ajax获取,同时缓存数据   *
             *    4.如果存在缓存数据,则直接读取                   *
             *                                                      *
             *******************************************************/
             $("#area").click(function(){

                 if($("#cid").val() != ""){

                     //删除后级 - 菜单信息
                     $("#streettab .span-new").remove();
                     $("#streettab").remove();
                     $("#sid").val("");
                     $("#s").val("");
                     $("#street").remove();

                     //当下拉面板不存在时
                     if( $("#areatab").length == 0 ){

                         //根据表单中的城市id的隐藏域和表单外省份id=a+id的隐藏域的id进行对比,从页面缓存中读取数据
                         $cid = $("#cid").val();

                         //存在缓存,直接从页面的隐藏域读取数据
                         //取出缓存数据
                         var $bufferData = $('#c'+$cid).val();    

                         var dataObj = eval("("+$bufferData+")"); 

                         //给下拉面板加上ID
                         $dropdiv.attr("id","areatab").css({"top":"24px","left":"0px"});
                         //注意:此处不能使用$("#citytab")
                         $dropdiv.appendTo($("#acon"));

                         $.each(dataObj,function(idx,item){ 

                             //把获取到的数据追加至面板中
                             if( $("#area .span-new").length < dataObj.length ){

                                 $span_new = $("<span class=\"span-new\" id=\""+item.areaID+"\">"+item.area+"</span>");
                                 $span_new.appendTo($("#areatab"));
                             }
                         });

                     }else{

                         $("#areatab .span-new").remove();
                         $("#areatab").remove();
                     }
                 }
             });

             /*******************
             * 点击单条街道时  *
             ********************/
             /******************************************
             *    3个动作:                              *
             *                                          *
             *    1.街道名称添加进街道选择框              *
             *      2.街道id存入页面隐藏域                  *
             *    3.街道面板消失                          *
             *                                          *
             *******************************************/
             $("#streettab .span-new").live("click",function(){

                 //1.区域名称添加进城市选择框
                 $("#street").text($(this).text());
                 $("#street").css("color","#000");

                 //2.区域id存入页面隐藏域
                 $("#sid").val($(this).attr("id"));
                 $("#s").val($(this).text());

                 //3.区域面板消失
                 $(this).siblings().remove();
                 $(this).parent().remove();
                 $(this).remove();
             });

             /*******************
             * 点击街道菜单框时  *
             ********************/
             $("#street").live("click",function(){

                 if($("#aid").val() != ""){

                     //当下拉面板不存在时
                     if( $("#streettab").length == 0 ){

                         //根据表单中的区域id的隐藏域和表单外区域id=a+id的隐藏域的id进行对比,从页面缓存中读取数据
                         $aid = $("#aid").val();

                         //存在缓存,直接从页面的隐藏域读取数据
                         //取出缓存数据
                         var $bufferData = $('#s'+$aid).val();    

                         var dataObj = eval("("+$bufferData+")"); 

                         //给下拉面板加上ID
                         $dropdiv.attr("id","streettab").css({"top":"24px","left":"0px"});
                         //注意:此处不能使用$("#citytab")
                         $dropdiv.appendTo($("#scon"));

                         $.each(dataObj,function(idx,item){ 

                             //把获取到的数据追加至面板中
                             if( $("#street .span-new").length < dataObj.length ){

                                 $span_new = $("<span class=\"span-new\" id=\""+item.streetID+"\">"+item.street+"</span>");
                                 $span_new.appendTo($("#streettab"));
                             }
                         });

                     }else{

                         $("#streettab .span-new").remove();
                         $("#streettab").remove();
                     }
                 }
             });

         //如果有一栏为空或者不可用,不允许提交
         $("#sub").click(function(){

             if($("#street").length == 0){ 

                 if($("#pid").val() == "" || $("#p").val() == "" || $("#cid").val() == "" || $("#c").val() == "" || $("#aid").val() == "" || $("#a").val() == "" || $("#city").attr("disabled") === true || $("#area").attr("disabled") === true){

                     alert("请完成选择");
                     return false;
                 }
             }else{

                 if($("#pid").val() == "" || $("#p").val() == "" || $("#cid").val() == "" || $("#c").val() == "" || $("#aid").val() == "" || $("#a").val() == "" || $("#city").attr("disabled") === true || $("#area").attr("disabled") === true || $("#s").length == 0 || $("#s").val() == "" || $("#sid").length == 0 || $("#sid").val() == ""){

                     alert("请完成选择");
                     return false;
                 }
             }
         });

         //$(function(){})结束
         });

     </script>
 </body>
 </html>

代码下载地址:https://github.com/dee0912/select_addr/tree/master/demo2

欢迎朋友们交流讨论。

作者:小dee
说明:作者写博目的是记录开发过程,积累经验,便于以后工作参考。
如需转载,请在文章页面保留此说明并且给出原文链接。谢谢!

[ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板的更多相关文章

  1. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

  2. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  3. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  4. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  5. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  6. 仿网易新闻app下拉标签选择菜单

    仿网易新闻app下拉标签选择菜单 仿网易新闻app下拉标签选择菜单,长按拖动排序,点击增删标签控件 ##示例  ##EasyTagDragView的使用 在layout布局里添加:  

  7. 利用jquery实现电商网站常用特效之:五星评分

    这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

  8. 电商网站jQuery放大镜代码

    分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...

  9. java结合jQuery.ajax实现左右菜单联动刷新列表内容

    http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...

随机推荐

  1. Ubuntu14.04桌面版基本配置

    最近公司需要用Ubuntu测试一些功能,安装好后绚丽的桌面环境很是吸引人,但切换到字符界面后,发现不少地方与RHEL不一样,连ssh.vim都没有,字符界面玩得不开心. 搜了不少文章,才将基本的功能配 ...

  2. python核心编程学习记录之面向对象编程

    未完待续525

  3. ajax提交含有html数据时的处理方法

    这两天在做一个文章内修改的功能,由于前端选用的Extjs控件库,于是就使用Ext.form.HtmlEditor. 在使用ajax提交数据的时候,需要提交包含有html代码的数据.这时候问题就来了,不 ...

  4. Python 在Windows下安装matplotlib

    windows下安装很麻烦,使用easy_install 安装报错  提示缺少freetype 和png 后经多方查询,最终安装成功 以下是安装过程 前提你的Python环境已经搭建好了 1.前提需要 ...

  5. Android事件侦听器回调方法浅谈

    http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():o ...

  6. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  8. Python十题(第2课)

    一.天天向上的力量 C 一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,由于遗忘等原因能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值 ...

  9. 阻尼回弹效果的ScrollView嵌套GridView

    以前写过一篇带阻尼回弹效果的ScrollView,但是有些小问题,于是又重新整理了一下,这篇文章一是一个带阻尼的Scrollview,再个就是Scrollview嵌套GridView实现,而GridV ...

  10. MySQL架构备份

    MySQL Replication 概述 集群的主要类型? 高可用集群(High Available Cluster, HA) 高可用集群是指通过特殊的软件把独立的服务器连接起来,组成一个能够提供故障 ...