SQLの窓

2015年11月14日


IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll

デモページ

▼ デモページのダウンロード



配布ページ(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>

デモページ

※ 重要な注意事項
ホスティングされたものを使用する場合、最大化用のアイコンが使用できません。ダウンロードして手に入れるか、以下の画像を使って下さい。



この画像を使用するページと同じフォルダに置いて、scriptpath:'' とすると、カレントフォルダのものを使用します。URL を設定すれば固定位置の画像を使用できると思います( ソースを読んで確認しました )
その他 オリジナルサイトにたくさんのオプションが英語で書かれています。必要ならば、いろいろ調整できます( 例えば、scrollspeed ) Google 翻訳での表示 ライセンスは、MITライセンスです。 $("iframe") は、Google Chrome では動作しましたが、他のブラウザはうまく動かないかもしれません。IFRAME の内部で $("html") が無難です。
【IFRAME パッケージの最新記事】
posted by lightbox at 2015-11-14 10:22 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり