jquery插件 --- 展示信息

效果图如下：

要求：成功时加载商品信息，失败时提示重新加载。其中，总个数，当前页，上一页和下一页是前台页面模拟的。只在页面加载时请求一次。

 

代码：

    ;(function($){
        $.fn.mroductInfo=function(options){
            var _this = $(this);
            var len = 0;
            var index = 0;
            var defaults = {
                title:'商品名称',
                type:'GET',
                url:''
            };
            var opts = $.extend(defaults,options,{});
            init();
            function init(){
                $.ajax({
                    type:defaults.type,
                    url:defaults.url,
                    success:function(data){
                        data = $.parseJSON(data);
                        data =$.parseJSON( data.content);
                        var tmphtml = "<h3>"+defaults.title+"<span></span></h3><div class='mlist'>";
                        $.each(data,function(i,v){
                            if(i===0){
                                tmphtml += "<ul><li>编号："+data[i].id+"</li><li>名称："+data[i].name+"</li>"+
　　　　　　　　　　　　　　　　　　　　　　　　　"<li>价格："+data[i].price+"</li><li>产地："+data[i].place+"</li></ul>";
                            }
                            else{
                                tmphtml += "<ul style='display:none;'><li>编号："+data[i].id+"</li><li>名称："+data[i].name+"</li>"+
　　　　　　　　　　　　　　　　　　　"<li>价格："+data[i].price+"</li><li>产地："+data[i].place+"</li></ul>";
                            }
                        });
                        tmphtml+="</div><div class='mpage'><a class='mpageprev'>上一页</a><em>1</em>/<em>1</em>"+
　　　　　　　　　　　　　　"<a class='mpagenext'>下一页</a></div>";
                        _this.html(tmphtml);
                    },
                    error:function(){
                        var tmphtml = "<h3>"+defaults.title+"<span></span></h3><div class='mlist'>"+
　　　　　　　　　　　　　 "<a class='error'>加载失败，请重试。</a></div>";
                        _this.html(tmphtml);
                    },
                    complete:function(){
                        _this.find(".mlist").find("ul").hide().eq(0).show();
                        len = _this.find(".mlist").find("ul").length;
                        _this.find(".mpage").find("em").eq(1).html(len).show();
                        _this.find("h3").find("span").html("("+len+")");
                        if(len===1){
                            _this.find(".mpageprev,.mpagenext").hide();
                        }
                        else{
                            _this.find(".mpageprev").hide();
                        }
                    }
                });
            }

            _this.find(".mpageprev").live("click",function(){
                index--;
                if(index<=0){
                    index=0;
                    _this.find(".mpageprev").hide();
                }
                _this.find(".mpagenext").show();
                _this.find(".mlist").find("ul").hide().eq(index).show();
                _this.find(".mpage").find("em").eq(0).html(parseInt(index+1)).show();
            });
                        
            _this.find(".mpagenext").live("click",function(){
                index++;
                if(index>=len-1){
                    index=len-1;
                    _this.find(".mpagenext").hide();
                }
                _this.find(".mpageprev").show();
                _this.find(".mlist").find("ul").hide().eq(index).show();
                _this.find(".mpage").find("em").eq(0).html(parseInt(index+1)).show();
            });
                    
            _this.find(".error").live("click",function(){
                init(); 
            });
        };
    })(jQuery);
            
            
    $(function(){
        $("#fruit").mroductInfo({title:'水果介绍',url:'p1.php'});
    });