ウィンドウを表示してくれるWinBox.jsがめっちゃ便利

つい1か月ほど前にリリースされたWinBox.jsというライブラリがとても便利で、UI制作の幅が広がりそうだったので紹介します。

WinBox.jsはサイト内に小型のwindowを表示してくれるjsライブラリです。

主にモーダル表示や補足情報をポップアップする事に使用できそうです。モーダル表示と言えばMicromodal.jsそ使用している方も多いと思いますが、WinBox.jsはMicromodal.jsとは少し違ったUIを提供してくれます。

目次

デモ

下のボタンをクリックするとwindowが表示され、SusiRiceが表示されます。

表示されたwindowはドラッグで場所の移動や、最小化、フルスクリーン、リサイズなど、小さなブラウザのような挙動をしてくれます。

使い方

WinBox.jsのGitHubにアクセスしデータをダウンロードします。

WinBox.jsのタウンロード

ダウンロードしたzipファイルを解凍するとwinbox-master/dist/winbox.bundle.jsファイルの中身もしくはファイル自体を使用したいプロジェクトに移し、headで読み込みます。

WinBox.js-使用するコード

これでWinBox.jsを使用する事が出来るようになりました。

次に処理を記載していきます。

windowを表示するためのボタンを制作する

html

<button class="open-button"id="js-button">open web site!!</button>

js 処理を書く

js

const buttonEl=document.getElementById('js-button');let isActive=false;buttonEl.addEventListener('click',()=>{if(isActive)return;console.log('open');isActive=true;const itemBox=new WinBox({root:document.body,title:'window title',width:640,height:"70%",top:200,right:100,bottom:0,left:100,x:0,y:0,url:'https://sushirice.pro/',onfocus:function(){this.setBackground("#00aa00");},onblur:function(){this.setBackground("#999");},onclose:function(force){if(confirm("ウィンドウを閉じてもよろしいでしょうか?")){isActive=false;return false;};return true;},onmove:function(x,y){console.log(`move x=> ${x} : y=> ${y}`);},onresize:function(width,height){console.log(`resize width=> ${width} : height=> ${height}`);},});});

cssでカスタマイズする

cssからデザインをカスタマイズする事も可能です。

各パーツのclass名が以下のようになってます。

このclass名はhtmlのソースを見れば簡単にわかるので、詳しく知りたい方はdevツールを使用して確認してください。

cssからclassにスタイルを当てる事でカスタマイズができます。

.wd-header {}.wd-icon {}.wd-min {}.wd-max {}.wd-full {}.wd-close {}.wb-title {font-size:20px;font-weight:bold;color:#fff;}.wb-body {color:#fff;background:#333;padding:16px;&a {text-decoration:none;}}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

プログラムちょと書ける。
いまはバリ島でスクール作っている。
プログラムちょっとできる。

目次