EasyUI 主布局整合。
博文学习地址:http://www.cnblogs.com/xishuai/p/3620327.html
html:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasyUILoutMain.aspx.cs" Inherits="WebFM.EasyUILoutMain" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="EasyUI/themes/icon.css" rel="stylesheet" />
<link href="css/admin.css" rel="stylesheet" />
<script src="EasyUI/jquery.min.js"></script>
<script src="EasyUI/jquery.easyui.min.js"></script>
<script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
<img src="data:images/main.png" />EasyUIDemo
</div>
<div data-options="region:'south',border:false" style="height: 23px;">
<div class="footer">EasyUIDemo</div>
</div> <div data-options="region:'west',split:true" title="导航栏菜单" style="width: 170px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="系统设置1" data-options="selected:true">
<div style="margin: 5px">
<ul class="tree easyui-tree" data-options="animate:true,lines:true">
<li data-options="iconCls:'icon-group'">
<span>基本设置</span>
<ul>
<li data-options="iconCls:'icon-group_add'">
<span>test1</span>
</li>
<li data-options="iconCls:'icon-group_delete'">
<span>test2</span>
</li>
<li data-options="iconCls:'icon-group_edit'">
<span>test3</span>
</li>
</ul>
</li>
<li data-options="state:'closed',iconCls:'icon-joystick'">
<span>系统设置</span>
<ul>
<li data-options="iconCls:'icon-joystick_add'">
<span>test4</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div title="系统设置2" style="padding: 10px;">
content2
</div>
<div title="系统设置3" style="padding: 10px">
content3
</div>
</div>
</div> <div data-options="region:'center'">
<div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'">
<div title="主页" data-options="iconCls:'icon-house'" style="padding: 10px; height: 100%;">主页</div>
</div> <iframe style="width:inherit" src="showdialog.aspx"></iframe> <div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div> <div style="margin: 10px 0;"></div>
<div style="padding: 10px 0 10px 60px">
<form id="ff" method="post">
<table>
<tr>
<td>名称:</td>
<td>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>标题:</td>
<td>
<input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
</tr>
<tr>
<td>内容:</td>
<td>
<textarea name="message" style="height: 60px;"></textarea></td>
</tr>
<tr>
<td>语言:</td>
<td>
<select class="easyui-combobox" name="language">
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-cht">Chinese</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en" selected="selected">English</option>
<option value="et">Estonian</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="ht">Haitian Creole</option>
<option value="he">Hebrew</option>
<option value="hi">Hindi</option>
<option value="mww">Hmong Daw</option>
<option value="hu">Hungarian</option>
<option value="id">Indonesian</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="no">Norwegian</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div style="padding: 5px; margin-left: 100px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
</div>
<div id="dlg" class="easyui-dialog" title="提示..." style="width: 250px; height: 120px; padding: 10px"
data-options="
iconCls: 'icon-save',
buttons: [{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
alert('cancel');;
}
}]
">
确认提交吗？
</div> </div> <div id="mm" class="easyui-menu" style="width: 150px;">
<div id="refresh" data-options="iconCls:'icon-arrow_refresh'">刷新</div>
<div class="menu-sep"></div>
<div id="close">关闭</div>
<div id="closeall">全部关闭</div>
<div id="closeother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="closeright">当前页右侧全部关闭</div>
<div id="closeleft">当前页左侧全部关闭</div>
<div class="menu-sep"></div>
<div id="exit">退出</div>
</div> <script type="text/javascript">
var index = 0;
function addPanel() {
index++;
$('#tabs').tabs('add', {
title: 'Tab' + index,
content: '<div style="padding:10px">Content' + index + '</div>',
closable: true
});
}
function removePanel() {
var tab = $('#tabs').tabs('getSelected');
if (tab) {
var index = $('#tabs').tabs('getTabIndex', tab);
$('#tabs').tabs('close', index);
}
} var onlyOpenTitle = "主页";//不允许关闭的标签的标题
$(function () {
tabClose();
tabCloseEven();
}) function tabClose() {
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function () {
var subtitle = $(this).children(".tabs-closable").text();
$('#tabs').tabs('close', subtitle);
})
/*为选项卡绑定右键*/
$(".tabs-inner").bind('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle = $(this).children(".tabs-closable").text();
$('#mm').data("currtab", subtitle);
$('#tabs').tabs('select', subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven() {
$('#mm').menu({
onClick: function (item) {
closeTab(item.id);
}
});
return false;
} //创建/移除tab
var index = 0;
function addTab(subtitle, url, icon) {
index++;
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: 'Tab' + index,
content: createFrame('http://www.baidu.com/'),
closable: true,
icon: ''
});
} else {
$('#tabs').tabs('select', subtitle);
$('#mm-tabupdate').click();
}
tabClose();
}
function removeTab() {
var tab = $('#tabs').tabs('getSelected');
if (tab) {
var index = $('#tabs').tabs('getTabIndex', tab);
$('#tabs').tabs('close', index);
}
}
//创建Frame
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
return s;
} //关闭tab
function closeTab(action) {
var alltabs = $('#tabs').tabs('tabs');
var currentTab = $('#tabs').tabs('getSelected');
var allTabtitle = [];
$.each(alltabs, function (i, n) {
allTabtitle.push($(n).panel('options').title);
})
switch (action) {
case "refresh":
var iframe = $(currentTab.panel('options').content);
var src = iframe.attr('src');
$('#tabs').tabs('update', {
tab: currentTab,
options: {
content: createFrame(src)
}
})
break;
case "close":
var currtab_title = currentTab.panel('options').title;
$('#tabs').tabs('close', currtab_title);
break;
case "closeall":
$.each(allTabtitle, function (i, n) {
if (n != onlyOpenTitle) {
$('#tabs').tabs('close', n);
}
});
break;
case "closeother":
var currtab_title = currentTab.panel('options').title;
$.each(allTabtitle, function (i, n) {
if (n != currtab_title && n != onlyOpenTitle) {
$('#tabs').tabs('close', n);
}
});
break;
case "closeright":
var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); if (tabIndex == alltabs.length - 1) {
alert('亲，后边没有啦 ^@^!!');
return false;
}
$.each(allTabtitle, function (i, n) {
if (i > tabIndex) {
if (n != onlyOpenTitle) {
$('#tabs').tabs('close', n);
}
}
});
break;
case "closeleft":
var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
if (tabIndex == 1) {
alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
return false;
}
$.each(allTabtitle, function (i, n) {
if (i < tabIndex) {
if (n != onlyOpenTitle) {
$('#tabs').tabs('close', n);
}
}
});
break;
case "exit":
$('#closeMenu').menu('hide');
break;
}
}
</script> <script>
$(function () {
$('#dlg').dialog('close')
})
function submitForm() {
$('#dlg').dialog('open')
//$('#ff').form('submit');
}
function clearForm() {
$('#ff').form('clear');
}
</script>
</body>
</html>
效果图：
EasyUI 主布局整合。的更多相关文章
- 【开源】OSharp框架解说系列（2.2）：EasyUI复杂布局及数据操作
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- Easyui入门视频教程 第05集---Easyui复杂布局
目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义 Easyui入门视频教程 第08集---登录实现 ajax button的使用 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 【EasyUI】——EasyUI的布局
做一个站点首先要有站点的布局,所谓的布局事实上就是网页的排版.就是说你的网页显示时是什么样子的. 就比方百度的首页: 无论是谁登录.网页都是这个样式的. EasyUI中的网页布局一共分为五部分,分别为 ...
- Android 4.0 Launcher2源码分析——主布局文件（转）
本文来自http://blog.csdn.net/chenshaoyang0011 Android系统的一大特色是它拥有的桌面通知系统,不同于IOS的桌面管理,Android有一个桌面系统用于管理和展 ...
- jquery+easyui主界面布局一例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx ...
- Easyui简单布局
1.创建布局 创建布局只需要添加 'easyui-layout' class 到 <div> 标记或者 在整个页面创建布局,即<body class="easyui-lay ...
- EasyUi – 2.布局Layout + 3.登录界面
1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...
- Viewpager模仿微信主布局的三种方式 ViewPager,Fragment,ViewPager+FragmentPagerAdapter
效果大概就是这样 很简单 : 1 创建 top 和bottom 2主界面布局 添加top 和bottom 中间添加一个ViewPage 3 给ViewPager 和 底部View设置点击事件 源码下载 ...
随机推荐
- Adaboost的意义
Adaboost是广义上的提升方法(boosting method)的一个特例.广泛应用于人脸识别等领域. 它的基本思想是,“三个臭皮匠赛过诸葛亮”,即用多个弱分类器的线性加权,来得到一个强的分类器. ...
- php表单提交时获取不到post数据的解决方法
找到了一位博主的方法完美解决,链接如下: http://blog.csdn.net/whd526/article/details/53263181
- c#多线程同步之EventWaitHandle的应用
最近在研究前辈写的winform代码,其中有一个功能,前辈用了EventWaitHandle.初读代码,有点不理解,慢慢想来,还是可以理解的.这个功能,就是执行某项比较耗时的任务,需要打开旋转图标,等 ...
- Java中常见数据结构Map之LinkedHashMap
前面已经说完了HashMap, 接着来说下LinkedHashMap. 看到Linked就知道它是有序的Map,即插入顺序和取出顺序是一致的, 究竟是怎样做到的呢? 下面就一窥源码吧. 1, Link ...
- 3D模型展示以及体积、表面积计算
本文原创 如转载请注明出处!!! 本博客地址http://www.cnblogs.com/we-jack 本文原创,如果有同样需求的小伙伴请第一时间联系我 或者在留言区留言 上次为大家提供了3D模型的 ...
- 金三银四跳槽季，BAT美团滴滴java面试大纲（带答案版）之一：Java基础篇
Java基础篇: 题记:本系列文章,会尽量模拟面试现场对话情景, 用口语而非书面语 ,采用问答形式来展现.另外每一个问题都附上“延伸”,这部分内容是帮助小伙伴们更深的理解一些底层细节的补充,在面试中可 ...
- C语言第八次博客作业--字符数组
一.PTA实验作业 题目1:查验身份证 1. 本题PTA提交列表 2. 设计思路 定义i,flag=1,z,m[11],a[19] 输入次数n for i=1 to n+1 gets(a) 加权求和在 ...
- HashSet源码分析
在java集合中有一种集合Set(集),他有两个实现类,分别是HashSet,TreeSet.下面仔细分析HashSet源码. 看了HashSet的源码就会发现HashSet的底层实现是利用HashM ...
- 001: 徒手建立一个JavaWeb应用
不借助IDE,我们徒手建立一个JavaWeb应用. web.xml: <?xml version="1.0" encoding="ISO-8859-1"? ...
- 最小生成数（并查集）Kruskal算法
并查集:使用并查集可以把每个连通分量看作一个集合,该集合包含连通分量的所有点.这两两连通而具体的连通方式无关紧要,就好比集合中的元素没有先后顺序之分,只有属于和不属于的区别.#define N 100 ...