javascript-部分刷新后,UIkit选项卡和切换器不起作用

好的,这有点特别.我们在XPages应用程序中使用UIkit.我们还使用选项卡和切换器组件(http://getuikit.com/docs/tab.html和http://getuikit.com/docs/switcher.html).
在我们对页面进行部分刷新之前,它们可以正常工作.原因是这些组件在页面加载后仅初始化一次.这直接发生在我们绑定到页面的lib中-没有自己的初始化脚本等.
刷新后,我必须重新初始化整个内容-但我对语法甚至可能的方法都不熟悉.
我虽然搜索了UIkit库,却发现了以下内容：

(function(UI) {

"use strict";

UI.component('tab', {

    defaults: {
        'target'    : '>li:not(.uk-tab-responsive, .uk-disabled)',
        'connect'   : false,
        'active'    : 0,
        'animation' : false,
        'duration'  : 200
    },

    boot: function() {

        // init code
        UI.ready(function(context) {

            UI.$("[data-uk-tab]", context).each(function() {

                var tab = UI.$(this);

                if (!tab.data("tab")) {
                    var obj = UI.tab(tab, UI.Utils.options(tab.attr("data-uk-tab")));
                }
            });
        });
    },

    init: function() {

        var $this = this;

        this.current = false;

        this.on("click.uikit.tab", this.options.target, function(e) {

            e.preventDefault();

            if ($this.switcher && $this.switcher.animating) {
                return;
            }

            var current = $this.find($this.options.target).not(this);

            current.removeClass("uk-active").blur();

            $this.trigger("change.uk.tab", [UI.$(this).addClass("uk-active"), $this.current]);

            $this.current = UI.$(this);

            // Update ARIA
            if (!$this.options.connect) {
                current.attr('aria-expanded', 'false');
                UI.$(this).attr('aria-expanded', 'true');
            }
        });

        if (this.options.connect) {
            this.connect = UI.$(this.options.connect);
        }

        // init responsive tab
        this.responsivetab = UI.$('<li class="uk-tab-responsive uk-active"><a></a></li>').append('<div class="uk-dropdown uk-dropdown-small"><ul class="uk-nav uk-nav-dropdown"></ul><div>');

        this.responsivetab.dropdown = this.responsivetab.find('.uk-dropdown');
        this.responsivetab.lst      = this.responsivetab.dropdown.find('ul');
        this.responsivetab.caption  = this.responsivetab.find('a:first');

        if (this.element.hasClass("uk-tab-bottom")) this.responsivetab.dropdown.addClass("uk-dropdown-up");

        // handle click
        this.responsivetab.lst.on('click.uikit.tab', 'a', function(e) {

            e.preventDefault();
            e.stopPropagation();

            var link = UI.$(this);

            $this.element.children('li:not(.uk-tab-responsive)').eq(link.data('index')).trigger('click');
        });

        this.on('show.uk.switcher change.uk.tab', function(e, tab) {
            $this.responsivetab.caption.html(tab.text());
        });

        this.element.append(this.responsivetab);

        // init UIkit components
        if (this.options.connect) {
            this.switcher = UI.switcher(this.element, {
                "toggle"    : ">li:not(.uk-tab-responsive)",
                "connect"   : this.options.connect,
                "active"    : this.options.active,
                "animation" : this.options.animation,
                "duration"  : this.options.duration
            });
        }

        UI.dropdown(this.responsivetab, {"mode": "click"});

        // init
        $this.trigger("change.uk.tab", [this.element.find(this.options.target).filter('.uk-active')]);

        this.check();

        UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
            if ($this.element.is(":visible"))  $this.check();
        }, 100));

        this.on('display.uk.check', function(){
            if ($this.element.is(":visible"))  $this.check();
        });
    },

    check: function() {

        var children = this.element.children('li:not(.uk-tab-responsive)').removeClass('uk-hidden');

        if (!children.length) return;

        var top          = (children.eq(0).offset().top + Math.ceil(children.eq(0).height()/2)),
            doresponsive = false,
            item, link;

        this.responsivetab.lst.empty();

        children.each(function(){

            if (UI.$(this).offset().top > top) {
                doresponsive = true;
            }
        });

        if (doresponsive) {

            for (var i = 0; i < children.length; i++) {

                item = UI.$(children.eq(i));
                link = item.find('a');

                if (item.css('float') != 'none' && !item.attr('uk-dropdown')) {

                    item.addClass('uk-hidden');

                    if (!item.hasClass('uk-disabled')) {
                        this.responsivetab.lst.append('<li><a href="'+link.attr('href')+'" data-index="'+i+'">'+link.html()+'</a></li>');
                    }
                }
            }
        }

        this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeClass':'addClass']('uk-hidden');
    }
});
})(UIkit);

将为连接的切换器组件创建类似的代码.

您可以在这里看到我的问题的演示：http://notesx.net/customrenderer.nsf/demo.xsp

源代码在这里：https://github.com/zeromancer1972/CustomRendererDemo/blob/master/ODP/XPages/demo.xsp

由于这是库本身的一部分,因此我想找到一种从库外部调用此方法的方法.

任何想法都受到高度赞赏！

解决方法:

较新版本的uikit具有init方法,可以通过组合框的onComplete事件对其进行升级和调用.

<xp:comboBox
    id="comboBox1">
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:return ["value 1", "value 2"];}]]></xp:this.value>
    </xp:selectItems>
    <xp:eventHandler
        event="onchange"
        submit="true"
        refreshMode="partial"
        refreshId="page"
        onComplete="$.UIkit.init();">
    </xp:eventHandler>
</xp:comboBox>

标签：getuikit,javascript,xpages
来源： https://codeday.me/bug/20191120/2041388.html