EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局
EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度。对于web项目而言,主页面的一定是要进行良好的布局的,EasyUI中已经提供了一些LayOut的样式供我们修改。
对于前端框架的使用,我们要将它所需要的js文件和样式文件(图片文件,语言开发包)全部拷贝到我们的项目中,因为EasyUI是基于JQuery的所以我们首先得把JQuery的js文件引入,具体的相应的文件如下
<link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
1.EasyUI总的样式文件
2.EasyUI总的图片文件
3.JQuery文件
4.EasyUI的JS文件
5.中文语言包文件
将这些文件全部引入后,然后我们就可以找到EasuUI中关于LayOut布局的相关demo,将他们的代码全部拷贝过来,然后相应的修改,达到我们想要的效果
<body class="easyui-layout">
<!--上面-->
<div data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:10px">
<img src="~/Content/Images/logo.jpg" style="height:60px;width:auto;margin:0px;float:left"/>
<span class="txt" style="float:left">管理系统</span>
</div> <!--左面-->
<div data-options="region:'west',split:true,title:'管理选项卡'" style="width:150px;padding:3px;">
<div class="easyui-accordion" style="width:500px;height:300px;">
<div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<a href="javascript:void(0)" class="linkButton" url="/UserInfo/Index">用户管理</a>
</div>
<div title="角色管理" data-options="iconCls:'icon-help'" style="padding:10px;">
<a href="javascript:void(0)" class="linkButton" url="/RoleInfo/Index">角色管理</a>
</div> </div>
</div> <!--中间-->
<div data-options="region:'center'">
<div id="tt" class="easyui-tabs" style=" height: 100%; width: 100%;border:none ">
<div title="用户管理" style="padding:10px;height:100%;width:100%">
<iframe src="/UserInfo/Index" height="100%" width="100%" />
</div> </div> </div>
</body>
2.EasyUI之Tabs
在实际的开发中我们经常遇到使用Tabs的功能,可以让我们在页面中实现不同内容的切换,减少Page的数量,具体的Easyui的demo效果,此时我们可以去查找可以动态添加Tabs的demo,把里面的Js代码拷贝过来加以使用。
我们可以把Tabs的内容显示在LayOut的中间的,如上面的代码中的25行所示,当我们每次点击左边中的条目的时候,在右边添加相应的Tabs,同时点击不同的左边内容添加不同的Tabs,同时替换ifame中的内容,如果某一Tabs已经存在了,再次点击的时候不应该继续创建,而是直接focus。
实现上面叙述的功能,需要查阅EasyUI的开发手册,里面有相关的属性和方法,具体用到的:add、exists、select
<script >
$(function () {
//绑定单击选项卡事件
$('.linkButton').click(function () {
var text = $(this).text();
var urlStr = $(this).attr("url");
var isExt = $('#tt').tabs('exists', text); if (isExt)
{
$('#tt').tabs('select', text);
return;
}
$('#tt').tabs('add', {
title: text,
content:ShowUrl(urlStr),
closable: true
});
}); });
function ShowUrl(url) {
var content = '<iframe src="' + url + '" height="100%" width="100%" />';
return content;
}
</script>
从这些代码中可以看出EasyUI的代码的格式:$('#tt').tabs('exists', text);第一个参数为方法的名称,第二个参数是传入需要的参数
最后的总结:这些前端框架(EasyUI、miniUI等)的使用,大都是这种开发模式,引入相应的css文件和Js文件,根据自己的需求,寻找相应的demo,然后在demo的基础上修改样式,同时根据开发手册查找相应的api,实现我们需要的一些功能。
EasyUI之Layout布局和Tabs页签的使用的更多相关文章
- 第二百零二节,jQuery EasyUI,Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- easyui tabs页签显示在底部属性
data-options="tabPosition:'bottom'" 如果没有该属性 页签默认显示在最上面,效果如下 当加上了该属性 ,页签会出现在底部
- CI 笔记3 (easyui 的layout布局,最小化layout原型)
在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...
- java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs
1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 经历:easyui的layout自适应高度布局
在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢? 我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...
- easyui实现树形菜单Tab功能、layout布局
一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...
- 7.Layout布局(tabs、accordion、layout)
一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...
- MVC之LayOut布局页
LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <htm ...
随机推荐
- TypeError: datetime.datetime(2016, 9, 25, 21, 12, 19, 135649) is not JSON serializable解决办法(json无法序列化对象的解决办法)
1.一个简单的方法来修补json模块,这样序列将支持日期时间. import json import datetime json.JSONEncoder.default = lambda self, ...
- WordCount 远程集群源码
package test; import java.io.IOException; import java.util.StringTokenizer; import org.apache.hadoop ...
- 几个shell程序设计小知识(shell常识部分)
[转自]http://blog.chinaunix.net/uid-168249-id-2860686.html 引用:一.用户登陆进入系统后的系统环境变量: $HOME 使用者自己的目录 $PA ...
- delphi中设置listview行高的方法
第一步.在form中放置一个ImageList: 第二步.将ListView的SmallImages设置为第一步中放置的ImageList: 第三部.将imageList的height设置成自己需要的 ...
- c# JsonHelper类
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- Excel时间格式修改为文本格式
- A complete example using RAISE_APPLICATION_ERROR : raise_application_error
from:http://www.java2s.com/Tutorial/Oracle/0480__PL-SQL-Programming/AcompleteexampleusingRAISEAPPLIC ...
- Unity读取 JSon配置文件
一.记录 只是记录,现在在项目中删除掉了.先保留下来,以飨来着!!当然有包括自己. 二.读取配置的代码 简单粗暴 [ExecuteInEditMode] public class Config : M ...
- date类型数据插入
--字段类型是dateinsert into tab(column) values(to_date('2017_06_30 11:38:22','yyyy-mm-dd hh24:mi:ss'));-- ...
- JDK1.8在LINUX下安装步骤
JDK1.8在LINUX下安装步骤: 在/usr/lib/目录下新建jvm文件夹,如果已有jvm文件夹,则将之前的JDK版本删除,即在jvm目录下执行命令:rm –rf * 将JDK文件jdk-8u4 ...