デモページ ▼ デモページのダウンロード
配布ページ(GitHub) 特徴その (1) スクロールバーを非表示にして表示エリアをすっきりと。マウスが近づくとスクロールバーが現れます。スクロールは滑らかになり、キーボードからも操作できます( 矢印キー、pagup/down キー, home/end キー ) 特徴その (2) cdnjs.com でホスティングされているので、ダウンロードが必要ありません
特徴その (3) DIV 等に指定する事によって、スクロール可能な表示エリアを容易に作る事ができます。また、オプションで最大表示するアイコンを表示して使う事もできます( その場合表示エリアをダブルクリックしても最大化されます ) ▼ 最大化前
▼ 最大化後
特徴その (4) とても簡単な設定
<script>
// jQuery 初期処理
$(function() {
// DIV を固定サイズにして自動改行させています
$( "#story,#story_box_zoom" )
.css({
width: "700px",
height: "200px",
whiteSpace: "pre-wrap"
});
// ページ全体( HTML ) と、DIV に対してデフォルトの実装
$( "html,#story" ).niceScroll();
// DIV に対して、最大化のオプション
$( "#story_box_zoom" ).niceScroll( {boxzoom:true,scriptpath:''});
});
</script>
デモページ ※ 重要な注意事項ホスティングされたものを使用する場合、最大化用のアイコンが使用できません。ダウンロードして手に入れるか、以下の画像を使って下さい。その他 オリジナルサイトにたくさんのオプションが英語で書かれています。必要ならば、いろいろ調整できます( 例えば、scrollspeed ) Google 翻訳での表示 ライセンスは、MITライセンスです。 $("iframe") は、Google Chrome では動作しましたが、他のブラウザはうまく動かないかもしれません。IFRAME の内部で $("html") が無難です。この画像を使用するページと同じフォルダに置いて、scriptpath:'' とすると、カレントフォルダのものを使用します。URL を設定すれば固定位置の画像を使用できると思います( ソースを読んで確認しました )
|
|
【IFRAME パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ
