デモページ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 の後に読み込んでも動作しました
|
【IFRAME パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- 1会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ