Bootstrap-multitabs / Bootstrap 多标签页
Эффектные изображения
Функции и преимущества
Требования для установки
Использование
<!-- Multi Tabs -->
<link rel="stylesheet" href="plugins/bootstrap-multitabs/css/style.css">
<!-- Multi Tabs -->
<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>
<script>
$('#content_wrapper').multitabs();
</script>
<a class="multitabs" href="pages/index-ajax-2.html">ajax INFO Tab 2</a>
Теперь самая простая конфигурация bootstrap-multitabs завершена!
Расширенная конфигурация
[data-type="info"]
определяет тип содержимого как info (всего 3 типа: main | info), info используется по умолчанию и может быть опущено.[data-iframe="true"]
указывает на режим iframe, значение false означает интеллектуальный режим, который автоматически определяет (ajax для внутренней сети, iframe для внешней сети). Значение по умолчанию — false.[data-title="new tab"]
устанавливает заголовок для вкладки, по умолчанию используется текст ссылки.[data-url="index.html"]
если объект не является ссылкой <a>
, это значение можно использовать для указания URL-адреса ссылки.[data-refresh="true"]
принудительное обновление.Следующие параметры являются настройками по умолчанию, которые можно изменить:
<script>
$('#content_wrapper').multitabs({
selector : '.multitabs', // Текст, запускающий multitabs, обратите внимание на необходимость наличия ".","#" и т. д.
iframe : false, // Общая настройка режима iframe. Когда значение равно false, используется интеллектуальный режим (ajax для внутренней сети, iframe для внешней сети). По умолчанию — false.
class : '', // Класс основного фрейма
refresh: false, // Глобальное принудительное обновление
init : [ // Вкладки, необходимые для начальной загрузки
{ // Тип вкладки, есть main | info, по умолчанию info
type :'', // Заголовок (необязательно), если не установлен, отображается URL
title : '', // Содержание html, если установлено, URL ниже недействителен
content: '', // URL ссылки
url : '' // Ссылка
},
{ /** Больше вкладок... **/ }, // Последовательно добавляйте нужные страницы
{ /** Больше вкладок... **/ } // Последовательно добавляйте нужные страницы
],
nav : {
backgroundColor : '#f5f5f5', // Цвет фона панели навигации по умолчанию
class : '', // Добавить класс в панель навигации
draggable : true, // Можно перетаскивать вкладки навигации
fixed : false, // Фиксировать список заголовков вкладок
layout : 'default', // Есть два режима: 'default' и 'classic' (все скрытые вкладки находятся в раскрывающемся списке) и 'simple'
maxTabs : 15, // Максимальное количество вкладок (main и editor не учитываются). Когда равно 1, весь список вкладок скрыт. Только один ярлык для main и editor.
maxTabTitleLength : 25, // Максимальная длина заголовка вкладки
showCloseOnHover : true, // Когда значение истинно, кнопка закрытия отображается только при наведении курсора. Ложно всегда отображать
style : 'nav-tabs' // Может быть nav-tabs или nav-pills
},
content : {
ajax : {
class : '', // Добавить класс во вкладку ajax
error : function (htmlCallBack) {
// Изменить html и вернуть
return htmlCallBack;
},
success : function (htmlCallBack) {
// Изменить html и вернуть
return htmlCallBack
}
}
});
</script>
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.