概要
- JavaScriptでお手軽にフローティングウィンドウを表示する方法を紹介します
- 独立したライブラリなのでjQuery等への依存はありません。
- 拙作ライブラリの新機能（ウィンドウの開閉アクションなど）の紹介となります
(https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html)
yosemite風フローティングウィンドウを表示する
index.html(フローティングウィンドウを表示する)
<!DOCTYPE html>
<html>
<head>
<title>JsFrame.js JavaScript Yosemite</title>
<meta charset="utf-8">
</head>
<body style="background: url('http://upload.wikimedia.org/wikipedia/commons/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg') 50% no-repeat fixed; background-size: cover;">
<script src="https://riversun.github.io/jsframe/jsframe.js"></script>
<script>
const jsFrame = new JSFrame();//jsFrameオブジェクトを作る
const frames = [];
for (let i = 0; i < 3; i++) {
const frame = jsFrame.create({
name: `Win${i}`,
title: `Win${i} - Yosemite style`,
left: 20 + (320 + 20) * i, top: 50, width: 320, height: 220, minWidth: 200, minHeight: 110,
appearanceName: 'yosemite',//プリセット名 yosemite を指定
style: {
backgroundColor: 'rgba(255,255,255,0.8)', //背景色は半透明に
overflow:'auto'
},
//ココに表示したいHTMLを直接設定するか、 url:'' でurl指定するとその内容をiframeで表示
html: '<div style="padding:10px;">Your contents here.</div>'
}).show();
frame.setControl({
styleDisplay:'inline',
maximizeButton: 'zoomButton',
demaximizeButton: 'dezoomButton',
minimizeButton: 'minimizeButton',
deminimizeButton: 'deminimizeButton',
hideButton: 'closeButton',
animation: true,
animationDuration: 150,
});
frame.control.on('hid', (frame, info) => {
frame.closeFrame();
});
frames.push(frame);
}
frames[0].requestFocus();
</script>
</body>
</html>
デモ
https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html
見た目を変更した例
https://riversun.github.io/jsframe/examples/v150/preset_material.html
まとめ
-
見た目はカスタムできるので、ちょっとしたポップアップ用途から、本格的！？マルチウィンドウアプリまで作成可能です。
（が、カスタムが面倒という声をいただいたので、いくつかプリセットを内蔵しました、今回のもその1つとなります） -
ライブラリ自体はこちら「フローティング・ウィンドウ ライブラリ JSFrame.js の紹介」で紹介しています。