jsPanel

JavaScript

高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

jsPanelは高度なセッティングができるフローティングパネル、モーダルウィンドウ、ツールチップ、通知、コンテキストメニューなどを実装することができるjQueryプラグインです。オプションもかなり豊富で、多彩なタイプのパネルを表示できます。

jsPanel

デモ

デモページを読み込むと、下に「Hey there!」を書かれたパネルが表示されています。その中にある「Next panel」というボタンをクリックすると、現在のパネルがスライド移動して消え、左から新しい次のパネルがスライドしながら出てきます。

パネルの右上にはフルスクリーン表示や縮小などのアイコンが設置されているほか、左上には設定やメールのアイコンも設置されています。

もちろんパネルの種類はこれだけでなく、モーダルウィンドウや通知系、またはツールチップやツールバーといったさまざまな種類が用意されています。

オプションもたくさんあるので、カスタマイズして使いたい人にもうれしい仕様になっています。autoclose、border、callback、closeOnEscape、config、container、content、contentAjax、contentIframe、contentOverflow、contentSize、dblclicks、delayClose、dragit、draggable、footerToolbar、headerControls……などなど、他にも設定可能なオプション項目が豊富にあります。

というわけで、多彩な種類のパネルで高度なセッティングもできるjQueryプラグイン「jsPanel」の紹介でした。

jsPanel

Drooltip.js拡張性の高い美しいツールチップを実装できる「Drooltip.js」前のページ

エレガントでレスポンシブに対応したトーストを実装できる「iziToast」次のページiziToast

関連記事

  1. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  2. GoogleSheets-HTMLImporter
  3. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  4. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  5. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP