まだデータがありません。
簡単にタブメニューを作成「Ion.Tabs」
当ページのリンクには広告が含まれています。
スポンサーリンク
シンプルなタブメニューを簡単に作成するjQueryプラグイン「Ion.Tabs」を紹介します。
jQueryプラグイン「Ion.Tabs」
このプラグインの特徴は、どんなサイトにも合わせやすいシンプルなデザイン、そしてデモのソースを見てもらうを分かるのですが、jQuery部分のソースコードがとても簡単なところです。サイトのアクセントに使ってみてはいかがでしょうか。
スポンサーリンク
デモは、プラグインの主要な部分のみを切り出しています。タブメニューをクリック！してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ion.Tabs - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/ion.tabs.css">
<link rel="stylesheet" href="css/ion.tabs.skinBordered.css">
</head>
<body>
<h1>Ion.Tabsのデモでーす。</h1>
<div class="ionTabs" id="tabs_1" data-name="Tabs_Group_name">
<ul class="ionTabs__head">
<li class="ionTabs__tab" data-target="Tab_1_name">タブ１</li>
<li class="ionTabs__tab" data-target="Tab_2_name">タブ２</li>
<li class="ionTabs__tab" data-target="Tab_3_name">タブ３</li>
</ul>
<div class="ionTabs__body">
<div class="ionTabs__item" data-name="Tab_1_name">
タブメニューをクリック！
</div>
<div class="ionTabs__item" data-name="Tab_2_name">
タブメニューをクリック！クリック！
</div>
<div class="ionTabs__item" data-name="Tab_3_name">
タブメニューをクリック！クリック！クリック！
</div>
<div class="ionTabs__preloader"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="js/ion.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ionTabs("#tabs_1, #tabs_2", {
type: "storage",
onChange: function(obj){
console.log(obj);
}
});
});
</script>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Ion.Tabs
スポンサーリンク