w2ui
この記事は最新更新日から、4年以上経過しています。

w2uiのレイアウトを定義する

レイアウトを使ってコンテンツの配置位置がデザイン出来たら、サイドバー

を使ってコンテンツを切り替えるサンプルを作って見ます。

レイアウトはシンプルな下記構成を使います。

 

サイドバーのプロパティを設定

次にレイアウトの左パネルに、サイドバーを設置していきます。

サイドバーのソースは、公式のDemo「Simple Sidebar」から頂きました。

 

 

サイドバーを作成する

プロパティを設定した変数「sbar」を引数に、w2sidebarウェジットを作成します。

作成するとプロパティのnameで設定した名前で、利用することができます。

上記のプロパティでは、「w2ui.sidebar」または「w2ui[‘sidebar’]」となります。

 

サイドバーをレイアウトの左パネルに表示する

レイアウトの「content」メソッドを利用して、サイドバーを表示します。

 

まとめると以下のようなコードになります。

CodePenが表示されない場合はこちら

See the Pen pqqJeq by freemen (@Freemen) on CodePen.

 

まとめ

今回はサイドバーのプロパティをコードで記述しましたが、ただの連想配列ですのでJsonファイルやPHPなどのサーバーサイドプログラムから読み込んで、ウェジットを表示することもできます。

今後そのあたりも、まとめられたらと思います。

By にど寝

もともと名古屋でシステムエンジニアをしてましたが、現在は地元に帰省してネットショップの社内システムエンジニアをしてます。  

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)