title: UIkit tabs and switcher do not work after partial refresh
body: <p>Ok, this is a bit special. We are using UIkit in our XPages application. We also use the tabs and switcher component (<a href="http://getuikit.com/docs/tab.html" rel="nofollow">http://getuikit.com/docs/tab.html</a> and <a href="http://getuikit.com/docs/switcher.html" rel="nofollow">http://getuikit.com/docs/switcher.html</a>).
  They work fine until we do a partial refresh of the page. The reason is that those components are initiliazed only once after the pages is loaded. This happens directly in the lib we bind to the page - no own init script etc.
  After the refresh I must re-init the whole stuff - but I am not familiar with the syntax or even the possibilities.
  I searched the UIkit lib though and found something like this:</p>
  
  <pre><code>(function(UI) {
  
  "use strict";
  
  UI.component('tab', {
  
      defaults: {
          'target'    : '&gt;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 &amp;&amp; $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.$('&lt;li class="uk-tab-responsive uk-active"&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;').append('&lt;div class="uk-dropdown uk-dropdown-small"&gt;&lt;ul class="uk-nav uk-nav-dropdown"&gt;&lt;/ul&gt;&lt;div&gt;');
  
          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"    : "&gt;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 &gt; top) {
                  doresponsive = true;
              }
          });
  
          if (doresponsive) {
  
              for (var i = 0; i &lt; children.length; i++) {
  
                  item = UI.$(children.eq(i));
                  link = item.find('a');
  
                  if (item.css('float') != 'none' &amp;&amp; !item.attr('uk-dropdown')) {
  
                      item.addClass('uk-hidden');
  
                      if (!item.hasClass('uk-disabled')) {
                          this.responsivetab.lst.append('&lt;li&gt;&lt;a href="'+link.attr('href')+'" data-index="'+i+'"&gt;'+link.html()+'&lt;/a&gt;&lt;/li&gt;');
                      }
                  }
              }
          }
  
          this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeClass':'addClass']('uk-hidden');
      }
  });
  })(UIkit);
  </code></pre>
  
  <p>Similar code is created for the connected switcher component. </p>
  
  <p><strong>You can see a demo of my problem here: <a href="http://notesx.net/customrenderer.nsf/demo.xsp" rel="nofollow">http://notesx.net/customrenderer.nsf/demo.xsp</a></strong></p>
  
  <p>Source code here: <a href="https://github.com/zeromancer1972/CustomRendererDemo/blob/master/ODP/XPages/demo.xsp" rel="nofollow">https://github.com/zeromancer1972/CustomRendererDemo/blob/master/ODP/XPages/demo.xsp</a></p>
  
  <p>As this is part of the library itself I'd like to find a way to call this from outside the library.</p>
  
  <p>Any ideas are highly appreciated!</p>