Добавил кастомные элементы
все соснули )))))))))))))))
Сделаем няшные кнопки: 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>
