jQuery

【jQuery】タブを作成するためのプラグインjQuery FlexTabs

October 5, 2018
jQuery FlexTabs

jQuery FlexTabsは適応型タブを作成するためのjQueryプラグイン。

インクルード

<!-- jquery.flextabs.css - Основные стили -->
<link rel="stylesheet" href="dist/jquery.flextabs.css">

<!-- jquery.flextabs.theme-default.css - Стили темы по умолчанию -->
<link rel="stylesheet" href="dist/jquery.flextabs.theme-default.css">

<!-- jQuery -->
<script src="libs/jquery/dist/jquery.min.js"></script>

<!-- jquery.flextabs.js -->
<script src="dist/jquery.flextabs.js"></script>

マークアップ

<div class="example-tabs theme-default">

	<div class="ft-nav">
		<a href="#tab-1" class="ft-tab active">Вкладка #1</a>
		<a href="#tab-2" class="ft-tab">Вкладка #2</a>
		<a href="#tab-3" class="ft-tab">Вкладка #3</a>
	</div>
	
	<div class="ft-contents">
		<div id="tab-1">Содержание вкладки #1</div>
		<div id="tab-2">Содержание вкладки #1</div>
		<div id="tab-3">Содержание вкладки #1</div>
	</div>
	
</div>

<!-- Отобразить контент вкладок на случай откл. JS -->
<noscript>
	<style>.ft-contents>*{display:block!important;}</style>
</noscript>

プラグインを初期化

$('.example-tabs').flexTabs({
	// Параметры...
});

MIT