zoukankan      html  css  js  c++  java
  • 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'}); });
  • 相关阅读:
    考研讲座笔记——张雪峰
    【极简版】OpenGL 超级宝典(第五版)环境配置 VS2010
    OpenGL编程指南(第九版) Tiangles 学习笔记
    qt学习笔记
    郑州大学2018新生训练赛第十场题解
    Win10 中将网页转换成pdf的简便方法
    Kali Linux ——在无网络情况下安装无线网卡驱动
    成环的概率dp(初级) zoj 3329
    概率dp的边界处理 POJ 2096
    node连接mysql生成接口,vue通过接口实现数据的增删改查(一)
  • 原文地址:https://www.cnblogs.com/kuikui/p/2733062.html
Copyright © 2011-2022 走看看