1. 功能

    以风琴切换形式显示多个区域的内容或多个嵌套的 iframe 内容

  2. 说明

    Panel 组件由 Panel、PanelContent、PanelFrame 三个组合组件组成 PanelContent 组件用来放置当前页内的 HTML 片段 PanelFrame 组件用来嵌套其它的页面 HTML

  3. 参数

    参数名 参数类型 是否必须 默认值 描述
    name java.lang.String 元素 id 和 name 属性的值
    className java.lang.String 设置组件 class 样式
    switchAction java.lang.String 设置 Panel 组件切换时触发的动作
    openAll boolean false 默认是否展开所有项,且值为 true 时,切换动作不会导致上一项关闭
    closeAll boolean false 默认是否收缩所有项
    showScroll boolean false 默认是否显示外部滚动条
    width java.lang.String 宽度,默认自适应
    height java.lang.String 高度,默认自适应
  4. 相关组件

    1. PanelContent 组件

      1. 功能

        用来设置 Panel 组件 HTML 片段的组件

      2. 参数

        参数名 参数类型 是否必须 默认值 描述
        title java.lang.String 设置当前内容的 tab 标题
        active boolean false 默认是否在 Panel 组件中显示
        titleFn java.lang.String 页面中作为当前项 titleFn 的 id
        keepOpen boolean false 当前项是否保持打开状态
        height java.lang.String 高度,默认自适应
    2. PanelFrame 组件

      1. 功能

        用来设置 Panel 组件嵌套的 HTML 片段页面的组件

      2. 参数

        参数名 参数类型 是否必须 默认值 描述
        title java.lang.String 设置当前内容的 tab 标题
        active boolean false 默认是否在Panel组件中显示
        page java.lang.String PanelFrame 组件嵌套的页面的页面名称,必须的参数
        listener java.lang.String PanelFrame 组件嵌套的页面执行的初始化事件名
        params java.lang.String URL 请求参数,Get 方式。如&a=b&c=d
        subsys java.lang.String 子系统编码
        titleFn java.lang.String 页面中作为当前项titleFn的id
        keepOpen boolean false 当前项是否保持打开状态
        height java.lang.String 高度,默认自适应
  5. Javascript API

    var title=$.panel.get("mypanel").getCurrentTitle();//获取当前标签页标题
    var ctw=$.panel.get("mypanel").getCurrentContentWindow();//获取当前 Iframe 标签页的 ContentWindow
    var cur = $.panel.get("mypanel").getContentWindow("列表表格");//按标题获取 Iframe 标签页的 ContentWindow
    $.panel.get("mypanel").switchTo("列表表格");//按标题切换到另一项
    var array = $.panel.get("mypanel").getAllPanelTitle(); //返回 title 的数组
    $.panel.get("mypanel").setOpenAll(true);//设置是否默认展开所有项,且切换动作不会导致上一项关闭
    $.panel.get("mypanel").showScroll(true);//设置是否显示外部滚动条
    $.panel.get("mypanel").setKeepOpen("列表表格",true);//按标题设置是否保持打开状态
    $.panel.get("mypanel").refreshPanel();//刷新组件
    $.panel.get("mypanel").addPanelContent(title,siteIndex,html,titleFn,isActive,isKeepOpen,height);//js 增加 PanelContent 项
    $.panel.get("mypanel").addPanelFrame(title,siteIndex,titleFn,page,listener,params,subsys,isActive,isKeepOpen,height);//js 增加 PanelFrame 项
    
  6. 示例

    1. HTML 代码

      <div id="mypanel" name="mypanel" jwcid="mypanel@Panel"
      	width="100%" height="500px"
      	openAll="true" closeAll="false" showScroll="false"
      	switchAction="myPanelSwitchAction(ptitle,title)">
      	<div jwcid="@PanelContent" active="false" title="列表表格"  
      		keepOpen="true" height="400px" titleFn="cont_fn">
      		<div id="cont_fn" class="fn">
      			<a href="#nogo" class="e_button e_button-left"><i class="e_ico-add"></i><span>新增</span></a>
      			<a href="#nogo" class="e_button e_button-right"><i class="e_ico-edit"></i><span>编辑</span></a>
      			<a href="#nogo" class="e_button l_ml"><i class="e_ico-view"></i><span></span></a>
      		</div>
      		<div class="c_tree">
      			<ul>
      				<li class="unfold">
      					<a href="#nogo" class="ico"></a>
      					<a href="#nogo" class="text">亚联</a>
      					<ul>
      						<li class="file">
      							<a href="#nogo" class="ico"></a>
      							<a href="#nogo" class="text">收件箱</a>
      						</li>
      						<li class="file">
      							<a href="#nogo" class="ico"></a>
      							<a href="#nogo" class="text">发件箱</a>
      						</li>
      					</ul>
      				</li>
      				<li class="fold">
      					<a href="#nogo" class="ico"></a>
      					<a href="#nogo" class="text">个人</a>
      				</li>
      			</ul>
      		</div>
      	</div>
      	<iframe jwcid="@PanelFrame" title="静态树组件2" page="demo.Elements" 
      		active="false" style="height:500px;" keepOpen="false">
      	</iframe>
      	<div id="newHtml" class="c_tree" style="height:100px;">11111</div>
      </div>
      
    2. Javascript 代码

      <script language="javascript">
      function test(){
      	//js增加PanelContent项
      	$.panel.get("mypanel").addPanelContent("newContent",1,"newHtml","",true,false,"100%");
      	//js增加PanelFrame项
      	$.panel.get("mypanel").addPanelFrame("newFrame2",null,"","demo.Elements","initPage","&type=1",null,false,false,"100%");
      }
      function myPanelSwitchAction(ptitle,title){
      	//ptitle为当前标签页标题,title为要切换到的标签页标题
      	alert('switch:' + ptitle+"|" + title);
      	
      	//返回false,则不会做切换动作
      	return true;
      }
      </script>