jQuery EasyUI Panel面板組件使用詳解

更新時間：2017年02月28日 16:49:06 作者：hai_cheng001

這篇文章主要為大家詳細介紹了jQuery EasyUI Panel面板組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

panel面板組件,跟前面的組件用法幾乎都差不多，也是從設(shè)置一些面板屬性、操作面板觸發(fā)的事件、我們可針對面板對象的操作方法這三個點去學(xué)習(xí)。

后面有一些組件要依賴于這個組件。

還有一點跟前面不同的就是面板內(nèi)容可以請求遠程數(shù)據(jù)。

示例：

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Easy UI</title> 
<meta charset="UTF-8" /> 
<script type="text/javascript" src="easyui/jquery.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> 
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" rel="external nofollow" /> 
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> 
<script> 
$(function () { 
  //屬性列表 
  $('#box').panel({ 
    id : 'box',       //面板的ID值 默認為null 
    title : '我是一個面板',  //面板顯示的標(biāo)題文本，默認為null 
    width : 500,      //面板寬度 默認為auto 
    height : 150,      //面板高度 默認為auto 
    iconCls : 'icon-add',  //面板左上角的一個圖標(biāo),可去css樣式中自定義圖標(biāo)文件，默認為null 
    //left : 100,      //設(shè)置面板距離左邊的距離 默認為null 
    //top : 100,      //設(shè)置面板距離上邊的距離 默認為null 
    cls : 'a',       //添加一個CSS 類ID 到面板。默認為null。 
    headerCls : 'b',    //參數(shù)為css類  定義面板頭部樣式 默認null 
    bodyCls : 'c',     //參數(shù)為css類  定義面板正文樣式 默認null 
    //面板樣式 
    style : { 
      'min-height' : '200px', 
    }, 
    //fit : true,      //默認為false，含義是面板大小是否自適應(yīng)父容器 
    //border : false,    //默認為true 定義是否顯示面板邊框 
    //doSize : false, 
    //noheader : true,   //默認為false，當(dāng)設(shè)置為true，在創(chuàng)建面板的時候不會創(chuàng)建標(biāo)題 
    content : '<strong>面板主體內(nèi)容</strong>',    //面板主體內(nèi)容 默認為null 
    collapsible : true,   //是否顯示可折疊按鈕   默認為false 
    minimizable : true,   //是否顯示最小化按鈕 默認false 
    maximizable : true,   //是否顯示最大化按鈕 默認false 
    closable : true,    //是否定義關(guān)閉按鈕   默認false 
    tools : '#tt',     //定義工具菜單，有兩種方式，一種是下面那個數(shù)組方式，另一種指向定義好的菜單 
    /* 
    tools : [{ 
      iconCls : 'icon-help', //圖標(biāo) 
      handler : function () { //點擊觸發(fā)函數(shù) 
        alert('help'); 
      }, 
    },{ 
    }], 
    */ 
    //collapsed : true,   //是否在初始化的時候折疊面板 
    //minimized : true,   //是否在初始化的時候最小化面板 
    //maximized : true,   //是否在初始化的時候最大化面板 
    //closed : true,    //是否在初始化的時候關(guān)閉面板，這個屬性什么時候能用到？ 
    //href : 'haicheng_demo/panel',     //遠程請求數(shù)據(jù)（ajax請求，不能跨域） 
    //loadingMessage : '正在努力加載中...',  //正在加載遠程數(shù)據(jù)的時候，在面板內(nèi)顯示的信息,默認loading... 
    //cache:false,     //如果為true，在超鏈接載入時緩存面板內(nèi)容。默認為true。 
    /** 
     *對ajax遠程請求回來的數(shù)據(jù)進行處理，然后return到面板上 
     * 
      extractor : function (data) {   
        return data+"</br>--2014.08.18"; 
      } 
     */ 
      
     //觸發(fā)事件列表： 
    /*  
    onBeforeLoad : function () { 
      alert('遠程加載之前觸發(fā)！'); 
      return false;          //取消遠程加載 
    }, 
    onLoad : function () { 
      alert('遠程加載之后觸發(fā)！'); 
    }, 
     
    onBeforeOpen : function () { 
      alert('打開之前觸發(fā)！'); 
      return false;          //取消打開 
    }, 
    onOpen : function () { 
      alert('打開之后觸發(fā)！'); 
    }, 
     
    onBeforeClose : function () { 
      alert('關(guān)閉之前觸發(fā)！'); 
      return false;          //取消關(guān)閉 
    }, 
    onClose : function () { 
      alert('關(guān)閉之后觸發(fā)！'); 
    }, 
     
    onBeforeDestroy : function () { 
      alert('銷毀之前觸發(fā)！'); 
      //return false;         //取消銷毀 
    }, 
    onDestroy : function () { 
      alert('銷毀之后觸發(fā)！'); 
    }, 
     
    onBeforeCollapse : function () { 
      alert('折疊之前觸發(fā)！'); 
      //return false;         //取消折疊 
    }, 
    onCollapse : function () { 
      alert('折疊之后觸發(fā)！'); 
    }, 
     
    onBeforeExpand : function () { 
      alert('展開之前觸發(fā)！'); 
      //return false;         //取消展開 
    }, 
    onExpand : function () { 
      alert('展開之后觸發(fā)！'); 
    }, 
     
    onMaximize : function () { 
      alert('窗口最大化時觸發(fā)！'); 
    }, 
    onRestore : function () { 
      alert('窗口還原時觸發(fā)！'); 
    }, 
     
    onMinimize : function () { 
      alert('窗口最小化時觸發(fā)！'); 
    }, 
     
    onResize : function (width, height) { 
      alert(width + '|' + height); 
    }, 
     
    onMove : function (left, top) { 
      alert(left + '|' + top); 
    } 
    */ 
    //onBeforeOpen : function () { 
    // alert('打開之前觸發(fā)！'); 
      //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', '標(biāo)題'); 
  //$('#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'); 
}); 
 
</script> 
</head> 
<body> 
<!-- 
  <div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;"> 
    <p>內(nèi)容區(qū)域</p> 
  </div> 
--> 
<div id="box"> 
  <p>內(nèi)容區(qū)域</p> 
</div> 
 
<div id="tt"> 
  <a class="icon-add" onclick="javascript:alert('add')"> </a> 
  <a class="icon-edit" onclick="javascript:alert('edit')"> </a> 
  <a class="icon-cut" onclick="javascript:alert('cut')"> </a> 
</div> 
 
</body> 
</html>

其他地方不說了，就說一下那個href屬性，我在實際學(xué)習(xí)的時候是基于一個SpringMVC框架寫的例子。

后臺代碼：

@RequestMapping(value = "panel") 
public ModelAndView panel(String _){ 
<span style="white-space:pre">  </span>System.out.println("****************進入后臺*******************"+_); 
<span style="white-space:pre">  </span>ModelAndView mv =new ModelAndView("/panelDemo/panelData.jsp"); 
<span style="white-space:pre">  </span>mv.addObject("data", "Hello Hirain!!!"); 
<span style="white-space:pre">  </span>return mv; 
}

為什么我的后臺方法多了個參數(shù)String _呢？是因為我看到它實際請求的時候在url后面自動拼上了一個參數(shù)_，后臺不接收這個參數(shù)也一樣。
panelData.jsp內(nèi)代碼就只有${data}

源碼下載：jQuery EasyUI Panel面板組件

您可能感興趣的文章: