mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 00:19:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge 29d3662658 into 0cb2732fcc

Browse Source
This commit is contained in:
elijah 2015-06-25 09:17:16 +00:00
commit df8f0ff46f
3 changed files with 164 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -154,7 +154,7 @@
<li class="withripple" data-target="#navbar">Navbar</li>
<li class="withripple" data-target="#progress-bar">Progress Bar</li>
<li class="withripple" data-target="#slider">Slider</li>
<li class="withripple">Tabs (To do)</li>
<li class="withripple" data-target="#tabs">Tabs (To do)</li>
<li class="withripple" data-target="#button">Button</li>
<li class="withripple">Icon button (To do)</li>
<li class="withripple" data-target="#floating-action-button">Floating Action Button</li>
@ -864,6 +864,48 @@
</style>
</div>
<div class="well page" id="tabs">
<h1 class="header">Tabs</h1>
<div class="tab-page-group">
<div class="toolbar">
<ul class="tabs">
<li><a href="javascript:void(0)">Tab 1</a></li>
<li><a href="javascript:void(0)">Tab 2</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 1</a></li>
<li><a href="javascript:void(0)">Tab 2</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 1</a></li>
<li><a href="javascript:void(0)">Tab 2</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
<li><a href="javascript:void(0)">Tab last</a></li>
</ul>
</div>
<div class="tab-page active-page">
I am the first tab
</div>
<div class="tab-page">
I am the second tab
</div>
<div class="tab-page">
I am the third tab
</div>
</div>
</div>
<div class="well page" id="material-colors">
<h1 class="header">Material Color Samples</h1>
<p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
@ -1534,7 +1576,7 @@
<script src="dist/js/material.min.js"></script>
<script src="dist/js/ripples.min.js"></script>
<script>
$.material.init();
//$.material.init();
</script>

61
less/_tabs.less
View File

@ -22,3 +22,64 @@
}
}
.tab-page-group {
overflow: hidden;
.toolbar {
background: #03A9F4;
height: 50px;
overflow: hidden;
.tabs {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0 16px;
li {
float: left;
display: inline;
position: relative;
a {
position: relative;
color: white;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 0 16px;
height: 50px;
text-align: center;
line-height: 52px;
font-weight: 700;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
overflow: hidden;
&:after {
height: 0;
width: 100%;
display: block;
content: " ";
bottom: 0;
left: 0;
position: absolute;
background: #FFFF8D;
transition: all 0.1s cubic-bezier(0.4, 0.0, 1, 1);
}
}
&.active a {
color: white;
&:after {
height: 2px;
}
}
}
}
}
.tab-page {
display: none;
box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
padding: 50px;
overflow: hidden;
}
.active-page {
display: block;
}
}

59
scripts/material.js
View File

@ -29,6 +29,7 @@
"radio": true,
"arrive": true,
"autofill": false,
"tabs": true,
"withRipples": [
".btn:not(.btn-link)",
@ -36,6 +37,7 @@
".navbar a:not(.withoutripple)",
".dropdown-menu a",
".nav-tabs a:not(.withoutripple)",
".tab-page-group .toolbar .tabs > li:not(.withoutripple)",
".withripple"
].join(","),
"inputElements": "input.form-control, textarea.form-control, select.form-control",
@ -172,6 +174,60 @@
clearInterval(focused);
});
},
"tabs": function() {
var dragging = null,
current = null,
startPos = 0;
$(".tab-page-group").each(function() {
var group = $(this),
pages = group.find(".tab-page"),
activePage = pages.eq(0),
tabs = group.find(".toolbar > .tabs > li"),
width = 0;
tabs.click(function() {
var targetPage = pages.eq($(this).index());
if (targetPage.length > 0 && targetPage.index() !== activePage.index()) {
targetPage.css("display", "block");
activePage.css("display", "none");
activePage = targetPage;
tabs.removeClass("active");
$(this).addClass("active");
}
}).each(function() {
width += $(this).width();
}).eq(0).addClass("active");
group.find(".toolbar").width(width).on("mousedown touchstart", function(e) {
startPos = e.pageX;
dragging = $(this);
e.preventDefault();
return false;
});
});
$("body").on("mousemove", function(e) {
var offset = e.pageX - startPos;
if (dragging !== null) {
if (current === null) {
current = parseFloat(dragging.css("margin-left"));
}
if (current + offset > 0) {
startPos = e.pageX;
dragging.css("margin-left", 0);
current = null;
} else if (Math.abs(current + offset) + dragging.parent().width() > dragging.width()) {
offset = (dragging.parent().width() - dragging.width());
startPos = e.pageX;
dragging.css("margin-left", offset);
current = null;
} else {
dragging.css("margin-left", current + offset);
}
}
}).on("mouseup touchend", function() {
dragging = null;
current = null;
});
},
"init": function() {
if ($.fn.ripples && this.options.ripples) {
this.ripples();
@ -191,6 +247,9 @@
if (this.options.autofill) {
this.autofill();
}
if (this.options.tabs) {
this.tabs();
}
if (document.arrive && this.options.arrive) {
if ($.fn.ripples && this.options.ripples) {