w2uiのレイアウトを定義する
レイアウトを使ってコンテンツの配置位置がデザイン出来たら、サイドバー
を使ってコンテンツを切り替えるサンプルを作って見ます。
レイアウトはシンプルな下記構成を使います。
<!DOCTYPE html>
<html>
<head>
<title>W2UI サンプル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
</head>
<body>
<div id="layout" style="width: 100%;"></div>
<script type="text/javascript">
$(function () {
//現在のウィンドウ高さを取得し、要素に設定
$("#layout").css("height",$(window).height()-15);
//言語設定を日本語にする。
w2utils.locale('locale/ja-jp.json');
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 50, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' }
]
});
});
</script>
</body>
</html>
サイドバーのプロパティを設定
次にレイアウトの左パネルに、サイドバーを設置していきます。
サイドバーのソースは、公式のDemo「Simple Sidebar」から頂きました。
var sbar = {
name: 'sidebar',
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
{ id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star' },
{ id: 'level-1-3', text: 'Level 1.3', icon: 'fa-star-empty' }
]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder', expanded: true, group: true,
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder', count: 3,
nodes: [
{ id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'fa-star-empty' },
{ id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'fa-star-empty', count: 67 },
{ id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'fa-star-empty' }
]},
{ id: 'level-2-2', text: 'Level 2.2', icon: 'fa-star-empty' },
{ id: 'level-2-3', text: 'Level 2.3', icon: 'fa-star-empty' }
]
}
]
};
サイドバーを作成する
プロパティを設定した変数「sbar」を引数に、w2sidebarウェジットを作成します。
$().w2sidebar(sbar);
作成するとプロパティのnameで設定した名前で、利用することができます。
上記のプロパティでは、「w2ui.sidebar」または「w2ui[‘sidebar’]」となります。
サイドバーをレイアウトの左パネルに表示する
レイアウトの「content」メソッドを利用して、サイドバーを表示します。
w2ui.layout.content('left', w2uisidebar);
まとめると以下のようなコードになります。
<!DOCTYPE html>
<html>
<head>
<title>W2UI サンプル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
</head>
<body>
<div id="layout" style="width: 100%;"></div>
<script type="text/javascript">
$(function () {
//現在のウィンドウ高さを取得し、要素に設定
$("#layout").css("height",$(window).height()-15);
//言語設定を日本語にする。
w2utils.locale('locale/ja-jp.json');
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' }
]
});
var sbar = {
name: 'sidebar',
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fas fa-home' },
{ id: 'level-1-2', text: 'Level 1.2', icon: 'fas fa-star' },
{ id: 'level-1-3', text: 'Level 1.3', icon: 'far fa-star' }
]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder', expanded: true, group: true,
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder', count: 3,
nodes: [
{ id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'fa-star-empty' },
{ id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'fa-star-empty', count: 67 },
{ id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'fa-star-empty' }
]},
{ id: 'level-2-2', text: 'Level 2.2', icon: 'fa-star-empty' },
{ id: 'level-2-3', text: 'Level 2.3', icon: 'fa-star-empty' }
]
}
]
};
$().w2sidebar(sbar);
w2ui.layout.content('left', w2ui.sidebar);
});
</script>
</body>
</html>
[codepen_embed height=”400″ theme_id=”0″ slug_hash=”pqqJeq” default_tab=”result” user=”Freemen”]See the Pen pqqJeq by freemen (@Freemen) on CodePen.[/codepen_embed]
まとめ
今回はサイドバーのプロパティをコードで記述しましたが、ただの連想配列ですのでJsonファイルやPHPなどのサーバーサイドプログラムから読み込んで、ウェジットを表示することもできます。
今後そのあたりも、まとめられたらと思います。