デモページ
jQuery TOOLS は、他にも沢山のプラグインが利用できるプラグインライブラリです。cdnjs でホスティングされているのでダウンロードも必要ありません。
※ 但し、jQuery は、1.7.1 が埋め込まれているので、他のバージョンの jQuery を使用するには cdnjs を使わずに 1.2.6 のライブラリのみを使用して特別な記述をする必要があります( 記事最後にあります )
配布サイト側で紹介されている 1.2.6 は古いのでバグがあり、そのままでは使用できないので注意して下さい、また、ドキュメントページからのダウンロードは壊れていてできないので GitHub からする必要があります
デモページでは、jQuery UI を使用していますが、jQuery TOOLS より後に jQuery UI を読み込まないと、jQuery UI が動作しないので注意して下さい。
ドキュメント
ダウンロードページ(GitHub)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
// jQuery 初期処理
$(function() {
// タブ
$( "#mytabs" ).tabs({
active: 0,
show: { effect: "slide" },
hide: { effect: "slide",direction: "right" }
})
.css({ margin: "30px 300px 0 30px" });
// アコーディオン
var target_acc = 0;
if ( typeof(localStorage["old_active_acc"]) != 'undefined' ) {
target_acc = parseInt(localStorage["old_active_acc"]);
}
$( "#acc" ).accordion({
heightStyle: "content",
active: target_acc,
activate: function( event, ui ) {
localStorage["old_active_acc"] = $( this ).accordion( "option", "active" );
}
});
$(".expose").click(function() {
$(this).expose({
color: "#202020",
opacity: 0.5,
closeOnEsc: true
});
});
});
</script>
1.2.6 を使用した特別な記述
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.extend({browser:{version: 11,msie: (window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1}});
</script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/le-frog/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
そもそも、1.2.6 の問題は、jQuery の新しいバージョンで廃止された、jQuery.browser を使用しているからなので、新しいバージョンでエラーにならないように、jQuery の名前空間に登録してから、1.2.6 を読み込みます。
使用されているのは、IE かどうかの判断と、IE が 6 より大きいかの判断なので、jQuery.browser.version には 11 をセットしています。
使用する jQuery に、jQuery.browser が存在するのであれば、この必要はありませんが、オリジナルは4年前で更新が止まっているので、jQuery TOOLS 全体を運用したいのであれば、jQuery 対応は自分でしたほうが賢明だと思います。
GitHub からダウンロードする場合は、個別にソースコードを編集して pack して使用するといいと思います。
▼ toolbox.expose.js
/* one of the greatest headaches in the tool. finally made it */
function viewport() {
// the horror case
if ((window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1) {
// if there are no scrollbars then use window.height
var d = $(document).height(), w = $(window).height();
return [
window.innerWidth || // ie7+
document.documentElement.clientWidth || // ie6
document.body.clientWidth, // ie6 quirks mode
d - w < 20 ? w : d
];
}
// other well behaving browsers
return [$(document).width(), $(document).height()];
}
ダウンロードして書き換えて単独で使用すると、jQuery UI の後に読み込んでも動作しました
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
