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. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  2. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  3. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  4. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  5. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  6. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP