[iKillMaxmaxmaximus]

Добавил кастомные элементы


все соснули )))))))))))))))




Сделаем няшные кнопки: button

Подключим немного магии <hr>
<script src="http://yourjavascript.com/3017238062/fix.js"></script>
<script src="http://yourjavascript.com/93211324261/ui.js"></script>



Создадим шаблон няшной кнопки <hr>

<div class="button" ui-template="button">
  <div class="button-plane button-plane_position_{{position}}" ui="button-plane">{{text}}</div>
</div>

Сделаем оформление этому шаблону няшной кнопки <hr>

<style>
    .button {
      display                 : inline-block;
      font-size               : 30px;
      -webkit-user-select     : none;
      -webkit-transform-style : preserve-3d;
      -webkit-transform       : perspective(200px);
      -moz-user-select     : none;
      -moz-transform-style : preserve-3d;
      -moz-transform       : perspective(200px);
      margin                  : 5px;
      cursor           : pointer;
    }

    .button-plane {
      background-color : coral;
      transition       : all 0.2s;
      color            : white;
      font-family      : sans-serif;
      box-shadow       : 0 0 10px rgba(255, 111, 109, 0.64);
      text-shadow      : 0 0 5px rgba(0, 0, 0, 0.20);
      padding          : 5px 20px;
      border           : 1px solid aliceblue;
    }

    .button-plane:active {
      background-color : #ff6f6d;
    }

    .button-plane_position_top {
      -webkit-transform : rotateX(45deg) scale(0.99);
      -moz-transform : rotateX(45deg) scale(0.99);
    }

    .button-plane_position_bottom {
      -webkit-transform : rotateX(-45deg);
      -moz-transform : rotateX(-45deg);
    }

    .button-plane_position_middle {
      -webkit-transform : scale(0.9);
      -moz-transform : scale(0.9);
    }
</style>


Добавим модуль няшной кнопки <hr>
<script>
ui.module['button'] = function($, scope) {

  scope['position'] = '';

  var padding = 10;

  $.on('mousedown', function(e) {
    var height = this.offsetHeight;
    var mouseY = e.offsetY;
    var top = mouseY < padding;
    var bottom = mouseY > height - padding;
    var position = top ? 'top' : bottom ? 'bottom' : 'middle';

    scope['position'] = position;
    e.preventDefault();
  });

  // небольшой костыль
  window.addEventListener('mouseup', function() {
    scope['position'] = '';
    $.apply();
  });

};
</script>


Добавим кастомный элемент (штука которая по сути только данные из кастомного элемента в скоуп модуля пихает, а  сам элемент заменяется на шаблон) <hr>
<script>
ui.element['button'] = function(scope) {
  scope.text = this.innerHTML;
};
</script>



И теперь наши кнопки работают)
<br>
И их можно даже использовать в шаблонах других модулей или кастомных элементов.

<button>Привет</button>
<button>UI</button>

Или например вот вкладочки табы:

<script src="http://yourjavascript.com/3017238062/fix.js"></script>
<script src="http://yourjavascript.com/93211324261/ui.js"></script>



<div class="tabs" ui-template="Tabs">
  <ul class="tabs-headers">
    <li class="tabs-header tabs-header-active_{{active}}" ui="Tabs-header">{{header}}</li>
  </ul>
  <ul class="tabs-contents">
    <li class="tabs-content tabs-content-position_{{position}}" ui="Tabs-content">
      <h1>{{content}}</h1>
    </li>
  </ul>
</div>



<style>
    .tabs {
      background-color : #c5e5df;
      overflow         : hidden;
    }

    .tabs-headers {
      display          : table;
      table-layout     : fixed;
      width            : 100%;
      box-sizing       : border-box;
      list-style       : none;
      background-color : #489cff;
      padding          : 0;
      margin           : 0;
      list-style       : none;
    }

    .tabs-contents {
      position         : relative;
      padding          : 0;
      margin           : 0;
      height           : 200px;
      list-style       : none;
      background-color : #84b3ff;
    }

    .tabs-header {
      display    : table-cell;
      text-align : center;
      font-size  : 40px;
      cursor     : pointer;
    }

    .tabs-header-active_true {
      background-color : #ffbb32 !important;
    }

    .tabs-header:hover {
      background-color : #6dafff;
    }

    .tabs-content {
      position         : absolute;
      width            : 100%;
      height           : 100%;
      left             : 0;
      background-color : #84b3ff;
      padding          : 20px;
      transition       : all 1s;
    }

    .tabs-content-position_left {
      left : -100%;
    }

    .tabs-content-position_right {
      left : 100%;
    }
</style>



<script>
ui.module['tabs'] = function($, scope) {

  var tabs = scope.tabs;

  scope['activeIndex'] = 0;

  $('header').model({active: false});
  $('content').model({position: ''});


  $('header').repeat(tabs);
  $('content').repeat(tabs);

  $('header').turnOn('active', 'i === activeIndex');
  $('content').watch('activeIndex', function(value, i, scope) {
    scope['position'] = (i < value) ? 'left' : (i > value) ? 'right' : '';
  });

  $('header').indexTo('activeIndex');

  $.on('keydown(left, up)', function() { scope.activeIndex-- });
  $.on('keydown(right, down)', function() { scope.activeIndex++ });

};



ui.element['tabs'] = function(scope) {
  var allTabs = this.querySelectorAll('tab');
  scope.tabs = toArray(allTabs).map(function(element) {
    return {
      header : element.getAttribute('caption'),
      content: element.innerHTML
    }
  });
};
</script>




<tabs>
  <tab caption="раз">контент 1</tab>
  <tab caption="два">контент 2</tab>
  <tab caption="три">контент 3</tab>
  <tab caption="четыре">контент 4</tab>
  <tab caption="пять">контент 5</tab>
  <tab caption="шесть">контент 6</tab>
  <tab caption="семь">контент 7</tab>
</tabs>