1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/edwinhuish-multi-tabs

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README_cn.md 7.9 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 26.11.2024 10:27 2093fd4

Bootstrap-multitabs / Bootstrap 多标签页

Эффектные изображения

  • По умолчанию (с перемещением влево, вправо и опциями меню):
    Demo: nav-tabs и nav-pills.

Multi Tabs Screenshot

  • Свёрнутое (скрытое свёртывание tab):
    Demo: nav-tabs и nav-pills.

Multi Tabs Screenshot

Multi Tabs Screenshot

Функции и преимущества

  1. Создание многостраничных вкладок с возможностью интеллектуальной адаптации к ajax и iframe с помощью простой конфигурации.
  2. Возможность прямого использования различных шаблонов bootstrap.
  3. Сохранение всех вкладок при обновлении страницы без закрытия окна (если используются формы, рекомендуется завершить их заполнение перед обновлением).
  4. Перемещение навигационных вкладок.
  5. Скрытие списка ярлыков при установке количества вкладок равным 1.

Требования для установки

  1. Bootstrap.
  2. JQuery.
  3. Font Awesone.

Использование

  1. Включите CSS multitabs в разделе head HTML:
<!-- Multi Tabs -->  
<link rel="stylesheet" href="plugins/bootstrap-multitabs/css/style.css">  
  1. Включите JS multitabs внизу тела HTML:
<!-- Multi Tabs -->  
<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>  
  1. Привяжите область multitabs:
<script>  
    $('#content_wrapper').multitabs();  
</script>  
  1. Добавьте класс «multitabs» к ссылкам, которые нужно связать:
<a class="multitabs" href="pages/index-ajax-2.html">ajax INFO Tab 2</a>  

Теперь самая простая конфигурация bootstrap-multitabs завершена!

Расширенная конфигурация

Добавление параметров к ссылкам

  1. [data-type="info"] определяет тип содержимого как info (всего 3 типа: main | info), info используется по умолчанию и может быть опущено.
  2. [data-iframe="true"] указывает на режим iframe, значение false означает интеллектуальный режим, который автоматически определяет (ajax для внутренней сети, iframe для внешней сети). Значение по умолчанию — false.
  3. [data-title="new tab"] устанавливает заголовок для вкладки, по умолчанию используется текст ссылки.
  4. [data-url="index.html"] если объект не является ссылкой <a>, это значение можно использовать для указания URL-адреса ссылки.
  5. [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>
1
https://api.gitlife.ru/oschina-mirror/edwinhuish-multi-tabs.git
git@api.gitlife.ru:oschina-mirror/edwinhuish-multi-tabs.git
oschina-mirror
edwinhuish-multi-tabs
edwinhuish-multi-tabs
master