[JS]Webページやアプリ用のさまざまなレイアウトを簡単に実装できる便利なスクリプト -Golden Layout
Post on:2016年4月18日
sponsors
Webページやアプリ用のマルチスクリーン対応の柔軟なレイアウトを簡単に実装できるjQuery, React, Angularに対応したスクリプトを紹介します。
Golden Layout
Golden Layout -GitHub
Golden Layoutの特徴
Golden LayoutはjQuery, React, Angularに対応したMITライセンスのレイアウト マネージャーです。
- ネイティブのポップアップウインドウ
- デザインはテーマで簡単に変更可能
- 包括的なAPI
- パワフルな持続性
- IE8+, Firefox, Chrome対応
Golden Layoutのデモ
デモではGolden Layoutで実装されたレイアウトのHTML, CSS, JSをカスタマイズすることもできます。
Golden Layout デモページ: Golden Spiral
Golden Layout デモページ: Synced Layout
Golden Layout デモページ: Panel Scrolling
Golden Layout デモページ: Slick Grid
Golden Layoutの使い方
外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script> <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" /> </head> |
テーマファイル
テーマ用のスタイルシートを加えることで、デザインを変更できます。
|
1 |
<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" /> |
各レイアウトの実装方法は、下記ページをご覧ください。
sponsors
