jQueryのEasyUIレイアウト - ページレイアウトの境界線を作成します
東、西、北、南、中央:ボーダーレイアウト(ボーダーレイアウト)が5つの領域を提供しています。 ここではいくつかの一般的な用途は以下のとおりです。
- 北部地域は、バナーサイトを表示するために使用することができます。
- 南部は、著作権および一部の命令を表示するために使用することができます。
- 西エリアは、ナビゲーションメニューを表示するために使用することができます。
- 東エリアは、いくつかのプロモーションアイテムを表示するために使用することができます。
- 中央領域は、主コンテンツを表示するために使用することができます。
レイアウト(レイアウト)を適用するには、レイアウト(レイアウト)コンテナを決定し、その後、いくつかの領域を定義する必要があります。 少なくとも中心領域を必要としなければならないレイアウト(レイアウト)は、以下のレイアウト(レイアウト)の例であります:
<DIVクラス= "easyuiレイアウト"スタイル= "幅:400ピクセル、高さ200pxの;"> <div領域= "西"スプリット= "true"のタイトル= "ナビゲーター"スタイル= "幅:150ピクセル;"> <Pスタイル= "パディング:5pxの;マージン:0;">言語を選択する:</ P> <UL> <李> <a href="javascript:void(0)" onclick="showcontent('java')">のJavaする</a>ます。</ li> <李> <a href="javascript:void(0)" onclick="showcontent('cshape')"> C#する</a>ます。</ li> <李> <a href="javascript:void(0)" onclick="showcontent('vb')"> VBする</a>ます。</ li> <李> <a href="javascript:void(0)" onclick="showcontent('erlang')">アーランする</a>ます。</ li> </ UL> </ DIV> <DIVのID =「コンテンツ」領域= "センター"タイトル= "言語"スタイル= "パディング:5pxの;"> </ DIV> </ DIV>
私たちは、ボーダーレイアウト(ボーダレイアウト)での<div>コンテナを作成し、コンテナのレイアウト(レイアウト)は二つの部分に切断され、左、右のナビゲーションメニューがメインの内容です。
最後に、我々は、「showcontent '関数は非常に単純でデータを取得するためのonclickイベントハンドラを記述します。
関数showcontent(言語){ 。$( '#コンテンツ')HTML(+言語+ '言語' '入門'); }