/**
  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. jQuery实现三级联动菜单(鼠标悬停联动)

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

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

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

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

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

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

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

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

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

随机推荐

  1. jenkins离线安装git插件

    jenkins没有默认安装git,当jenkins无法连接外网的话,安装git插件就是一件很麻烦的事,需要自己去下载插件: 往下拉 这边的插件就是需要自己去下载了,在bing下搜索jenkins gi ...

  2. AS 2.0新功能 Instant Run

    Instant Run上手 作为一个Android开发者,很多的时候我们需要花大量的时间在bulid,运行到真机(虚拟机)上,对于ios上的Playground羡慕不已,这种情况将在Android S ...

  3. 过渡到SSAS之一:简单模型认识

    本文主要是转载的,但有些地方,原作者没有说的够详细,我加以补充发到这里. --------------------------------------------------------------- ...

  4. 新浪微博share分享接口请求奇葩错误

    17年6月30号,微博正式转入牛逼状态: 限制原来的微博发布删除等接口:(想用就开套餐,不然别说话) 开放新的分享接口share,然而,在调用这个分享接口时候,就会出现各种各样的奇葩错误: 注意事项: ...

  5. DRF初识与序列化

    一.Django的序列化方法 1.为什么要用序列化组件 做前后端分离的项目,我们前后端数据交互一般都选择JSON,JSON是一个轻量级的数据交互格式.那么我们给前端数据的时候都要转成json格式,那就 ...

  6. Actifio如何保护和管理Oracle-带外篇

    引言 本文提供CDS带外环境下相关配置,保护和恢复Oracle的所需步骤. 目的是提供Oracle数据库配置前的详细说明,Actifio环境下发现和配置Oracle数据库,执行还原和恢复,以及配置Or ...

  7. zend framwork项目基本操作

    1.首先,我们做项目是采用db的方式来编写sql语句的. 2.查询: fetchOne()   查询一个字段,如果没有指定就只查询第一个字段,只能得到一个值. fetchRow()    查询一行数据 ...

  8. python中list、tuple、dict、set的使用

    1.list列表 list是一种可变的,有序的列表,可以随时添加和删除其中的元素. 其格式如下:list-name=[element1,element2,....] >>> nums ...

  9. js-ES6学习笔记-module(3)

    1.如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法. // constants.js 模块 export const A = 1; export const ...

  10. JSP+JavaBean+Servlet技术(MVC模型)

    一,Servlet开发用户在浏览器中输入一个网址并回车,浏览器会向服务器发送一个HTTP请求.服务器端程序接受这个请求,并对请求进行处理,然后发送一个回应.浏览器收到回应,再把回应的内容显示出来.这种 ...