mirror of
https://github.com/NaN-tic/sao-base.git
synced 2023-12-14 03:13:01 +01:00
Stick navbar of tab
review23561004
This commit is contained in:
parent
123665b2ee
commit
e0cb5136e4
19
src/sao.less
19
src/sao.less
|
@ -1,12 +1,20 @@
|
|||
@import "variables";
|
||||
|
||||
.navbar {
|
||||
z-index: @zindex-navbar;
|
||||
}
|
||||
|
||||
.tab-form {
|
||||
& .toolbar {
|
||||
& nav.toolbar {
|
||||
margin-bottom: 1px;
|
||||
& ul.nav > li > a {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
& nav.toolbar.affix {
|
||||
top: @navbar-height + 1px;
|
||||
z-index: @zindex-navbar - 1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs > li .close {
|
||||
|
@ -14,6 +22,15 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.tab-form {
|
||||
.navbar-nav > li {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
& .btn {
|
||||
height: @line-height-base;
|
||||
|
|
41
src/tab.js
41
src/tab.js
|
@ -15,13 +15,12 @@
|
|||
'class': this.class_
|
||||
});
|
||||
|
||||
this.title = jQuery('<h4/>').appendTo(this.el);
|
||||
|
||||
if (this.info_bar) {
|
||||
this.el.append(this.info_bar.el);
|
||||
}
|
||||
|
||||
this.create_toolbar().appendTo(this.el);
|
||||
var toolbar = this.create_toolbar().appendTo(this.el);
|
||||
this.title = toolbar.find('a.navbar-brand');
|
||||
},
|
||||
set_menu: function(menu) {
|
||||
this.menu_def.forEach(function(definition) {
|
||||
|
@ -53,6 +52,7 @@
|
|||
'<nav class="navbar navbar-default toolbar" role="navigation">' +
|
||||
'<div class="container-fluid">' +
|
||||
'<div class="navbar-header">' +
|
||||
'<a class="navbar-brand" href="#"></a>' +
|
||||
'<button type="button" class="navbar-toggle collapsed" ' +
|
||||
'data-toggle="collapse" ' +
|
||||
'data-target="#navbar-' + this.id + '">' +
|
||||
|
@ -112,6 +112,22 @@
|
|||
// TODO tooltip
|
||||
};
|
||||
this.toolbar_def.forEach(add_button.bind(this));
|
||||
var tabs = jQuery('#tabs');
|
||||
toolbar.affix({
|
||||
'target': tabs.parent(),
|
||||
'offset': {
|
||||
'top': function() {
|
||||
return tabs.find('.nav-tabs').height();
|
||||
}
|
||||
}
|
||||
});
|
||||
toolbar.on('affixed.bs.affix', function() {
|
||||
Sao.Tab.affix_set_with(toolbar);
|
||||
});
|
||||
toolbar.on('affixed-top.bs.affix affixed-bottom.bs.affix',
|
||||
function() {
|
||||
Sao.Tab.affix_unset_width(toolbar);
|
||||
});
|
||||
return toolbar;
|
||||
},
|
||||
close: function() {
|
||||
|
@ -140,6 +156,25 @@
|
|||
}
|
||||
});
|
||||
|
||||
Sao.Tab.affix_set_with = function(toolbar) {
|
||||
var width = jQuery(toolbar.parent()).width();
|
||||
toolbar.css('width', width);
|
||||
};
|
||||
Sao.Tab.affix_unset_width = function(toolbar) {
|
||||
toolbar.css('width', '');
|
||||
};
|
||||
jQuery(window).resize(function() {
|
||||
jQuery('.toolbar').each(function(i, toolbar) {
|
||||
toolbar = jQuery(toolbar);
|
||||
toolbar.affix('checkPosition');
|
||||
if (toolbar.hasClass('affix')) {
|
||||
Sao.Tab.affix_set_with(toolbar);
|
||||
} else {
|
||||
Sao.Tab.affix_unset_width(toolbar);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Sao.Tab.counter = 0;
|
||||
Sao.Tab.tabs = [];
|
||||
Sao.Tab.tabs.close = function(warning) {
|
||||
|
|
Loading…
Reference in a new issue