jquery easy ui 1.3.4コンテンツコンポーネント(2)

2.1、パネル
panelパネルはeasyuiの中で非常に基礎的なコンテンツコンポーネントであり、私たちが後期に学んだtabs(タブ)、accordion(アコーディオン)の2つのコンテンツコンポーネントはpanelコンポーネントに依存している.パネルコンポーネントコードを構築するには、次のようにします.
  $("#myDiv").panel({
title:「js方式のpanel」,
               width: 300,
               height: 500,
fit:true、これを加えると設定パネルの内容が見えません
                                    border: true,
content:「パネルの内容を設定する」
)}
2.1.1、panelその他の常用属性
l loadingMessage:リモートデータをロードするときにパネルにメッセージを表示します.
l href:panelコンテンツロードアドレス
l collapsible:収縮/表示ボタンの追加
l closable:閉じるボタンを表示
l minimized:最大化ボタンを表示
l maximized:最小化ボタンの表示
l closed:初期にパネルを閉じるかどうか
2.1.2、panel-toolsの追加
                       
パネルのヘッダに上図のような機能ボタンを付ける必要がある場合は、パネルのtoolsプロパティを使用してツールボタンを追加できます.コードは次のとおりです.
tools: [{
                   iconCls: 'icon-add',
                   handler: function () {
                       $.messager.alert(「システムヒント」「追加ボタンをクリックした」)
                   }
               }, {
                   iconCls: "icon-save",
                   handler: function () {
                       $.messager.alert(「システムヒント」「保存ボタンをクリックした」)
                   }
               }]
2.2、tabs(タブ)
依存関係と同様にtabs依存panelとlinkbuttonが知られている.tabsもpanel属性と方法を使用できることを説明します.tabsのadd方法はtabsにtabページを追加することです.
var tabs = $("#tt").tabs({
                border: false,
                fit: true,
});
 $('#tt').tabs('add', {
タイトル:'Tabページ',
content:'tabページ内',
         closable: true,
         width: 50,
});
2.2.1、tabs(タブ)--共通属性
l plain:簡潔モード
l toolPosition:ツールバーの位置、leftとrightの2つの値があります
l tabPosition:タグ位置、top、bottom、left、right
l headerWidth:ラベルの幅、toolPositionのみleft、right有効
l scrollDuration:各スクロールアニメーションの持続時間
l scrollIncrement:ラベルごとにスクロールするピクセル
2.2.2、tabs(タブ)—tools
同じtabsにもtoolsはありますがtoolsは違う場所で使うと違う効果があります
tools: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        alert('add');
                    }
               }]
easyuiはラベルという比較的特殊なtoolsに対してデフォルトのicon-miniのアイコンスタイルを書いた.
tools: [{
                    iconCls: 'icon-mini-refresh',
                    handler: function () {
                        alert('refresh');
                    }
                }]
3、Accordion(アコーディオン)
accordion(アコーディオン)レイアウトは、関連する機能またはコンテンツのセットを一緒に配置し、各タブではhrefを使用してコンテンツをロードしたり、contentプロパティを使用して値を設定したりすることができます.

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   

    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   

        <h3 style="color:#0099FF;">Accordion for jQuery</h3>   

        <p>Accordion is a part of easyui framework for jQuery.     

        It lets you define your accordion component on web page more easily.</p>   

    </div>   

    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   

        content2    

    </div>   

    <div title="Title3">   

        content3    

    </div>   

</div>  

 
 
パネルのいくつかの機能を変更または変更してから再作成できます.
$('#aa').accordion({   
    animate:false  
});