美文网首页
项目中常用到的js方法整理

项目中常用到的js方法整理

作者: codewa | 来源:发表于2016-10-17 14:16 被阅读0次

    一.change_view.js

    用于手机端页面rem布局换算

    640px=>6.4rem;100px=>1rem;以此类推,
    之所以换算单位为100,是因为:1.谷歌最小的字体像素值是12px(ps:貌似手机的没有这个限制);2.比较容易换算,目前使用没有什么bug

    var change = {
        design_width: 640,
        IsPC: function() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad",
                "iPod"
            ];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        },
        pc_type: 0,
        body: document.getElementsByTagName('html')[0],
        action_flag: true,
        action: function(num, $1) {
            change.design_width = num;
            if ($1) {
                change.pc_type = $1;
            }
            if (this.IsPC()) {
                this.view_width = document.documentElement.clientWidth > num ? num : document.documentElement.clientWidth;
                if (this.pc_type || this.pc_type == 1) {
                    this.body.className = ' pc_phone';//特殊要求使用
                } else {
                    this.body.className = ' pc';//监测到是pc
                }
    
            } else {
                this.view_width = document.documentElement.clientWidth < 320 ? num / 2 : document.documentElement.clientWidth;
            }
            this.body.style.opacity = 1;
            this.body.style.fontSize = this.view_width * 100 / num + 'px';
            if (change.action_flag) {
                change.action_flag = false;
                window.addEventListener('resize', function() {
                    change.action(change.design_width);
                }, false);
            }
    
        }
    };
    
    

    页面调用示例

    调用 change.action(640);
    640为设计稿宽度 会给body追加不同的类名pc

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="format-detection" content="email=no" />
        <meta name="format-detection" content="telephone=no" />
        <title>预约表单</title>
        <script src="js/change_view.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">change.action(640);</script>
    </head>
    <body>
    </body>
    </html>
    

    css 相应的样式

    html { -webkit-text-size-adjust: none; word-wrap: width: 100%; height: 100%; color: #333; line-height: 1.3;}
    body { font-size: 14px; min-height: 100%; position: relative; background-color: #fff; min-width: 320px; overflow-x: hidden; width: 100%; padding-top: 45px; min-height: 100%;}
    html.pc body { background-color: #fff; margin: 0 auto; max-width: 640px; }
    html.pc { background-color: #ccc; }
    

    css相关

    sass方法

    $url:"http://icon.carimg.com/m/0201/";
    
    //transition
    @mixin tran($a:all, $b:ease, $c:.3s,$d:0s) {
        transition: $a $b $c $d;
        -moz-transition: $a $b $c $d;
        -webkit-transition:$a $b $c $d;
    }
    
    
    @mixin animation($a){
        animation:$a;
        -moz-animation:$a;
        -webkit-animation:$a;
    
    }
    
    @mixin transform($a) {
        transform: $a;
        -moz-transform: $a;
        -webkit-transform: $a;
        -ms-transform: $a;
    }
    
    @mixin line_over($num:2) {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $num;
    }
    
    
    //opacity
    @mixin opacity($a) {
        opacity: $a;
        filter:alpha(opacity=$a*100);
    }
    
    
    

    public.js(目前未整理)

    var jiaju = {
        api: '',
        //懒加载-s
        lazy: {
            effect: "fadeIn",
            threshold: 200,
            load: function(w1, h1) {
                var load_this = $(this),
                    _this_parent_width, _this_parent_height, _this_width, _this_height;
                if (load_this.hasClass('auto')) {
                    _this_parent_width = load_this.parents('.lazy').width();
                    _this_parent_height = load_this.parents('.lazy').height();
                    _this_width = w1;
                    _this_height = h1;
                    //              console.log(_this_width+"}"+_this_height)
                    if (_this_parent_width / _this_parent_height < _this_width / _this_height) {
                        load_this.css({
                            width: 'auto',
                            height: '100%'
                        });
                        _this_width = _this_parent_height * w1 / h1;
                        load_this.css({
                            left: -(((_this_width - _this_parent_width) / 2) / _this_parent_width) * 100 + '%',
                            top: 0
                        });
                    } else {
                        load_this.css({
                            width: '100%',
                            height: 'auto'
                        });
                        _this_height = _this_parent_width * h1 / w1;
                        load_this.css({
                            top: -(((_this_height - _this_parent_height) / 2) / _this_parent_height) * 100 + '%',
                            left: 0
                        });
                    }
                } else if (load_this.hasClass('auto_height')) {
                    load_this.css({
                        height: 'auto'
                    });
                } else if (load_this.hasClass('height_middle')) {
                    _this_parent_height = load_this.parents('.lazy').height();
                    _this_parent_width = load_this.parents('.lazy').width();
                    _this_height = _this_parent_width * h1 / w1;
                    load_this.css({
                        top: -(((_this_height - _this_parent_height) / 2) / _this_parent_height) * 100 + '%',
                        left: 0
                    });
                } else if (load_this.hasClass('auto_inner')) {
                    _this_parent_width = load_this.parents('.lazy').width();
                    _this_parent_height = load_this.parents('.lazy').height();
                    _this_width = w1;
                    _this_height = h1;
                    //              console.log(_this_width+"}"+_this_height)
                    if (_this_parent_width / _this_parent_height > _this_width / _this_height) {
                        load_this.css({
                            width: 'auto',
                            height: '100%'
                        });
                        _this_width = _this_parent_height * w1 / h1;
                        load_this.css({
                            left: -(((_this_width - _this_parent_width) / 2) / _this_parent_width) * 100 + '%',
                            top: 0
                        });
                    } else {
                        load_this.css({
                            width: '100%',
                            height: 'auto'
                        });
                        _this_height = _this_parent_width * h1 / w1;
                        load_this.css({
                            top: -(((_this_height - _this_parent_height) / 2) / _this_parent_height) * 100 + '%',
                            left: 0
                        });
                    }
                }
            }
        },
        //懒加载-e
        //ajax-s
        post: function(api, obj_json, fn) {
            //      jiaju.show_loading();
            $.post(jiaju.api + api, obj_json, function(data) {
                jiaju.hide_loading();
                if (data.status == 1) {
                    if (fn) {
                        fn(data);
                    }
                } else {
                    jiaju.tips({
                        type: 'wrong',
                        content: data.msg
                    });
                }
            }, 'json');
        },
        get: function(api, obj_json, fn) {
            //      jiaju.show_loading();
            $.get(jiaju.api + api, obj_json, function(data) {
                jiaju.hide_loading();
                if (data.status == 1) {
                    if (fn) {
                        fn(data);
                    }
                } else {
                    jiaju.tips({
                        type: 'wrong',
                        content: data.msg
                    });
                }
            }, 'json');
        },
        //ajax-e
        //自定义小方法-s
        scroll: 0,
        system: 'ios',
        view_scroll: function() {
            $('html,body').removeClass('no_scroll');
            $(window).scrollTop(jiaju.scroll)
            jiaju.scroll = 0;
        },
        load: ['![](https://img.haomeiwen.com/i3246849/9ec8c89b90420927.gif?imageMogr2/auto-orient/strip) 正在加载中', '加载已完成!'],
        show_loading: function() {
            $('#ajax_loading').show();
        },
        hide_loading: function() {
            $('#ajax_loading').hide();
        },
        view_no_scroll: function() {
            jiaju.scroll = $(window).scrollTop();
            $('html,body').addClass('no_scroll');
        },
        view_scroll: function() {
            $('html,body').removeClass('no_scroll');
            $(window).scrollTop(jiaju.scroll)
            jiaju.scroll = 0;
        },
        //自定义小方法-e
        //下拉加载-s
        scroll_ajax_flag: true,
        page: function(txt, ajax_fn) {
            var $win = $(window);
            var $txt = $(txt);
            if ($txt.length <= 0) {
                return false;
            }
            $win.scroll(function() {
                if ($win.scrollTop() + 100 > $txt.offset().top - $win.height()) {
                    ajax_fn($txt);
                }
            });
        },
        //下拉加载-e
        //warn-s
        tips: function(obj) {
            var $warn = $('#warn')
            $warn.find('em').html(obj.content);
            $warn.find('i')[0].className = "iconfont icon-" + obj.type;
            $warn.show();
            var time = obj.time ? obj.time : 2000;
            var tt = setTimeout(function() {
                $('#warn').hide();
                if (obj.fn) {
                    obj.fn();
                }
                clearTimeout(tt);
            }, time);
        },
        url_attr: function(name) {
            var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
            var matcher = pattern.exec(location.href);
            var items = null;
            if (null != matcher) {
                try {
                    items = decodeURIComponent(decodeURIComponent(matcher[1]));
                } catch (e) {
                    try {
                        items = decodeURIComponent(matcher[1]);
                    } catch (e) {
                        items = matcher[1];
                    }
                }
            }
            return items;
        },
        url0_attr: function(name) {
            var pattern = new RegExp("[#&]" + name + "\=([^&]+)", "g");
            var matcher = pattern.exec(location.href);
            var items = null;
            if (null != matcher) {
                try {
                    items = decodeURIComponent(decodeURIComponent(matcher[1]));
                } catch (e) {
                    try {
                        items = decodeURIComponent(matcher[1]);
                    } catch (e) {
                        items = matcher[1];
                    }
                }
            }
            return items;
        },
        //表单错误提示
        formerror: function(e, t) {
            var err='',inputType='请输入',placeholder;
            if(e.attr('placeholder')){
                placeholder=e.attr('placeholder').replace('请输入','');
            }
            if(e.find('option').length){
                inputType='请选择';
            }
            switch(t){
                case '不能为空':
                    var
                    err=inputType+placeholder;
                break;
                case '请输入数字':
                    err=t;
                break;
                default:
                    err=placeholder+t;
            }
            notie.alert(3, err, 1.5);
            $(e).addClass('error').one('focus', function() {
                $(this).removeClass('error');
            });
            // var $box = $(e).parent(),
            //     $err = $box.find('div.form_error');
            // if ($err.length) {
            //     $err.text(t).show();
            // } else {
            //     $box.append('<div class="form_error">' + t + '</div>');
            // }
            // $(e).addClass('error').one('focus', function() {
            //     $(this).parent().find('div.form_error').hide();
            //     $(this).removeClass('error');
            // });
        },
        //公共表单验证支持异步提交
        submit: function(opt) {
            var $obj = $('#' + opt.id),
                error;
            if (typeof opt.error == 'function') {
                error = opt.error;
            } else {
                error = jiaju.formerror;
            }
            $obj.submit(function(e) {
                var b = $(this).validate({
                    validate: {
                        pwd: function(e, err) {
                            if (!/^[0-9A-Za-z]{6,20}$/.test(e.val())) {
                                _error(e, 'pwd');
                                return false
                            }
                        }
                    },
                    messages: {
                        pwd: '请将密码设置为6-20位,并且由字母,数字和符号两种以上组合'
                    },
                    isone: true,
                    error: error
                });
                if (b) {
                    if (typeof opt.callback == 'function') {
                        return opt.callback(this);
                    } else {
                        return true;
                    }
                }
                return false;
            });
            $obj.find('[type=submit]')[0].disabled = false;
        },
        yuyue: function(obj) {
            jiaju.submit({
                id: 'yuyue',
                callback: function(e) {
                    $('#pc_url').val(window.location.href);
                    var user_id = $.cookie('user_base_id');
                    if (user_id !== undefined) {
                        $('#pc_userid').val(user_id);
                    } else {
                        $('#pc_userid').val(0);
                    }
                    var $form = $(e);
                    jiaju.show_loading();
                    $.ajax({
                        url: $form.attr('action'),
                        dataType: "jsonp",
                        data: $form.serializeArray(),
                        success: function(d) {
                            jiaju.hide_loading();
                            var types;
                            if (d.status == 200) {
                                $form[0].reset();
                                types='correct';
                                //notie.alert(1, d.msg, 1.5);
                            } else {
                                types='wrong';
                            }
                            if(typeof obj!="undefined" && typeof obj.callback=="function"){
                                obj.callback(d);
                            }else{
                                jiaju.tips({
                                    type:types,
                                    content: d.msg
                                });
                            }
                        },
                        error: function() {
                            //alert('请求出错!');
                            jiaju.hide_loading();
                        }
                    });
                    return false;
                }
            });
        },
        //获取验证码用倒计时
        getcode: function(obj) {
            var t = obj.innerHTML,
                n = 60;
            (function() {
                if (n > 0) {
                    obj.disabled = true;
                    $(obj).addClass('disabled');
                    obj.innerHTML = '倒计时' + (n--) + '秒';
                    setTimeout(arguments.callee, 1000);
                } else {
                    obj.disabled = false;
                    obj.innerHTML = t;
                    $(obj).removeClass('disabled');
                }
            })();
        },
        //活动倒计时
        countdown: function(opt) {
            //  1h = 3600 s
            //  1s = 1000 ms
            (function() {
                var t = null;
                var sTime = new Date(opt.date);
                var mydate = new Date();
                var T = Math.floor((sTime - mydate) / 1000);
                if (T <= 0) {
                    clearTimeout(t);
                    opt.obj.html(opt.txt).parents('.count').addClass('pass');
                    return;
                }
                var D = Math.floor(T / (3600 * 24));
                var H = Math.floor((T - D * 24 * 3600) / 3600);
                var M = Math.floor((T / 60) - (D * 24 * 60 + H * 60));
                var S = T % 60;
    
                function setnum(d, t) {
                    if (d === 0) {
                        return '';
                    } else {
                        return d + t;
                    }
                }
    
                var html = setnum(D, '天') + setnum(H, '小时') + setnum(M, '分') + S + '秒';
                opt.obj.html(html);
                t = setTimeout(function() {
                    jiajuol.countdown(opt);
                }, 1000);
            })();
        },
        share: function($jsons) {
            var share_obj = new nativeShare({
                url: '',
                title: $jsons.title,
                desc: $jsons.description,
                img: $jsons.image,
                img_title: '家居在线',
                from: '家居在线'
            });
            $('<div class="share_body change_fixed"><div class="socials icon_h5"></div></div><section class=erweima><div><img src="><span>微信里点“发现”,扫一下<br>二维码便可将本文分享至朋友圈。</span></div></section>').appendTo('body');
            share_fn();
            $('.socials').share($jsons);
            $(document).on('click', '.shares', function() {
                if (!jiaju.share_flag) {
                    $('.share_body').show().find('social-share').addClass('normal');
                }
            });
            // $('.social-share').on('click', '.icon-wechat', function() {
            //     $('.erweima').show();
            //     $('.erweima img').attr('src', $(this).find('.wechat-qrcode img').attr('src'))
            //
            // });
            $('.erweima div,.social-share').click(function(e) {
                e.stopPropagation();
            })
            $('.erweima,.share_body').click(function() {
                $(this).hide();
            })
        },
        //footer_href-s
        //go_phone-s
        phone: function(obj) {
            $('<a href="https://static.meiqia.com/dist/standalone.html?eid=10466" class="iconfont icon-guanjiaowangtubiao11 go_phone" target="_blank"></a>').appendTo('body');
            if (obj) {
                $('.go_phone').attr('href', obj);
            };
        },
        //go_phone-e
        footer_value: function(json) {
                $('body').addClass('pd_b');
                var footer_arr = ['<a href="/free" class=flex1><span><i class="iconfont icon-baojiadan"></i>装修报价</span></a>', '<a href="/appoint" class=flex1><span><i class="iconfont icon-lease-resv-2homezaixian"></i>在线预约</span></a>', '<a href="" class=flex1><span><i class="iconfont icon-goumai"></i>预约购买</span></a>', '<a href="http://m.jiajuol.com/seller/0200/activity/activity_appoint.php?activity_id=38" class=flex1><span><i class="iconfont icon-baoming"></i>我要报名</span></a>', '<a href=tel:400-9230-798 class=flex1><span><i class="iconfont icon-dianhuayuyue"></i>电话预约</span></a>', '<a href=tel:400-9230-798 class=flex1><span><i class="iconfont icon-dianhuayuyue"></i>电话咨询</span></a>', '<a href="" class=flex1><span><i class="iconfont icon-dianping"></i>我要点评</span></a>'];
                $('<section class="footer_href_body"><section class="footer_href change_fixed box fadeInUp"></section></section>').appendTo('body');
                var $footer_href = $('section.footer_href');
                var $footer_href_body = $('section.footer_href_body');
                for (var i = 0; i < json.arr.length; i++) {
                    var $add = $(footer_arr[json.arr[i]]);
                    if (json.arr_href) {
                        if (json.arr_href[i]) {
                            $add.attr('href', json.arr_href[i]);
                        }
                    }
                    $add.appendTo($footer_href);
                };
                $footer_href_body.show();
           },
            //footer_href-e
            shop_list:function(){
                if($.cookie('user_base_id') != undefined) {
                    var c_user = false;
                    var go_str = '';
                    $('.shangpin_list li dl dd').find('p').addClass('active').html('我想买');
    
                    $('.shangpin_list li dl dd').each(function(index, obj) {
                        go_str += $(obj).attr('data-value') + ',';
                        console.log($(obj).attr('data-value'));
                    });
                    //console.log(go_str.slice(0,-1));
                    $.get('/api/seller/goods/goods_price.php', {
                        goods_id: go_str.slice(0, -1)
                    }, function(data) {
                        console.log(data);
                        var data = data;
                        if(data.status == 200) {
                            $('.shangpin_list li dl dd span').each(function(index, obj) {
                                $(obj).html(data.data[index].price == 0 ? '到店更低' : '¥' + data.data[index].price);
                            });
                        }
                    }, 'json')
                } else {
                    var c_user = true;
                    $('.shangpin_list li dl dd').find('span').html('劲爆底价').next().html('登录可见');
    
                }
    
                $('.shangpin_list li a').click(function(e) {
                    if(c_user) {
                        if($.cookie('user_base_id') != undefined) {
                            location.reload();
                            e.preventDefault();
                        }
                    }
                });
            }
    };
    $(function() {
        //懒加载-s
        jiaju.lazy_tt = setTimeout(function() {
            $(".lazy_img").lazyload(jiaju.lazy);
            clearTimeout(jiaju.lazy_tt);
        }, 300);
        //懒加载-e
        //fastclick-s
        window.addEventListener('load', function() {
            FastClick.attach(document.body);
        }, false);
        //fastclick-e
        //添加loading模块/S
        $("<section id='ajax_loading'><div><i></i></div></section>").appendTo('body');
        document.getElementById("ajax_loading").addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);
        //添加loading模块/E
        //警告框-s
        $('<section id="warn" class="change_fixed no_touch"><span class="warn"><i class=" iconfont"></i><em></em></span></section>').appendTo('body');
        $('<section id="input_bug">').appendTo('body');
        $('.no_touch').each(function(index, obj) {
            obj.addEventListener('touchmove', function(e) {
                e.preventDefault();
            }, false);
        });
        //警告框-e
        //菜单/s
        jiaju.meun_img_flag = true;
        jiaju.meun_flag = false;
        $('body').on('click', '#meun_icon', function() {
            if (jiaju.meun_flag) {
                return false;
            }
            var $_this = $(this);
            if ($_this.hasClass('on')) {
                $('.top-hrefs').show();
                $('.close_view').show();
                if(jiaju.view_show){
                    $('.top-hrefs').hide();
                }
                $_this.removeClass('on')
                $('#public_meun').removeClass('zoom_big').addClass('zoom_small');
                $('div.black_block').stop().fadeOut();
                jiaju.view_scroll();
                jiaju.meun_flag = true;
                var tt = setTimeout(function() {
                    $('#public_meun').hide();
                    $('#public_meun').addClass('zoom_big').removeClass('zoom_small');
                    jiaju.meun_flag = false;
                    clearTimeout(tt);
                }, 500)
            } else {
                $('#public_meun').show(); 
                $('.top-hrefs').hide();
                $('.close_view').hide();
                $('div.black_block').stop().fadeIn();
    
                jiaju.meun_flag = true;
                var tts = setTimeout(function() {
                    jiaju.view_no_scroll();
                    jiaju.meun_flag = false;
                    clearTimeout(tts);
                }, 500);
                if (jiaju.meun_img_flag) {
                    jiaju.meun_img_flag = false;
                    $('#public_meun .lazy_img').lazyload(jiaju.lazy);
                }
                $_this.addClass('on');
            }
        });
        //菜单/e
        //footer高度/s
        $('footer').height($('.footer').height()+30);
        //footer高度/e 
        //input_close/s
        jiaju.input_tt = '';
        jiaju.location_flag = true;
        $(document).on('click', '.input i.icon-guanbi', function() {
            $(this).removeClass('has_close').siblings('input').val('');
        });
        $(document).on('input', '.input input', function() {
            if ($(this).val()) {
                $(this).siblings('i.icon-guanbi').addClass('has_close');
            } else {
                $(this).siblings('i.icon-guanbi').removeClass('has_close');
            }
        }).on('focus', '.input input', function() {
            if ($(this).val()) {
                $(this).siblings('i.icon-guanbi').addClass('has_close');
            } else {
                $(this).siblings('i.icon-guanbi').removeClass('has_close');
            };
        }).on('blur', '.input input', function() {
            var $this = $(this);
            if (jiaju.input_tt) {
                clearTimeout(jiaju.input_tt);
            };
            jiaju.input_tt = setTimeout(function() {
                $this.siblings('i.icon-guanbi').removeClass('has_close');
            }, 400);
        }).on('focus', '#word', function(e) {
            $('#input_bug').show();
            $('section.search_hot').addClass('search_font');
            jiaju.view_no_scroll();
            window.scrollTo(0, 0);
            $('#public_title').css('position', 'absolute');
            var $this = $(this);
        }).on('blur', '#word', function() {
            $('#public_title').css('position', 'fixed');
            jiaju.view_scroll();
            $('#input_bug').hide();
            $('section.search_hot').removeClass('search_font');
        }).on('click','.need_href',function(e){
            e.preventDefault();
            location.href=$(this).attr('href');
            return false;
        });
        //input_close/e
        //判断平台-s
        if (!(navigator.userAgent).match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
            jiaju.system = 'android';
        }
        //判断平台-e
        //hearder search-s
        $('#public_search_input').on('click', '.search_select', function() {
            $('.select_list_body').show();
        }).on('click', '.select_list_body', function() {
            $(this).hide();
        }).on('click', '.public_share', function() {});
        $('#public_search_input').on('click', '.search_select_list span', function() {
            $('.search_select i.selected').html($(this).html());
            $('#public_search_input').attr('action', $(this).attr('data-href')).find('#search_select option').val($(this).attr('data-action'));
            $('input#word').focus();
            $('section.search_hot div').stop().hide().eq($(this).index()).fadeIn();
        });
        $('#public_search_input').submit(function(e) {
            if ($.trim($('#word').val()) == '') {
                e.preventDefault();
            }
        });
        //hearder search-e
        //返回箭头-s
        $('body').on('click', '.url_back', function() {
            history.go(-1);
        });
        //返回箭头-e
        //返回顶部s
        $('<div class="go_top iconfont icon-fanhuidingbu"></div>').appendTo('body').click(function() {
            $('html,body').stop().animate({
                scrollTop: 0
            }, 500);
        }); //返回顶部e
        var $go_top = $('.go_top');
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $go_top.show();
            } else {
                $go_top.hide();
            }
        });
        //返回顶部e
        var now_title = $('body').attr('data-title');
        if (page_title) {
            $('#title_title1 div').html(page_title).show();
        } else {
            $('#title_title1 div').html(now_title).show();
        };
        $('body').on('touchmove','#notie-select-background',function(e){
            e.preventDefault();
        });
        //菜单登录是否/s
        if ($.cookie('user_base_id')) {
            var now_login = $('.logins').eq(1);
            now_login.addClass('on').find('img').attr('data-original', $.cookie('imgfile'));
            now_login.find('.ellipsis i').html($.cookie('nickname'));
            now_login.find('.button').click(function() {
                jiaju.show_loading();
                $.ajax({
                    type: "get",
                    async: false,
                    url: "http://service.jiajuol.com/ajax/ajaxUserCtl.php",
                    dataType: "jsonp",
                    success: function(data) {
                        jiaju.hide_loading();
    
                        if (data.status == 200) {
                            window.location.href = 'http://m.jiajuol.com';
                        } else {
                            layer.alert(data.msg);
                        }
                    },
                    error: function() {
                        //alert('fail');
                    }
                });
            })
            }
            else {
                $('.logins').eq(0).addClass('on');
            }
            //菜单登录是否/e
    });
    
    //临时头尾
    if (window.location.href.indexOf('m.jiajuol.com') < 0) {
        $('<div/>').load('public/header.html', function() {
            $('#title_title1').html(document.title)
        }).prependTo("body");
        $('<div/>').load('public/footer.html').appendTo("body");
    }
    // 顶部分类筛选
    ;(function() {
        var $layer = $('.catTab .tabLayer');
        $('.catTab').on('click', 'li', function() {
            var index = $(this).index(),
                $this = $(this)
            if ($this.hasClass('active')) {
                $this.removeClass('active');
                $layer.hide(0, function() {
                    $(this).children("div").hide(0);
                });
                $('#catTab_black').hide();
            } else {
                $this.addClass('active').siblings().removeClass('active');
                $layer.children('div').eq(index).siblings('div').hide(0).end().show(0, function() {
                    $layer.show();
                });
                $('#catTab_black').show();
            };
        });
        $layer.on('click', 'div a', function() {
            $(this).addClass('active').siblings('a').removeClass('active');
        });
        $('#catTab_black').on('touchmove', function() {
            $('.catTab li').removeClass('active');
            $layer.hide(0, function() {
                $(this).children("div").hide(0);
            });
            $('#catTab_black').hide();
        })
    })();
    /*
      @ Name:图片上传依赖jquery.form
      @ Author:xusl
      @ date:2016-8-29
      @ example:
        $('.imgUpload').imgUpload({
            url:'http://172.0.0.1:8000',
            data:{},
            before:function(e){      //e:当前对象
                alert('上传开始...');
                //return false //如果返回false则不进行上传
            },
            success:function(e,data){   //e:当前对象,data:返回的完整数据
                alert('上传完毕...');
            },
            error:function(e){      //e:当前对象
                alert('接口异常!');
            }
        });
    */
    (function($) {
        $.fn.imgUpload = function(opt) {
            var $this = $(this);
            var $form = $('<form method="post" enctype="multipart/form-data"><input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" name="file"></form>');
            $this.click(function(event) {
                var _self=$(this);
                if(_self.hasClass('disabled')){
                    return;
                }
                $form[0].reset();
                $form.find(':file').one('change', function(ev) {
                    _self.addClass('disabled');
                    // 加载开始执行回调
                    if (typeof opt.before == 'function') {
                        if(opt.before($this,ev)===false){
                            return;
                        }
                    }
                    //上传中
                    var options = {
                        url: opt.url,
                        dataType: "json",
                        data: opt.data ? opt.data : {},
                        success: function(data) {
                            //成功上传执行回调
                            opt.success($this,data);
                            _self.removeClass('disabled');
                        },
                        error: function(e) {
                            //接口异常执行回调
                            if (typeof opt.error == 'function') {
                                opt.error($this);
                            }
                            _self.removeClass('disabled');
                        }
                    }
                    $form.ajaxSubmit(options);
                }).trigger('click');
            });
        }
    })(jQuery);
    
    

    相关文章

      网友评论

          本文标题:项目中常用到的js方法整理

          本文链接:https://www.haomeiwen.com/subject/wxqnyttx.html