javascript - UIkit tabs and switcher do not work after partial refresh -
ok, bit special. using uikit in our xpages application. use tabs , switcher component (http://getuikit.com/docs/tab.html , http://getuikit.com/docs/switcher.html). work fine until partial refresh of page. reason components initiliazed once after pages loaded. happens directly in lib bind page - no own init script etc. after refresh must re-init whole stuff - not familiar syntax or possibilities. searched uikit lib though , found this:
(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) { (var = 0; < 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);
similar code created connected switcher component.
you can see demo of problem here: http://notesx.net/customrenderer.nsf/demo.xsp
source code here: https://github.com/zeromancer1972/customrendererdemo/blob/master/odp/xpages/demo.xsp
as part of library i'd find way call outside library.
any ideas highly appreciated!
newer versions of uikit have init method, upgrade , call oncomplete event of combo box.
<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>
Comments
Post a Comment