この記事は最新更新日から、4年以上経過しています。
公式のドキュメントから基本ソースを修正してみる
前回作成したソースに公式サイト用意されているソースを追加してみます。
|
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 |
<!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="css/w2.css" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="js/w2.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'); //■■■■この部分に追加■■■■ }); </script> </body> </html> |
w2uiのレイアウト用ウェジットには、6個のパネルが用意されています。
See the Pen BdBEgG by freemen (@Freemen) on CodePen.
idが「layout」のHTMLに、レイアウトパネルを6個設定する例になっています。
設定を変数に持たせて呼び出す
レイアウトの設定を変数に持たせて、呼び出している例になります。
変数に持たせることで、HTML描画終了後に動的に設定値を変更することが容易になります。
See the Pen LjPoEj by freemen (@Freemen) on CodePen.
表示した後に、パネル内のコンテンツを変更する
下記の例は、どちらも同じ結果になります。
|
1 2 |
w2ui['layout'].content('main', 'HTML content'); w2ui.layout.content('main', 'HTML content'); |
レイアウトの中に、レイアウトを設定してみる
6個のパネルが用意されていますが、パネルの中にレイアウトを設置することもできます。
See the Pen dzbEYJ by freemen (@Freemen) on CodePen.
レイアウトに外部HTMLを読み込ませる
レイアウトパネルに外部HTMLなどを読み込ませることもできます。
|
1 |
w2ui['layout'].load('preview', 'test2.html') |
サーバーが異なるHTMLを読み込む場合は、ヘッダーにAccess-Control-Allow-Originにて許可されている必要があるので、注意が必要です。
その他のレイアウトパネル設定
他にもいろいろと設定する項目がありますので、公式サイトを参考にする理想の使い方ができるかと思います。