You can download a minimized version of the library or get the full source code at github.com.
Download source$ npm install coreui-tabsДля корректной работы на странице необходимо наличие: Bootstrap 5, jquery
<div id="example-tabs-content"></div>
<script>
let tabs = CoreUI.tabs.create({
title: "Component tabs",
subtitle: "CoreUI Framework",
tabs: {
items: [
{id: "1", title: "Home", active: true},
{id: "2", title: "Profile"},
{id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{id: "4", title: "Tab title 4", disabled: true},
{id: "5", title: "Tab title 5"},
{type: "divider"},
{id: "6", title: "Tab title 6"}
]
}
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
});
tabs.render('example-tabs-content');
tabs.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
});
</script>
<div id="example-pills-content"></div>
<script>
let tabsPills = CoreUI.tabs.create({
tabs: {
type: 'pills',
items: [
{id: "1", title: "Home", active: true},
{id: "2", title: "Profile"},
{id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{id: "4", title: "Tab title 4", disabled: true},
{id: "5", title: "Tab title 5"},
{type: "divider"},
{id: "6", title: "Tab title 6"}
]
}
]
},
content: [ "Tab Home" ]
});
tabsPills.render('example-pills-content');
tabsPills.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
})
</script>
<div id="example-underline-content"></div>
<script>
let tabsUnderline = CoreUI.tabs.create({
tabs: {
type: 'underline',
items: [
{id: "1", title: "Home", active: true},
{id: "2", title: "Profile"},
{id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{id: "4", title: "Tab title 4", disabled: true},
{id: "5", title: "Tab title 5"},
{type: "divider"},
{id: "6", title: "Tab title 6"}
]
}
]
},
content: [ "Tab Home" ]
});
tabsUnderline.render('example-underline-content');
tabsUnderline.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
});
</script>
<div id="example-fill-content"></div>
<script>
let tabsFill = CoreUI.tabs.create({
tabs: {
type: 'tabs',
fill: 'fill',
items: [
{id: "1", title: "Active", active: true},
{id: "2", title: "Much longer nav link"},
{id: "3", title: "Link"},
{id: "3", title: "Disabled", disabled: true},
]
},
content: [ "Tab Home" ]
});
tabsFill.render('example-fill-content');
tabsFill.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
});
</script>
<div id="example-justify-content"></div>
<script>
let tabsJustify = CoreUI.tabs.create({
tabs: {
type: 'tabs',
fill: 'justified',
items: [
{id: "1", title: "Active", active: true},
{id: "2", title: "Much longer nav link"},
{id: "3", title: "Link"},
{id: "3", title: "Disabled", disabled: true},
]
},
content: [ "Tab Home" ]
});
tabsJustify.render('example-justify-content');
tabsJustify.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
});
</script>
<div id="example-pos-left-content"></div>
<script>
let tabsLeft = CoreUI.tabs.create({
tabs: {
position: 'left',
width: 200,
items: [
{id: "1", title: "Home", active: true},
{id: "2", title: "Profile"},
{id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{id: "4", title: "Tab title 4", disabled: true},
{id: "5", title: "Tab title 5"},
{type: "divider"},
{id: "6", title: "Tab title 6"}
]
}
]
},
content: [ "Tab Home" ]
});
tabsLeft.render('example-pos-left-content');
tabsLeft.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
});
</script>
<div id="example-pos-right-content"></div>
<script>
let tabsRight = CoreUI.tabs.create({
tabs: {
position: 'right',
width: 200,
items: [
{id: "1", title: "Home", active: true},
{id: "2", title: "Profile"},
{id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{id: "4", title: "Tab title 4", disabled: true},
{id: "5", title: "Tab title 5"},
{type: "divider"},
{id: "6", title: "Tab title 6"}
]
}
]
},
content: [ "Tab Home" ]
});
tabsRight.render('example-pos-right-content');
tabsRight.on('tab_click', function (tab, event) {
this.setContent(tab.getOptions().title);
});
</script>
<div id="example-ajax-content"></div>
<script>
let tabsAjax = CoreUI.tabs.create({
id: "ajax",
title: "Component tabs",
subtitle: "CoreUI Framework",
tabs: [
{id: "tab1", title: "Home", active: true, url: "data/tab1.txt"},
{id: "tab2", title: "Profile", url: "data/tab2.json"},
{id: "tab3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{id: "tab4", title: "Tab title 3", disabled: true},
{id: "tab5", title: "Tab title 4", url: "data/tab3.json"},
{type: "divider"},
{id: "tab6",title: "Tab title 5", url: "data/tab4.json"}
]
}
],
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
});
tabsAjax.render('example-ajax-content');
tabsAjax.on('tab_click', function (tab, event) {
console.log(tab.getId() + ' ' + 'tab_click')
});
tabsAjax.on('load_end', function (xhr) {
console.log('load_end')
});
tabsAjax.on('load_success', function (result) {
console.log('load_success')
});
tabsAjax.on('load_error', function (xhr, textStatus, errorThrown ) {
console.log('load_error')
});
tabsAjax.on('load_end', function (xhr, textStatus) {
console.log('load_end')
});
</script>
<div id="tabs-count"></div>
<script>
CoreUI.tabs.create({
tabs: {
items: [
{ id: "tab1", title: "Users", count: 3, active: true },
{ id: "tab2", title: "Issues", count: 18 },
{ id: "tab3", title: "Actions" }
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('tabs-count');
</script>
<div id="tabs-count-load"></div>
<script>
CoreUI.tabs.create({
load: "data/tabs.json",
tabs: {
items: [
{ id: "tab1", title: "Tab1", urlCount: "data/count/tab1.json", active: true },
{ id: "tab2", title: "Tab2", urlCount: "data/count/tab2.json" },
{ id: "tab3", title: "Tab3"}
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('tabs-count-load');
</script>
<div id="tabs-badge"></div>
<script>
CoreUI.tabs.create({
tabs: {
items: [
{ id: "tab1", title: "Orders", badge: { text: '', type: 'success' }, active: true },
{ id: "tab2", title: "Profile" },
{ id: "tab3", title: "Messages", badge: { text: '99+', type: 'danger', attr: { title: 'Unread messages'} } },
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('tabs-badge');
</script>
<div id="tabs-badge-load"></div>
<script>
CoreUI.tabs.create({
tabs: {
items: [
{ id: "tab1", title: "Orders", urlBadge: "data/badges/tab1.json", active: true },
{ id: "tab2", title: "Profile" },
{ id: "tab3", title: "Messages", urlBadge: "data/badges/tab3.json" },
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('tabs-badge-load');
</script>
| Name | type | default | description |
|---|---|---|---|
| id | string | crc32b |
Идентификатор табов. Позволяет получать панель для работы с ней, либо для css настроек. Если не указан, то будет равен случайному значению |
| title | string | Заголовок табов | |
| subtitle | string | Подзаголовок табов | |
| tabs | object |
{
type: 'tabs',
position: 'top-left',
width: 200,
fill: '',
items: []
}
|
Настройки табов. type - Внешний вид табов (tabs, pills, underline) position - Расположение табов (top-left, top-center, top-right, left, right) fill - Выравнивание табов (fill, justify) width - Ширина колонки с табами. Может применяться совместно с позиционированием (left, right) items - Список табов. |
| content | string | array | object | Содержимое табов. Может быть в виде строки с html, в виде объекта coreui, либо массива с комбинацией этих объектов |
| Method | Description |
|---|---|
| let tabs = CoreUI.tabs.create( options ) | Метод для создания экземпляра табов |
| let tabs = CoreUI.tabs.get( tabsId ) | Получение ранее созданного экземпляра табов |
| tabs.render( elementId ) | Формирование html табов и размещение его если указан dom элемент. Если элемент не указан, то метод возвращает сформированный html |
| tabs.initEvents() | Инициализирует события необходимые для корректной работы табов. Требует обязательного вызова, если при рендере табов не был указан элемент для вставки |
| tabs.getId() | Получение id табов |
| tabs.getOptions() | Получение заданных ранее опций табов |
| tabs.setContent(content) | Установка содержимого для табов. Может содержать в себе тоже, что и параметр content в опциях |
| tabs.lock(text) | Блокирует работу с панелей и показывает сообщение о загрузке |
| tabs.unlock() | Разблокирует работу с панелей |
| tabs.loadContent( url ) | Загрузка содержимого для его размещение внутри табов |
| tabs.setContent( content ) | Размещение содержимого внутри табов |
| tabs.on( name, function, context, singleExec ) | Регистрация функции вызываемой при наступлении указанного события |
| tabs.getLang() | Получение переводов текущего языка |
| tabs.getTabById( tabId ) | Получение объекта таба по его id |
| Event Type | Description |
|---|---|
| tabs_show | Показ табов на странице. Происходит один раз при отображении |
| content_show |
Показ содержимого внутри табов.
Первый раз происходит при показе табов, а после при каждом выполнении метода tabs.setContent(content)
|
| tab_click |
Происходит при нажатии на таб. В качестве параметров передаются tabs.on('tab_click', function (tab, event)
|
| load_end |
Происходит при клике на таб с указанным свойством url.
Дает возможность показывать прелодер или модифицировать запрос через изменение объекта xhr.В качестве параметров передаются tabs.on('load_end', function (tab, xhr)
|
| load_success |
Происходит при успешной ajax загрузке содержимого табов. В качестве параметров передаются tabs.on('load_success', function (tab, result)
|
| load_error |
Происходит при НЕ успешной ajax загрузке содержимого табов. В качестве параметров передаются tabs.on('load_error', function (tab, xhr, textStatus, errorThrown)
|
| load_end |
Происходит после завершения ajax запроса для получения содержимого для табов.
Дает возможность скрыть прелодер. В качестве параметров передаются tabs.on('load_end', function (tab, xhr, textStatus)
|