jQueryEasyUIPanel面板組件怎么用

小編給大家分享一下jQuery EasyUI Panel面板組件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是專業(yè)的果洛州網(wǎng)站建設(shè)公司，果洛州接單;提供成都網(wǎng)站設(shè)計、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行果洛州網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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

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

還有一點跟前面不同的就是面板內(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 : '我是一個面板',  //面板顯示的標題文本，默認為null 
    width : 500,      //面板寬度 默認為auto 
    height : 150,      //面板高度 默認為auto 
    iconCls : 'icon-add',  //面板左上角的一個圖標,可去css樣式中自定義圖標文件，默認為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，含義是面板大小是否自適應父容器 
    //border : false,    //默認為true 定義是否顯示面板邊框 
    //doSize : false, 
    //noheader : true,   //默認為false，當設(shè)置為true，在創(chuàng)建面板的時候不會創(chuàng)建標題 
    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', //圖標 
      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', '標題'); 
  //$('#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="面板" > 
    <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屬性，我在實際學習的時候是基于一個SpringMVC框架寫的例子。

后臺代碼：

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

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

以上是“jQuery EasyUI Panel面板組件怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：jQueryEasyUIPanel面板組件怎么用
網(wǎng)址分享：http://vcdvsql.cn/article22/jhjdjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、建站公司、面包屑導航、服務器托管、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

jQueryEasyUIPanel面板組件怎么用