jquery插件 --- 展示信息

简介: 效果图如下: 要求:成功时加载商品信息,失败时提示重新加载。其中,总个数,当前页,上一页和下一页是前台页面模拟的。只在页面加载时请求一次。   代码: ;(function($){ $.

效果图如下:

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

 

代码:

    ;(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'}); });
目录
相关文章
|
4月前
|
关系型数据库 MySQL Docker
利用docker 开发 信息系统,python + mysql + flask + jquery
利用docker 开发 信息系统,python + mysql + flask + jquery
59 2
|
3月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
3月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
26 0
|
3月前
|
Java 数据库 Android开发
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
|
4月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
54 1
|
5月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
28 0
|
5月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
43 0
|
5月前
|
JavaScript 前端开发 数据格式
Jquery前端分页插件pagination使用
Jquery前端分页插件pagination使用
62 1
|
5月前
|
移动开发 JavaScript 前端开发
jQuery实现多种切换效果的图片切换的五款插件
jQuery实现多种切换效果的图片切换的五款插件
40 0