JQueryEasyUI Layout布局框架的使用_Javascript教程-查字典教程网
JQueryEasyUI Layout布局框架的使用
JQueryEasyUI Layout布局框架的使用
发布时间:2016-12-30 来源:查字典编辑
摘要:layout就是一个布局面板:也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心。其中中心区域面板是必需的,但中心区域面板边缘区...

layout就是一个布局面板:

也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心。其中中心区域面板是必需的,但中心区域面板边缘区域面板是可选的。通过拖动它的边框,面板,可以调整每一个边缘地区。可以嵌套的布局,以便用户可以建立复杂的布局。

如果想要各个区域中的框架随框架的大小改变,请嵌套到layout框架中;

复制代码 代码如下:

<script type="text/javascript">

//split属性:如果设置为true将显示一个分隔条,用户可以拖动分隔条来改变布局面板的尺寸。

//href属性:在指定区域内加载页面的body中的部分,其他不加载

//在panel框架中我们可以看到这样一个正则选择(可根据自己需求进行更改):

// extractor: function (data) {

// var pattern = /<body[^>]*>((.|[nr])*)</body>/im;

// var matches = pattern.exec(data);

// if (matches) {

// return matches[1]; // only extract body content

// } else {

// return data;

// }

// }

//panel属性:返回特定的布局面板,'region'参数的可取值为:'north','south','east','west','center'。

function getPanel() {

var southPanel = $("#layoutbody").layout('panel', 'south');

//获得panel的属性

var attributes = southPanel.panel('options');

console.info(attributes); //可以看到其中的各个属性,浏览器调试,这里说明下:使用这种框架和使用js自己书写前台代码,浏览器调试是必不可少的:火狐或者谷歌

}

</script>

</head>

<body id="layoutbody">

<div data-options="region:'north',title:'North Title',split:true">

</div>

<div data-options="region:'south',title:'South Title',split:true">

</div>

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true">

</div>

<div data-options="region:'west',title:'West',split:true">

<input type="button" value="获取panel" />

</div>

<div data-options="region:'center',title:'center title'" href="Index.htm">

<input type="button" value="获取panel" /><>

</div>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类