jq插件通过require调用

//配置文件
(function () {

    var config = {
        'baseUrl': './'
    };

    require.config(config);

    define('app', function () {
        return angular.module('angular-require', [
            'ui.router',
            'ngRequire',
            'infinite-scroll'
        ]).config([
            '$stateProvider',
            '$urlRouterProvider',
            '$locationProvider',
            '$requireProvider',
            function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {

                var requireJS = $requireProvider.requireJS;
                var requireCSS = $requireProvider.requireCSS;

                $locationProvider.html5Mode(false);

                $urlRouterProvider.otherwise('homepage');

                $stateProvider.state('homepage', {
                    url: '/homepage',
                    templateUrl: 'views/homepage.html',
                    controller: 'homepage as vm',
                    resolve: {
                        deps: requireJS([
                            'controllers/homepage',
                            'js/factory'
                        ]),
                        css: requireCSS([
                            'style!css/homepage'
                        ])
                    }
                });
                $stateProvider.state('communication', {
                    url: '/communication/?:id',
                    templateUrl: 'views/communication.html',
                    params:{id:null},
                    controller: 'communication as vm',
                    resolve: {
                        deps: requireJS([
                            'lib/fixed',
                            'lib/transform',
                            'lib/alloy_touch.css',
                            'controllers/communication',
                            'js/factory',

                            'lib/photoswipe.min',
                            'lib/photoswipe-ui-default.min',
                            'js/photo_swipe_do',

                           /* 'js/communication'*/
                        ]),
                        css: requireCSS([
                            'style!css/communication',
                            'style!css/photoswipe',
                            'style!css/top',
                            'style!css/footer'
                        ])
                    }
                });
                $stateProvider.state('user_communication', {
                    url: '/user_communication',
                    templateUrl: 'views/user_communication.html',
                    controller: 'user_communication as vm',
                    resolve: {
                        deps: requireJS([
                            'lib/fixed',
                            'lib/transform',
                            'lib/alloy_touch.css',
                            'controllers/user_communication',
                            'js/factory'
                        ]),
                        css: requireCSS([
                            'style!css/user_communication',
                            'style!css/top',
                            'style!css/footer'
                        ])
                    }
                });
                $stateProvider.state('PostNews', {
                    url: '/PostNews',
                    templateUrl: 'views/PostNews.html',
                    controller: 'PostNews as vm',
                    resolve: {
                        deps: requireJS([
                            'lib/fixed',
                            'controllers/PostNews',
                            'js/factory'
                        ]),
                        css: requireCSS([
                            'style!css/PostNews',
                            'style!css/top',
                            'style!css/footer'
                        ])
                    }
                });
            }
        ])
    });
})();    

clipboard.png

//插件初始化
window.initPhotoSwipeFromDOM = function(gallerySelector) {
    var parseThumbnailElements = function(el) {
        var thumbElements = el.childNodes,
            numNodes = thumbElements.length,
            items = [],
            figureEl,
            linkEl,
            size,
            item;

        for(var i = 0; i < numNodes; i++) {

            figureEl = thumbElements[i];

            if(figureEl.nodeType !== 1) {
                continue;
            }

            linkEl = figureEl.children[0];
            size = linkEl.getAttribute('data-size').split('x');

            item = {
                src: linkEl.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10)
            };



            if(figureEl.children.length > 1) {
                item.title = figureEl.children[1].innerHTML;
            }

            if(linkEl.children.length > 0) {
                item.msrc = linkEl.children[0].getAttribute('src');
            }

            item.el = figureEl;
            items.push(item);
        }

        return items;
    };

    var closest = function closest(el, fn) {
        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
    };

    var onThumbnailsClick = function(e) {
        e = e || window.event;
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var eTarget = e.target || e.srcElement;

        var clickedListItem = closest(eTarget, function(el) {
            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
        });

        if(!clickedListItem) {
            return;
        }

        var clickedGallery = clickedListItem.parentNode,
            childNodes = clickedListItem.parentNode.childNodes,
            numChildNodes = childNodes.length,
            nodeIndex = 0,
            index;

        for (var i = 0; i < numChildNodes; i++) {
            if(childNodes[i].nodeType !== 1) {
                continue;
            }

            if(childNodes[i] === clickedListItem) {
                index = nodeIndex;
                break;
            }
            nodeIndex++;
        }



        if(index >= 0) {
            openPhotoSwipe( index, clickedGallery );
        }
        return false;
    };

    var photoswipeParseHash = function() {
        var hash = window.location.hash.substring(1),
            params = {};

        if(hash.length < 5) {
            return params;
        }

        var vars = hash.split('&');
        for (var i = 0; i < vars.length; i++) {
            if(!vars[i]) {
                continue;
            }
            var pair = vars[i].split('=');
            if(pair.length < 2) {
                continue;
            }
            params[pair[0]] = pair[1];
        }

        if(params.gid) {
            params.gid = parseInt(params.gid, 10);
        }

        return params;
    };

    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
            gallery,
            options,
            items;

        items = parseThumbnailElements(galleryElement);
        options = {

            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

            getThumbBoundsFn: function(index) {
                var thumbnail = items[index].el.getElementsByTagName('img')[0],
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect();

                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }

        };

        if(fromURL) {
            if(options.galleryPIDs) {
                for(var j = 0; j < items.length; j++) {
                    if(items[j].pid == index) {
                        options.index = j;
                        break;
                    }
                }
            } else {
                options.index = parseInt(index, 10) - 1;
            }
        } else {
            options.index = parseInt(index, 10);
        }

        if( isNaN(options.index) ) {
            return;
        }

        if(disableAnimation) {
            options.showAnimationDuration = 0;
        }

        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    };

    var galleryElements = document.querySelectorAll( gallerySelector );

    for(var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i+1);
        galleryElements[i].onclick = onThumbnailsClick;
    }

    var hashData = photoswipeParseHash();
    if(hashData.pid && hashData.gid) {
        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
    }
};
//使用
<section ng-init="vm.communication()" class="communication">
    <section class="top-section">
        <section id="fixedTop" class="block-1 xh-full-container">
            <div id="firstBackground" class="first-background xh-transition" style="background:url({{vm.post.coverUrl}})"></div>
            <div class="one-group-btn">
                <button type="button" class="xh-btn back" ng-click="vm.back()"></button>
                <button type="button" class="xh-btn share"></button>
            </div>
            <div class="one-content xh-background-fff xh-size0">
                <div id="fix" layout="row vertical">
                    <div class="topic-img xh-inblock">
                        <img ng-src="{{}}" alt=""/>
                    </div>
                    <span>{{vm.post.period}}</span>
                    <span class="xh-inblock dot">▪</span>
                    <span class="xh-inblock joinCount">{{vm.post.joinCount+'人参与'}}</span>
                    <span>{{vm.post.begin+' 开始'}}</span>
                </div>
            </div>
        </section>
        <section class="block-2">
            <div class="two-content xh-background-fff xh-text-center">
                <p id="limitText" class="checkLimit xh-size28  over-flow-2 xh-text-left" data-over="2">
                    {{vm.post.summary}}
                </p>
                <button class="over-flow-btn btn" type="button" onclick="checkLimitText(this)"
                        ng-click="vm.checkLimitText($event)"><i></i></button>
            </div>
        </section>
    </section>
    <section class="block-3 xh-relative">
        <section id="wrapper">
            <section id="scroller">
                <ul id="postList" class="three-content  xh-text-left">
                </ul>
            </section>
        </section>
    </section>
    <footer class="footer xh-relative">
        <ul id="footerFix" class="footer-tab tranform-horizontal-center floatfix">
            <li class="pull-left">
                <a class="xh-color-000 xh-size28">
                    <i class="xh-inblock"></i>
                    <span class="xh-inblock">热议话题</span>
                </a>
            </li>
            <li class="tranform-horizontal-center">
                <a class="xh-color-8b8b8b xh-size28">
                    <i class="xh-inblock"></i>
                    <span class="xh-inblock">参与讨论</span>
                </a>
            </li>
            <li class="pull-right">
                <a class="xh-color-8b8b8b xh-size28">
                    <i class="xh-inblock"></i>
                    <span class="xh-inblock">相关阅读</span>
                </a>
            </li>
        </ul>
    </footer>
</section>
<script type="text/template" id="postMoke">
    <li class="three-content-item xh-marginTop-30 xh-background-fff" data-sId="{{sId}}" id="{{id}}" data-oid="{{oid}}">
        <div class="three-body xh-size0" layout="row vertical">
            <img src="{{icon}}" alt=""/>
            <span class="xh-size30">{{name}}</span>
            <span class="xh-size30">-</span>
            <span class="xh-size30">{{tag}}</span>
        </div>
        <div class="three-footer xh-text-center">
            <p class="checkLimit xh-marginTop-40 xh-color-000 xh-text-left over-flow-6" data-over="6">
                {{content}}
            </p>
            <button class="over-flow-btn btn" type="button" onclick="checkLimitText(this)" ng-click="vm.checkLimitText($event)"><i></i></button>
            <div class="xh-marginTop-30 gallery xh-text-left">
                {{postParticipator.images}}
            </div>
            <label class="xh-color-797878 xh-paddingTop-30 xh-size24 xh-block xh-text-left">{{time}}</label>
        </div>
    </li>
</script>
<script type="text/template" id="imgMoke">
    <figure class="xh-inline">
        <a href="{{image}}" data-size="1672x1020">
            <img src="{{image}}" alt="" data-pin-nopin="true">
        </a>
    </figure>
</script>
<script>
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();
    //=========================================================滚动=====================================================
    var postList = $("#postList"),
        postMoke = $("#postMoke"),
        postTop = $("#firstBackground")[0];
        scroller = $("#scroller")[0],
        height = $(".first-background").height(),
        loading = false,
        id = kit.getEncodeParam('id') || kit.getUrlParam('id');
        alloyTouch = null;

        Transform(scroller, true);
        Transform(postTop);
        postTop.originY = -70;
        postTop.translateY = -70;
        loadMore();

    alloyTouch = new AlloyTouch({
        touch: "#wrapper",
        vertical: true,
        target: scroller,
        property: "translateY",
        maxSpeed: 2,
        outFactor: 0.2,
        min: 160 * -20 + window.innerHeight - 202 - 50,
        max: 0,
        touchStart: function () {
            reastMin();
        },
        lockDirection: false,
        change: function (v) {
            if (v > 70) {

            } else {

            }
            if (v <= this.min + 5 && !loading) {
                loading = true;
                loadMore();
            }
            if (v < 0) {
                $(".first-background").css({
                    'height': height / 3
                })
            } else {
                $(".first-background").css({
                    'height': height
                })
            }
        },
        touchEnd: function (evt, value) {
            /* if (value > 70) {
             this.to(70);
             mockRequest(this);
             pull_refresh.classList.add('none');
             return false;
             }*/
        }
    });
    //=========================================================数据加载=================================================
    function loadMore() {
        var mockHTML = postMoke.html();
        setTimeout(function () {
            $.ajax({
                type: 'post',
                url: window.WHDAPP.ApiAddress.GetPostComments,
                data: {
                    postId: id,
                    lastPostCommentId: $("#postList li:last").data('oid'),
                    from: "PostParticipator",
                    maxResultCount: 3
                },
                success: function (response) {
                    var data = response.result;
                    console.log(data);
                    if (data.length > 0) {
                        var html = '';
                        var te=["http://hbfile.b0.upaiyun.com/img/home/banner/166eb0cb296085fc4d75c14bd1dbf32af400d94cb1f64","http://hbfile.b0.upaiyun.com/img/home/banner/a75d948ab49f8edb8ce32f1be0bb85f7b33a328c342bf"];
                        var imagesTpl = $("#imgMoke").html();
                        for (var i = 0; i < data.length; i++) {
                            var buildImages = (function() {
                                var result = '';
                                result+= imagesTpl.replace(/{{image}}/g,te[0]);
                                result+= imagesTpl.replace(/{{image}}/g,te[1]);
                                return result;
                                /*if (data[i].images && data[i].images.length <= 0)
                                    return '';
                                else {
                                    var result = '';
                                    for (var j = 0; j < data[i].images.length; j++) {
                                        result += imagesTpl.replace(/{{image}}/g, data.images[j]||te);
                                    }
                                    return result;
                                }*/
                            })();
                            html += mockHTML.replace(/{{content}}/g, data[i].content)
                                .replace(/{{id}}/g, data[i].id)
                                .replace(/{{oid}}/g, data[i].id)
                                .replace(/{{postParticipator.images}}/g, buildImages)
                                .replace(/{{time}}/g, moment(data[i].creationTime).startOf('hour').fromNow())
                                .replace(/{{icon}}/g, window.WHDAPP.getRealUri(data[i].sender.avatar))
                                .replace(/{{sId}}/g, data[i].sender.id)
                                .replace(/{{name}}/g, data[i].sender.name)
                                .replace(/{{tag}}/g, function () {
                                    if (data[i].sender.from === "PostParticipator") {
                                        return data[i].sender.tag
                                    }
                                });
                        }
                        postList.append(html);
                        loading = false;
                        reastMin();//重新设置最小高度
                        initCheckLimitText();//初始化检查文字是否过多的
                        initPhotoSwipeFromDOM('.gallery');
                    }
                }
            });
        }, 500)
    }
    function reastMin() {
        alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
    }
    document.addEventListener("touchmove", function (evt) {
        evt && evt.preventDefault();
    }, false);

    //===================================================动态dom元素事件================================================
    window.checkLimitText = function (obj) {
        var target = $(obj);
        var prev = target.prev('p.checkLimit');
        var limit = prev.data('over');
        var lines = lookLines(prev);
        if (lines >= limit) {
            target.addClass('none');//触发的按钮
            prev.removeClass('over-flow-' + limit); //需要移除class的ele
        }
    };
    //==================================================普通方法========================================================
    function initCheckLimitText() {
        var chekLimit = $('p.checkLimit').each(function () {
            var _this = $(this);
            var nextBtn = _this.next('button.over-flow-btn');
            var lines = lookLines(_this);
            var limit = _this.data('over');
            if (lines < limit) {
                nextBtn.addClass('none');
            }
        });
    }
    function lookLines(obj) {
        var lines = window.kit.getLines(obj[0]);
        return lines;
    }
</script>
<script>
    //===========================================================通知===================================================
    var postCommentActionType = {
        New: 0,
        Delete: 1,
        SwitchOrder: 2,
        Locked: 3
    };
    $(document).ready(function () {
        abp.event.on('post.event', function (data) {
            abp.log.debug(data);

            /*if (parseInt(data.actionType) == postCommentActionType.New && data.sender.from == 'PostParticipator') {
                var mockHTML = postMoke.html();
                if (data.length > 0) {
                    var html = '';
                    for (var i = 0; i < data.length; i++) {
                        html += mockHTML.replace(/{{content}}/g, data[i].content)
                            .replace(/{{id}}/g, data[i].id)
                            .replace(/{{oid}}/g, data[i].id)
                            .replace(/{{time}}/g, moment(data[i].creationTime).startOf('hour').fromNow())
                            .replace(/{{icon}}/g, window.WHDAPP.getRealUri(data[i].sender.avatar))
                            .replace(/{{sId}}/g, data[i].sender.id)
                            .replace(/{{name}}/g, data[i].sender.name)
                            .replace(/{{tag}}/g, function () {
                                if (data[i].sender.from === "PostParticipator") {
                                    return data[i].sender.tag
                                }
                            });
                    }
                    postList.prepend(html);
                }
            }*/
        });
    });
</script>

是在ajax提交结束过后 执行的插件方法
clipboard.png

问题是:
clipboard.png

阅读 5.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进