jQuery EasyUI Panelパネルコンポーネント使用の詳細

パネルコンポーネントは、前のコンポーネントの使い方とほとんど違いません.パネルのプロパティの設定、オペレータパネルがトリガーするイベントの設定、パネルオブジェクトの操作方法の3つの点から学ぶことができます.
後ろには、このコンポーネントに依存するコンポーネントがあります.
もう1つは、パネルの内容がリモートデータを要求できることです.
例:

 
 
 
 
 
 
 
 
 
 
 
$(function () { 
  //     
  $('#box').panel({ 
    id : 'box',       //   ID     null 
    title : '      ',  //         ，   null 
    width : 500,      //        auto 
    height : 150,      //        auto 
    iconCls : 'icon-add',  //          ,  css          ，   null 
    //left : 100,      //               null 
    //top : 100,      //               null 
    cls : 'a',       //    CSS  ID    。   null。 
    headerCls : 'b',    //   css              null 
    bodyCls : 'c',     //   css              null 
    //     
    style : { 
      'min-height' : '200px', 
    }, 
    //fit : true,      //   false，                
    //border : false,    //   true            
    //doSize : false, 
    //noheader : true,   //   false，    true，               
    content : '<strong>      </strong>',    //          null 
    collapsible : true,   //               false 
    minimizable : true,   //            false 
    maximizable : true,   //            false 
    closable : true,    //             false 
    tools : '#tt',     //      ，     ，           ，            
    /* 
    tools : [{ 
      iconCls : 'icon-help', //   
      handler : function () { //       
        alert('help'); 
      }, 
    },{ 
    }], 
    */ 
    //collapsed : true,   //              
    //minimized : true,   //               
    //maximized : true,   //               
    //closed : true,    //             ，           ？ 
    //href : 'haicheng_demo/panel',     //      （ajax  ，    ） 
    //loadingMessage : '       ...',  //           ，         ,  loading... 
    //cache:false,     //   true，             。   true。 
    /** 
     * ajax             ，  return     
     * 
      extractor : function (data) {   
        return data+"</br>--2014.08.18"; 
      } 
     */ 
      
     //      ： 
    /*  
    onBeforeLoad : function () { 
      alert('        ！'); 
      return false;          //       
    }, 
    onLoad : function () { 
      alert('        ！'); 
    }, 
     
    onBeforeOpen : function () { 
      alert('      ！'); 
      return false;          //     
    }, 
    onOpen : function () { 
      alert('      ！'); 
    }, 
     
    onBeforeClose : function () { 
      alert('      ！'); 
      return false;          //     
    }, 
    onClose : function () { 
      alert('      ！'); 
    }, 
     
    onBeforeDestroy : function () { 
      alert('      ！'); 
      //return false;         //     
    }, 
    onDestroy : function () { 
      alert('      ！'); 
    }, 
     
    onBeforeCollapse : function () { 
      alert('      ！'); 
      //return false;         //     
    }, 
    onCollapse : function () { 
      alert('      ！'); 
    }, 
     
    onBeforeExpand : function () { 
      alert('      ！'); 
      //return false;         //     
    }, 
    onExpand : function () { 
      alert('      ！'); 
    }, 
     
    onMaximize : function () { 
      alert('        ！'); 
    }, 
    onRestore : function () { 
      alert('       ！'); 
    }, 
     
    onMinimize : function () { 
      alert('        ！'); 
    }, 
     
    onResize : function (width, height) { 
      alert(width + '|' + height); 
    }, 
     
    onMove : function (left, top) { 
      alert(left + '|' + top); 
    } 
    */ 
    //onBeforeOpen : function () { 
    // alert('      ！'); 
      //return false;         //     
    //}, 
 
  }); 
   
  //     
  //$('#box').panel('panel').css('position', 'absolute'); 
  //$('#box').panel('destroy'); 
  /* 
  $(document).click(function () { 
    $('#box').panel('resize', { 
      'width' : 600, 
      'height' : 300, 
    }); 
  }); 
   
  $(document).click(function () { 
    $('#box').panel('move', { 
      'left' : 600, 
      'top' : 300, 
    }); 
  }); 
  */ 
   
  //console.log($('#box').panel('options')); 
  //console.log($('#box').panel('panel')); 
  //console.log($('#box').panel('header')); 
  //console.log($('#box').panel('body')); 
  //$('#box').panel('setTitle', '  '); 
  //$('#box').panel('open', true); 
  //$('#box').panel('close'); 
  //$('#box').panel('destroy'); 
  //$('#box').panel('maximize'); 
  //$('#box').panel('restore'); 
  //$('#box').panel('minimize'); 
  //$('#box').panel('collapse'); 
  //$('#box').panel('expand'); 
}); 
 
 
 
 
 
 
  
    
 
 
 
 
    
    
    
 
 
 
 

他のところは言わないで、そのhref属性を言って、私が実際に勉強している間にSpringMVCのフレームワークに基づいて書いた例です.
バックグラウンドコード:

@RequestMapping(value = "panel") 
public ModelAndView panel(String _){ 
  System.out.println("****************    *******************"+_); 
  ModelAndView mv =new ModelAndView("/panelDemo/panelData.jsp"); 
  mv.addObject("data", "Hello Hirain!!!"); 
  return mv; 
} 

なぜ私のバックグラウンドメソッドにはパラメータStringが追加されましたか?どうですか.実際のリクエストを見たときurlの後ろに自動的にパラメータを綴ったので、バックグラウンドでこのパラメータを受信しないのも同じです.panelData.jsp内コードは${data}しかありません
ソースダウンロード:jQuery EasyUI Panelパネルコンポーネント