w2uiのレイアウトを定義する
レイアウトを使ってコンテンツの配置位置がデザイン出来たら、サイドバー
を使ってコンテンツを切り替えるサンプルを作って見ます。
レイアウトはシンプルな下記構成を使います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!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」から頂きました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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ウェジットを作成します。
1 |
$().w2sidebar(sbar); |
作成するとプロパティのnameで設定した名前で、利用することができます。
上記のプロパティでは、「w2ui.sidebar」または「w2ui[‘sidebar’]」となります。
サイドバーをレイアウトの左パネルに表示する
レイアウトの「content」メソッドを利用して、サイドバーを表示します。
1 |
w2ui.layout.content('left', w2uisidebar); |
まとめると以下のようなコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!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> |
See the Pen pqqJeq by freemen (@Freemen) on CodePen.
まとめ
今回はサイドバーのプロパティをコードで記述しましたが、ただの連想配列ですのでJsonファイルやPHPなどのサーバーサイドプログラムから読み込んで、ウェジットを表示することもできます。
今後そのあたりも、まとめられたらと思います。