1.列出要实现的样式:

2.实现的代码:

分三大部分:

1):页面主体部分:mian.vm

<html>
<head>
<title>Ks UI</title>
#parse("ui:include")
<style>
body{padding:0;margin:0}
</style>
<script>
$(document).ready(function(){
var tabs_content = $("#content");
tabs_content.tabs({
border:false,
fit:true
}); //添加tab页面
function addTabs(tab){
tabs_content.tabs("add",{
title:tab.text,
closable:true,
content : '<iframe frameborder="0" scrolling="auto" width="100%" height="100%" src="${path}'+tab.url+'"></iframe>'
});
} $("#tree_menu").tree({
onClick: function(node){
console.log(node);
if(!tabs_content.tabs('exists',node.text)){
if(node.url){
addTabs(node);
}
}else{
tabs_content.tabs("select",node.text);
}
}
}); //添加欢迎页面
addTabs({
text:'欢迎使用Ks UI',
url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/welcome.vm'
});
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:70px"></div>
<div data-options="region:'west',split:true" title="菜单" style="width:240px;">
<ul class="easyui-tree" id="tree_menu" data-options="url:'$path/ui/resource/demo/data/tree.json',method:'get',animate:true"></ul>
</div>
<div data-options="region:'center'">
<div class="easyui-tabs" id="content" >
</div>
</div>
</body>
</html>

说明:这部分代码负责完成效果页面的整体框架和效果页面center上面的tabs,重点看tabs是如何实现的(代码<script>函数部分)

2):center中竖着的tabs部分:

就是index.vm文件

<html>
<head>
<title></title>
#parse("ui:include")
<script>
$(document).ready(function(){
$("#tt").tabs({
tabPosition:'left',
fit:true,
onSelect:function(title,index){
open(index); }
}); function open(index){ var tab = $("#tt").tabs("getTab",index);
//console.log(tab);
//console.log(tab[0]);
//不重复打开
if(tab.attr("opend")){
return;
}
var url = tab.panel("options").url;
//var op=tab.panel("options");
//console.log(op);
if(url){
$(tab[0]).html('<iframe frameborder="0" scrolling="auto" width="100%" height="100%" src="${path}'+url+'"></iframe>');
tab.attr("opend",true);
} } open(0); });
</script>
</head>
<body> <div id="tt" class="easyui-tabs">
<div title="基本实现" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/base.vm'">
</div>
<div title="面板工具栏" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/mbgjl.vm'">
</div>
<div title="自定义工具栏" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/zdygjl.vm'">
</div>
<div title="面板页脚" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/mbyj.vm'">
</div>
<div title="加载面板内容" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/jzmbnr.vm'">
</div>
<div title="面板嵌套" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/mbqt.vm'">
</div>
<div title="流式面板" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/lsmb.vm'">
</div>
<div title="API" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/api.vm'">
</div>
</div>
</body>
</html>

3):竖着的tabs中的每个小窗口的示例文件:base.vm

<html>
<head>
<title></title>
#parse("ui:include")
</head>
<body>
<h2>基本面板Basic Panel</h2>
<p>面板是其他组件或元素的容器</p>
<div style="margin:20px 0 10px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
</div>
<div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
</body>
</html>

附上:mian.vm中用到的tree.json:

[{
"text":"基础组件",
"children":[
{"text":"面板Panel","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/index.vm"},
{"text":"数据表格DataGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datagrid/index.vm"},
{"text":"树形数据表格TreeGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/treegrid/index.vm"},
{"text":"分割按钮SplitButton","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/splitbutton/index.vm"},
{"text":"表单Form","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/form/index.vm"},
{"text":"下拉列表框ComboBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combobox/index.vm"},
{"text":"数字文本框微调NumberSpinner","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/numberspinner/index.vm"},
{"text":"时间框微调TimeSpinner","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/timespinner/index.vm"},
{"text":"窗口Window","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/window/index.vm"},
{"text":"放置Droppable","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/droppable/index.vm"},
{"text":"手风琴菜单Accordion","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/accordion/index.vm"},
{"text":"数据列表DataList","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datalist/index.vm"},
{"text":"链接按钮LinkButton","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/linkbutton/index.vm"},
{"text":"分页Pagination","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/pagination/index.vm"},
{"text":"文本框TextBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/textbox/index.vm"},
{"text":"数据表格下拉框ComboGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combogrid/index.vm"},
{"text":"日历Calendar","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/calendar/index.vm"},
{"text":"日期时间框微调DateTimeSpinner","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datatimespinner/index.vm"},
{"text":"对话框Dialog","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/dialog/index.vm"},
{"text":"调整大小Resizable","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/resizable/index.vm"},
{"text":"选项卡Tabs","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/tabs/index.vm"},
{"text":"属性网格PropertyGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/propertygrid/index.vm"},
{"text":"菜单Menu","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/menu/index.vm"},
{"text":"进度条ProgressBar","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/progressbar/index.vm"},
{"text":"文件框FileBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/filebox/index.vm"},
{"text":"树形下拉框ComboTree","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combotree/index.vm"},
{"text":"日期框DateBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datebox/index.vm"},
{"text":"滑动条Slider","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/slider/index.vm"},
{"text":"消息框Messager","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/messager/index.vm"},
{"text":"提示框Tooltip","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/tooltip/index.vm"},
{"text":"布局Layout","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/layout/index.vm"},
{"text":"树Tree","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/tree/index.vm"},
{"text":"菜单按钮MenuButton","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/menubutton/index.vm"},
{"text":"搜索框SearchBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/searchbox/index.vm"},
{"text":"自定义下拉框Combo","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combo/index.vm"},
{"text":"数字文本框NumberBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/numberbox/index.vm"},
{"text":"日期时间框DateTimeBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datetimebox/index.vm"},
{"text":"验证框ValidateBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/validatebox/index.vm"},
{"text":"拖动Draggable","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/draggable/index.vm"}
]
},{
"text":"组合组件",
"children":[
]
},{
"text":"功能组件",
"children":[
{"text":"分页数据列表"}
]
}]

这篇博文的目的主要是学习,各个main.vm和index.vm中<script></script>间函数的写法,如何能熟练正确的使用easyui各个模块的属性和方法:

其中通过chrome浏览器的console平台,借助console.log()方法,打印出index.vm文件中比较难理解的几个变量值:onSelect:function(title,index)中的title和index分别是tabs中各个子窗口的标题和索引号,索引号从0开始;

var tab = $("#tt").tabs("getTab",index);  打印出这里的var tab变量是整个大的页面;

console.log(tab[0]);  注意console输出的这个tab[0]恰好是tabs中选中的子窗口页面;

var url = tab.panel("options").url 中的url就是:/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/base.vm,也就是在index.vm中每个子窗口的地址;

easyui中tree模块的属性:

$("#tree_menu").tree({
onClick: function(node){
console.log(node);
if(!tabs_content.tabs('exists',node.text)){
if(node.url){
addTabs(node);
}
}else{
tabs_content.tabs("select",node.text);
}
}
});

这个函数中的node是什么呢?

这点可以看easyui中tree的api(当然也可以直接console输出):

每个节点都具备以下属性:

  • id:节点ID,对加载远程数据很重要。
  • text:显示节点文本。
  • state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
  • checked:表示该节点是否被选中。
  • attributes: 被添加到节点的自定义属性。
  • children: 一个节点数组声明了若干节点。

前端还是经验的积累,所以多看api!!,多参加实践!!

java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs的更多相关文章

  1. Java Web 前端高性能优化(二)

    一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAP ...

  2. Java Web 前端高性能优化(一)

    Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.所有 Web 的思想都是通用的,它们也可以运用到 Java Web.这一系列 ...

  3. Java Web 前端资源文件的路径问题

    WEB-INF是Java Web应用的安全目录,在部署时用于存放class文件.项目用到的库(jar包).Java Web应用的配置文件web.xml. 浏览器不能访问此目录下的资源,比如在WEB-I ...

  4. Java Web前端到后台常用框架介绍

    一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...

  5. Java后台+数据库+Java web前端(新手)

    实现简单页面上对数据的增删改查:Java后台+数据库表+Jsp前端网页设计 这里做一个简单的学生课程信息管理系统,做之前一定要先有自己的思路,要不然对新手来说,很容易乱的. 另有一完整的代码可供参考, ...

  6. Java web 前端面试知识点总结

    经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性 ...

  7. Java后台+数据库+Java web前端——记账本

    下面是本人实现的网页版(设计思路见上一篇https://www.cnblogs.com/sengzhao666/p/10445984.html) 代码如下: 运行截图: 首页: 创建: 账本删除:(先 ...

  8. java web 前端页面的分页逻辑

    <div class="divBody"> <div class="divContent"> <!--上一页 --> < ...

  9. java web前端调试手段

    1.console.log() 2. jQuery.ajax({                     url:"/task1/com/guodiantong/servlet/JsonTo ...

随机推荐

  1. RabbitMQ 高可用集群搭建

    面向EDA(事件驱动架构)的方式来设计你的消息 AMQP routing key的设计 RabbitMQ cluster搭建 Mirror queue policy设置 两个不错的RabbitMQ p ...

  2. Appium客户端,命令行启动server

    目标:通过命令行启动Appium的server   1.通过命令行安装的Appium   直接命令行输入appium即可启动服务   2.安装的Appium客户端   可以查看客户端中打印的启动日志: ...

  3. np.random.seed()

    124.np.random.seed()的作用 陈容喜 关注 2018.01.11 21:36 字数 3 阅读 4460评论 0喜欢 6 今天看到一段代码时遇到了np.random.seed(),搞不 ...

  4. Linux跑火车,提升趣味性

     實現跑火車[可陶冶情操,愉悦心情]##下载yum源[root@localhost ~]# wget http://mirror.centos.org/centos/7/extras/x86_64/P ...

  5. 删除排序数组中的重复数字 II · Remove Duplicates from Sorted Array II

    重复一次 [抄题]: 给定一个排序数组,在原数组中删除重复出现的数字,使得每个元素只出现一次,并且返回新的数组的长度. 不要使用额外的数组空间,必须在原地没有额外空间的条件下完成. [思维问题]: [ ...

  6. ROS学习笔记三(理解ROS节点)

    要求已经在Linux系统中安装一个学习用的ros软件包例子: sudo apt-get install ros-indigo-ros-tutorials ROS图形概念概述 nodes:节点,一个节点 ...

  7. Spring框架的事务管理的分类

    1. Spring的事务管理的分类 1. Spring的编程式事务管理(不推荐使用) * 通过手动编写代码的方式完成事务的管理(不推荐) 2. Spring的声明式事务管理(底层采用AOP的技术) * ...

  8. svn回退版本/取消修改

    取消对代码的修改分为两种情况:   第一种情况:改动没有被提交(commit). 这种情况下,使用svn revert就能取消之前的修改. svn revert用法如下: # svn revert [ ...

  9. 学美工、平面设计、UI设计,哪个有前途?

    首先,在分析学美工.平面设计.UI设计,哪一个更有前途的时候,先要对三类设计有一个大概的了解. 比如“学美工.平面设计.UI设计是什么”等知识,才能更好地去进行选择. 01 阐述美工.平面设计.UI设 ...

  10. dedecms连表查询参照

    ixingmeib2c/ds/entity_clas/tc_coupon_index.ls.php下面的getIndexInfo()方法