jQueryのEasyUIレイアウト - パネルに複雑なレイアウトを作成します
パネル(パネル)は、様々な目的のためのカスタムレイアウトを作成することができます。 この例では、パネル(パネル)およびレイアウト(レイアウト)プラグインMSNのメッセージボックスを作成するために使用します。
私たちは、パネルの領域に複数のレイアウト(レイアウト)を使用します。 メッセージボックスの上部には、我々は、クエリ入力ボックスを配置し、右の写真の図を配置します。 スプリットプロパティを設定することにより、私たちの地域の真ん中が真で、この部分は2つの部分に切断し、ユーザーがパネル領域のサイズを変更することができます。
ここではすべてのコードは次のとおりです。
<DIVクラス= "easyuiパネル"タイトル=「複合パネルレイアウト」iconCls = "アイコン検索」折りたたみ式=" true "のスタイル="パディング:5pxの;幅:500pxなど;高さ:250ピクセル; "> <DIVクラス= "easyuiレイアウト「フィット="真 "> <div領域= "北"国境= "false"をクラス= "P-検索」> <ラベル>検索:</ label>は<入力> </入力> </ DIV> <div領域= "センター"国境= "false"に> <DIVクラス= "easyuiレイアウト「フィット="真 "> <div領域= "東"国境= "false"をクラス= "P-右"> <IMG SRC = "画像/ msn.gif" /> </ DIV> <div領域= "センター"国境= "false"のスタイル= "国境:1pxの固体#CCC;"> <DIVクラス= "easyuiレイアウト「フィット="真 "> <div領域= "南"スプリット= "true"の国境= "false"のスタイル= "高さ:60ピクセル;"> <テキストエリアのスタイル= "国境:0;幅:100%;高さ:100%;サイズを変更:なし">。こんにちは、私はeasyui </ TEXTAREA> </ DIV> <div領域= "センター"国境= "false"に> </ DIV> </ DIV> </ DIV> </ DIV> </ DIV> </ DIV> </ DIV>
我々は、彼らがユーザインターフェースの非常に強力なデザインを持っている任意のJavaScriptコードを記述する必要はありません。