笔记-JS：Window

ylbtech-笔记-JS：Window

1.返回顶部

1、happy.js

;
(function () {
    var happyUi = {
        initHappy: function (type) {
            utils.isLogin(type, function () {
                utils.getRequest("tag", {type: "kx", _type: "query"}, function (d) {
                    $("[category]").empty().html('<a class="mui-control-item mui-active" href="javascript:void(0)">全部</a>');
                    $(d.Data.Collection).each(function (i, item) {
                        $("[category]").append('<a class="mui-control-item" href="javascript:void(0)" category-id="' + item.Id + '">' + item.Name + '</a>');
                    });
                    var pullRefresh = utils.pullRefresh($("#pullrefresh"), $("#dataList"), "happytimes", "happytimes/list", function () {
                        var params = {};
                        params.tagId = $("#top-tabs a.mui-active").attr("category-id");
                        return params;
                    });

                    $(document).on("tap", "#top-tabs a", function () {
                        $("#top-tabs a").removeClass("mui-active");
                        $(this).addClass("mui-active");
                        pullRefresh.opts.loadUpFn(pullRefresh);
                    });
                })
            });

            //点击跳转到详情
            $(document).on("tap", "[data-id]", function (event) {
                event.stopPropagation();
                event.preventDefault();
                var id = $(this).attr("data-id");
                var href = "/m/service/happytimes/detail.html?id=" + id;
                mui.openWindow(href, href);
            });

            //记录当前点击的位置
            $("#pullrefresh").unbind("scroll").on("scroll", function () {
                if ($("#pullrefresh").scrollTop() > 10) {
                    sessionStorage.setItem("offsetTop", $("#pullrefresh").scrollTop());//保存滚动位置
                }
            });
            //返回的时候获取位置信息
            window.onload = function () {
                var _offset = sessionStorage.getItem("offsetTop");
                if (_offset > 10) {
                    setTimeout(function () {
                        $("#pullrefresh").scrollTop(_offset);
                    }, 10);
                }
            };
        },
        initDetail: function (type) {
            utils.isLogin(type, function () {
                var id = $.getUrlParam("id");
                if (!id) {
                    return;
                }
                utils.getRequest('happytimes/{0}'.format(id), {}, function (d) {
                    $("#dataDetail").html(template("happytimes/detail", d.Data || {}));
                    var comment = $.cookie("comment");
                    if(!utils.isNull(comment)){
                        $("#reply").val(comment);
                    }
                });

                $("#reply").on("tap", function () {
                    var href = "/m/service/happytimes/comment.html";
                    mui.openWindow(href, href);
                });

                $("[data-evt='send']").unbind("tap").bind("tap", function () {
                    $.cookie("comment", "");
                    mui.toast("评论成功");
                    $("#reply").val("");
                });
            });
        },
        initComment: function () {
            $("#btnSave").unbind("tap").bind("tap", function () {
                $.cookie("comment", $("#comment").val());
                mui.toast("保存成功");
                setTimeout(function () {
                    mui.back();
                }, 500);
            });
        }
    };
    window.happyUi = happyUi;
})();

2、

2. 添加监听事件返回顶部

1、

            document.getElementById("search").addEventListener('change', function () {
                pageIndex = 0;
                $("#pullrefresh").find(".mui-table-view").html("");
                pulldownRefresh(pullRefresh);
            });

2、

3. 微信端上传图片返回顶部

1、

1.1、

<div style="text-align: center;">
     <a href="javascript:void(0)" class="btn btn-success fileinput-button">
          <img style=" 270px;height: 270px;" id="facepic" class="mui-media-object" src="/img/mfsczp.jpg">
          <input id="upfacepic" type="file" name="files[]">
     </a>
</div>

1.2、

// --begion--上传图片--
// 1/2,必须先通讯 个人信息获取
utils.getRequest("member/GetCurrent", {}, function (d) {
    //$("#memberId").html(d.Data.Id);
});
// 2/2, 上传图片才能启用
utils.uploader({
    browse_button: "upfacepic",
    completeCallback: function (pic) {
        $("#facepic").attr("src", pic);
    }
});
// --end--上传图片--

2、

3、

4.返回顶部

 

5.返回顶部

 

 

6.返回顶部

 

7.返回顶部

 

8.返回顶部

 

9.返回顶部

 

10.返回顶部

 

 

11. 上传图片返回顶部

1、

<div class="Fileupload col-sm-9">
    <div class="imgView image">
        <span class="delete-b" id="delete-a" style=" float:right; color:red;">[删除]</span>
        <div class="pic mypic">
        <img style="margin-left:10px;max-145px;max-height:130px" alt="" data-img="" src="/doc/x_bgimg/2018/03-20/240d463fa50e45e38886d238dc8fddc5.jpg">
        </div>
    </div>
    <a class="upload btn-pic"> <input id="addimg25645" type="file" name="files[]" class="change">添加图片</a>
</div>

2、

12.返回顶部

1、更改头像

 <div id="modifyPic" class="mui-page">
        <header class="mui-bar mui-bar-nav">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav" style="color: white;"></span><span style="color: white;">更改头像</span>
            </button>
        </header>
        <div class="mui-scroll-wrapper">
            <div style="text-align: center; margin-top: 60px;">
                <a href="javascript:void(0)" class="btn btn-success fileinput-button">
                    <img style=" 270px;height: 270px;" id="facepic" class="mui-media-object" src="/img/mfsczp.jpg">
                    <input id="upfacepic" type="file" name="files[]">
                </a>
            </div>

            <div style="position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;">
                <p style="text-align: center; margin-top: 20px;">
                    <a class="btn   hvr-grow" id="btnImg" style="padding:5px 15px;font-size:18px;box-shadow:none;background-color:#c83728;color:#fff;30%;border-radius: 0px;"><strong>保存头像</strong></a>
                </p>
            </div>
        </div>

    </div>

2、

//更改头像
    if (!utils.isNull($.cookie("memberface"))) {
        $("#head-img").attr("src", $.cookie("memberface"));
        $("#facepic").attr("src", $.cookie("memberface"));
    }
    utils.uploader({
        browse_button: "upfacepic",
        completeCallback: function (pic) {
            $("#facepic").attr("src", pic);
        }
    });

    $(document).on("tap", "#btnImg", function () {
        if ($("#facepic").attr("src") == "/img/mfsczp.jpg") {
            mui.toast("请上传头像！");
            return false;
        }
        var btnObj = this;
        utils.postRequest("member/updateface", { facepic: $("#facepic").attr("src") }, function (d) {
            $.cookie("memberface", $("#facepic").attr("src"));
            $("#head-img").attr("src", $.cookie("memberface"));
            mui.toast("保存成功");
            setTimeout(function () {
                mui.back();
            }, 500);
        }).always(function (d) {
            mui(btnObj).button("reset");
        });
    })

3、

initUpload();
                function initUpload() {
                    utils.uploader({
                        browse_button: 'FileSrc', completeCallback: function (d) {
                            $('#OriginalSrc').attr('href', d);
                            $('[data-FileSrc]').attr('src', d);
                        }
                    });
                };

4、

 initUpload();
            function initUpload() {
                utils.uploader({
                    browse_button: 'FileSrc', completeCallback: function (d) {
                        $('#OriginalSrc').attr('href', d);
                        $('[data-FileSrc]').attr('src', d);
                    }
                });
            };

5、

13. 搜索返回顶部

1、

 utils.isLogin(type, function () {
                var vague = $.getUrlParam("vague");
                if (vague) {
                    $("#vague").val(vague);
                }
                var pullRefresh = utils.pullRefresh($("#pullrefresh"), $("#dataList"), "mystory", "mystory/list", function () {
                    var params = {};
                    params.vague = $.trim($("#vague").val());
                    params.Status = 1;
                    return params;
                });

                $(document).on("tap", "#top-tabs a", function () {
                    $("#top-tabs a").removeClass("mui-active");
                    $(this).addClass("mui-active");
                    pullRefresh.opts.loadUpFn(pullRefresh);
                });
            });

            // 搜索
            $("[data-evt='search']").unbind("click").click(function () {                
                var vague = $.trim($("#vague").val());
                if (vague.length > 0)
                {
                    var href = "/m/service/mystory/index.html?vague=" + vague;
                    mui.openWindow(href, href);
                }
                else {
                    var href = "/m/service/mystory/index.html";
                    mui.openWindow(href, href);
                }
            });

2、

14. 日期返回顶部

1、日期格式

{{dateFormat(CreateTime, 'yyyy年MM月dd日')}}

2、时间段

{{dateDiff(item.CreateTime)}}

3、

15.返回顶部

 

 

16.返回顶部

 

作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。