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'}); });
  • 相关阅读:
    解决 Mac launchpad 启动台 Gitter 图标无法删除的问题
    React 与 React-Native 使用同一个 meteor 后台
    解决 React-Native mac 运行报错 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by ope
    一行命令更新所有 npm 依赖包
    swift学习笔记
    IOS语言总结
    focusSNS学习笔记
    别小看锤子,老罗真的很认真
    windowsphone开发页面跳转到另一个dll中的页面
    【令人振奋】【转】微软潘正磊谈DevOps、Visual Studio 2013新功能、.NET未来
  • 原文地址:https://www.cnblogs.com/kuikui/p/2733062.html
Copyright © 2011-2022 走看看