BOS_页面布局

最新推荐文章于 2021-11-09 20:40:55 发布

饮骅娜娜

最新推荐文章于 2021-11-09 20:40:55 发布

阅读量391

点赞数

分类专栏： BOS-System 文章标签： java

本文链接：https://blog.csdn.net/Lemmontion/article/details/78633929

版权

BOS-System 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BOS_页面布局

标签（空格分隔）： bos项目

页面布局

1_引用js,css

网络下载easyui的文件包(jquery-easyui-1.5.3.zip)
在html文件中引入EasyUI的3个就是文件2个css样式文件(本项目只需要引入以上五个文件)
jquery.min.js(jquery文件)
jquery.easyui.min.js(essyui的核心文件)
easyui-lang-zh_CN.js(国际化文件)
icon.css(图标样式)
easyui.css(主题样式)

2_创建基本页面布局

如果需要占用全部网页,就在body标签上添加class=”easyui-layout”,否则可以在一个div上添加以上样式即可;
- 这里data-options是固有属性,region声明框架的五大区域,东西南北中;
- title为标题名;split设置为true可以改变该区域的大小

<body class="easyui-layout">
    <div data-options="region:'north',title:'标题名',split:true" style="height:100px;">北部区域</div>
    <div data-options="region:'south',title:'版权声明',split:true" style="height:100px;">南部区域</div>
    <div data-options="region:'east',title:'右边是东',split:true" style="width:100px;">东部区域</div>
    <div data-options="region:'west',title:'导航栏',split:true" style="width: 150px">
         //导航栏内部设置下拉菜单使用easyui-accordion样式fit设置为true表示自适应外部div容器
        <div class="easyui-accordion"  data-options= "fit:true" style="width: 300px;height:200px" >
            <div data-options = "title : '基础菜单'">
                //设置ztree,需要引入ztree的相关js,css文件
                <ul id="baseTree" class="ztree"></ul>
            </div>
        <div data-options = "title : '系统菜单'">面板二</div>
    </div>
    </div>
    <div data-options="region:'center',title:'中部区域',split:true" >
            <div class="easyui-tabs" data-options="fit:true" id="mytabs">
                <div title="样式" data-options="closable:true">样式</div>
            </div>
    </div>

3_创建树结构目录

引用文件
下载JQuery zTreev3.5.02.zip文件包,同样引用相关文件
- jquery.ztree.all-3.5.min.js(all包表示包括core核心功能+excheck勾选功能+exedit 编辑功能 + exhide 隐藏功能)
- zTreeStyle.css(ztree样式文件)

通过ztree制作树型菜单,两种写法
标准json数据

    var nodes=[
    {name:"父节点1",children:[{name:"子节点1",name:"子节点2"}]}
];

简单json数据

    var nodes =[
    {id:1,pId:0,name:"F1"}
    {id:2,pId:0,name:"F2"}
    {id:11,pId:1,name:"F1子节点1"}
    {id:12,pId:1,name:"F1子节点2"}
    {id:11,pId:2,name:"F2子节点1"}
    {id:12,pId:2,name:"F2子节点2"}
];

这里pId中的’I’要大写
id表当前节点编号,pId代表父节点

设置树形目录三步走
第一步
在需要显示ztree位置添加ul标签,定义id,定义class=”ztree”

<ul id="baseTree" class="ztree"></ul>

第二步
开启简单数据格式支持(默认为标准json数据,我们使用简单数据结构,所以要修改)

var setting = {
    data:{
        simpleData:{
            enable:true
        }
    }
}

第三步
编写树形目录数据

var zNodes = {
    {id:1,pId:0,name:"F1"}
    {id:2,pId:0,name:"F2"}
    {id:11,pId:1,name:"F1的子节点1"}
    {id:22,pId:2,name:"F2的子节点1"}
};

第四步
生成树形目录

$.fn.zTree.init($("#baseTree"),setting,zNodes);

4_创建选项卡

在中心区域声明div设置class=”easyui-tabs”

<div class="easyui-tabs" data-options="fit:true" id="mytabs">
    <div title="样式1" data-options="closable:true">样式1</div>
</div>

fit:true 自适应父容器大小
closable:true设置出现关闭的小叉号

关于选项卡和树形目录的整合
首先在zNodes自定义添加page属性,设置一个网址

{id:21,pId:2,name:"csdn",page:"http://www.itcast.com"},
{id:22,pId:2,name:"百度",page:"http://www.baidu.com"}

然后为每个树形目录添加点击事件(在setting下面添加callback属性)

callback{
    onClick:function(event,treeld,treeNode,clickFlag){
    var cntent="<div style='width:100%;height:100%;overflow:hidden;'> " +"<iframe src='"+treeNode.page+"' scrolling='auto' style='width:100%;height:100%;border:10;'></iframe></div>";
       if(treeNode.page!=undefined&&treeNod.paeg!=""){
       if($("#mytabs").tabs("exists",treeNode.name)){
       $("#mytabs").tabs("select",treeNode.name);
       }else{
       $("#mytabs").tabs("add",{title:treeNode.name,content:content,closable:true})
    }
}

以上流程,点击执行方法,如果点击的菜单有page属性值,就继续判断这个选项是否已经存在,如果存在调用选择方法,如果不存在则调用添加方法,添加属性有个content(内容),overflow:hidden设置隐藏掉滑动栏,<iframe>为内框架标签

增强选项卡
关闭当前选项卡,关闭其他选项卡,关闭所有选项卡
首先声明一个隐藏的div

<div id="myleft" class="easyui-menu" style="width: 150px;">
    <div>关闭当前窗口</div>   
    <div>关闭其他窗口</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-cancel'">关闭所有窗口</div>  
    </div>
</div>

class=”menu-sep”表示一个分割线 data-options=”iconCls:’icon-cancel’”,添加一个关闭的图标
然后将选项卡右键显示出来

$("#mytabs").tabs({
    onContextMenu:function(e,title,index){
    e.preventDefault();
    $("#myleft").menu("show",{
            left:e.pageX,
            top:e.pageY
    });

右键点击事件
onContextMenu:function(e,title,index){}
e表示事件,title,选项卡名字,index暂时未知
e.preventDefault();消除当前系统默认右键提示
e.pagex,鼠标当前x轴位置
e.pagey,鼠标当前有轴位置

下拉列表

首先设置一个div标签,然后声明它的class为easyui-menubutton

<a href="javascript:void(0)" class="easyui-menubutton"
data-options="iconCls:'icon-save',menu:'#mySelect'">下拉列表</a>

<div id="mySelect" style="width: 120px;">
    <div>菜单1</div>
    <div>菜单2</div>
    <div >菜单3</div>
    <div class="menu-sep"></div>
    <div>菜单4</div>
</div>

另外设置一个下拉列表依附超链接,设置class=”easyui-menubutton”,还要将两者绑在一起,设置data-options-menu:’#mySelect’

消息框的使用

警告窗口的使用
$.messager.alert(“标题”,”内容1”,”warning”,function(){});
该方法中参数分别为标题,内容,图标(warnning,error等),方法(这里可以省略)

确认窗口


$.messager.confirm("你快乐么?","快乐就确定!",function(a){
if(a){
    alert("哈哈哈,我也很快乐!");
}else{
    alert("我很不快乐!");
}

输入窗口


$.messager.prompt("调查","你的名字!",function(val){
    alert(val);
});

右下角提示

$.messager.show({
    title:"赚钱啦",
    msg:"<a href='#'>快点我赚黄金,时不待你!<a>",
    timeout:2000
})
如果鼠标不放在上面,两秒后就会自动消失

骗人的进度条

$.messager.progress({
interval:1000
});
window.setTimeout("$.messager.progress('close')",5000);
估算时间关闭,造成进度条假象

饮骅娜娜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOS_页面布局

BOS_页面布局标签（空格分隔）： bos项目页面布局1_引用js,css网络下载easyui的文件包(jquery-easyui-1.5.3.zip) 在html文件中引入EasyUI的3个就是文件2个css样式文件(本项目只需要引入以上五个文件) jquery.min.js(jquery文件) jquery.easyui.min.js(essyui的核心文件) easyui-lang-z
复制链接

扫一扫