当前位置: 代码迷 >> Web前端 >> 一个JQuery兑现的带分页头像选择列表
  详细解决方案

一个JQuery兑现的带分页头像选择列表

热度:133   发布时间:2012-07-24 17:47:58.0
一个JQuery实现的带分页头像选择列表。
最近在给学生做个论坛,初学JS和JQuery,尝试做了个带分页头像选择列表。
代码如下:
 
   var lee={};
lee.utils={};
lee.utils.face_list=function(st,to,si,img_width,img_height,tar,callback){
   var start=st;
   var total=to;
   var size=si;
   var page=total%size==0?total/size:Math.floor(total/size)+1;   
   
   return {
      make_list:function(){
       
       $("<div id='face_list'></div><div id='img_list'></div><div id='page_list'></div>").appendTo(tar);
    
          for(var i=1;i<=page;i++){
         var $p=$("<a href='javascript:void(0);' page="+i+" style='margin-right:5px;'>第"+i+"页</a>");
      
      $p.click(function(){
              var page=$(this).attr("page");
              $("#img_list").empty();
           
           var page_start=start+(page-1)*size;
           var page_end=start+(page-1)*size+size<start+total?start+(page-1)*size+size:start+total;
           
           for(var i=page_start;i<page_end;i++){
             var $img=$("<img src='image/loadding.gif' style='margin:5px;width:"+img_width+";height:"+img_height+"' lazy_src='image/face/image"+i+".gif' title='image"+i+".gif'/>");
             $img.click(function(){callback($(this).attr("title"))});
                                           $img.appendTo("#img_list");
                                            }
           
                                            $("#img_list img").each(function(){
                    $(this).attr("src",$(this).attr("lazy_src"));
                    });
           
            });
      
      if(i==1)$p.click();
      
      $p.appendTo($("#page_list"));
       };  
       
    }
    }
   
 };
  

  调用代码:
 
  <script language="javascript">
         $(function(){
        
             lee.utils.face_list(135,328,15,72,122,$("#list"),function(name){
                 $("#user_face").val(name);
                 $("#select_face").attr("src","image/face/"+name);
                 }).make_list();
      
         });
    </script>
  

  相关解决方案