| コメント |
[[単純タブ]]
@DIV
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery テンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
$( "#mytabs" ).tabs({
active: 0,
activate: function( event, ui ) {
console.log( $(event.currentTarget).text() );
}
});
});
</script>
</head>
<body>
<div id="mytabs">
<ul>
<li><a href="#tabs-1">画像(1)</a></li>
<li><a href="#tabs-2">画像(2)</a></li>
<li><a href="#tabs-3">画像(3)</a></li>
</ul>
<div id="tabs-1">
<img src="https://lh5.googleusercontent.com/-MKN_5OfQ3A8/TwA4HxMhKNI/AAAAAAAAEM0/hIDpgmlXI8w/s400/P1000953.JPG" style="border: solid 1px #000000" />
</div>
<div id="tabs-2">
<img src="https://lh3.googleusercontent.com/--p3XLLRSMLs/TjQLJaWhuwI/AAAAAAAADJI/7oxoPiJShFw/s400/P1000881.JPG" style="border: solid 1px #000000" />
</div>
<div id="tabs-3">
<img src="https://lh6.googleusercontent.com/-zUdJQeL-WxA/Tj0ZltROUMI/AAAAAAAADNw/35vSSD19BYo/s400/P1000897.JPG" style="border: solid 1px #000000" />
</div>
</div>
</body>
</html>
@END
[[直前に開いたタブを localStorage に記憶させる]]
@DIV
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery テンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
var target_tab = 0;
if ( typeof(localStorage["old_active"]) != 'undefined' ) {
target_tab = localStorage["old_active"];
}
$( "#mytabs" ).tabs({
active: target_tab,
activate: function( event, ui ) {
console.log( $(event.currentTarget).text() );
localStorage["old_active"] = $( this ).tabs( "option", "active" );
}
});
});
</script>
</head>
<body>
<div id="mytabs">
<ul>
<li><a href="#tabs-1">画像(1)</a></li>
<li><a href="#tabs-2">画像(2)</a></li>
<li><a href="#tabs-3">画像(3)</a></li>
</ul>
<div id="tabs-1">
<img src="https://lh5.googleusercontent.com/-MKN_5OfQ3A8/TwA4HxMhKNI/AAAAAAAAEM0/hIDpgmlXI8w/s400/P1000953.JPG" style="border: solid 1px #000000" />
</div>
<div id="tabs-2">
<img src="https://lh3.googleusercontent.com/--p3XLLRSMLs/TjQLJaWhuwI/AAAAAAAADJI/7oxoPiJShFw/s400/P1000881.JPG" style="border: solid 1px #000000" />
</div>
<div id="tabs-3">
<img src="https://lh6.googleusercontent.com/-zUdJQeL-WxA/Tj0ZltROUMI/AAAAAAAADNw/35vSSD19BYo/s400/P1000897.JPG" style="border: solid 1px #000000" />
</div>
</div>
</body>
</html>
@END
[[タブ切り替え時にアニメーション]]
@DIV
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery テンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
var target_tab = 0;
if ( typeof(localStorage["old_active"]) != 'undefined' ) {
target_tab = localStorage["old_active"];
}
$( "#mytabs" ).tabs({
show: { effect: "fade" },
hide: { effect: "fade" },
active: target_tab,
activate: function( event, ui ) {
console.log( $(event.currentTarget).text() );
localStorage["old_active"] = $( this ).tabs( "option", "active" );
}
});
});
</script>
</head>
<body>
<div id="mytabs">
<ul>
<li><a href="#tabs-1">画像(1)</a></li>
<li><a href="#tabs-2">画像(2)</a></li>
<li><a href="#tabs-3">画像(3)</a></li>
</ul>
<div id="tabs-1">
<img src="https://lh5.googleusercontent.com/-MKN_5OfQ3A8/TwA4HxMhKNI/AAAAAAAAEM0/hIDpgmlXI8w/s400/P1000953.JPG" style="border: solid 1px #000000" />
</div>
<div id="tabs-2">
<img src="https://lh3.googleusercontent.com/--p3XLLRSMLs/TjQLJaWhuwI/AAAAAAAADJI/7oxoPiJShFw/s400/P1000881.JPG" style="border: solid 1px #000000" />
</div>
<div id="tabs-3">
<img src="https://lh6.googleusercontent.com/-zUdJQeL-WxA/Tj0ZltROUMI/AAAAAAAADNw/35vSSD19BYo/s400/P1000897.JPG" style="border: solid 1px #000000" />
</div>
</div>
</body>
</html>
@END |
メンテナンス