Easyui首页html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<meta name="renderer" content="webkit"></meta>

	<title>管理员操作平台</title>

    <link href="/js/themes/default/easyui.css" rel="stylesheet" type="text/css">

    <link href="/js/themes/icon.css" rel="stylesheet" type="text/css">

    <script src="/js/jquery.min.js" type="text/javascript"></script>

    <script src="/js/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="/js/easyui-lang-zh_CN.js" type="text/javascript"></script>

</head>

<body style="margin:0px;">

<div class="easyui-layout" data-options="fit:true">

	<div data-options="region:'north'" style="height:60px;">

		<div class="top">

			<div class="top_left"><img src="/images/logo.jpg"/></div>

			<div class="top_right">

				<p>欢迎您：admin  <a href="http://localhost/user/logout.htm">退出</a></p>

			</div>

		</div>

	</div>

	<div data-options="region:'west',split:'true',title:'导航'" style="width:220px">

		<div class="easyui-accordion" data-options="fit:true,border:false">

			<div title="系统管理">

				<a href="javascript:run('/user/view.htm', '用户管理')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-blank'" style="width:100%;text-align:left;">用户管理</a>

			</div>

		</div>

	</div>

	<div data-options="region:'center'" style="width:100%;height:100px;">

	    <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false">

	    <!--

	    	<div title="首页"></div>

	     -->

	    </div>

	</div>

	<div class="easyui-panel" title="管理平台欢迎您" data-options="region:'south',collapsible:false"></div>

</div>

<script type="text/javascript">

function run(url, title) {

	if (url.substring(0, 4) != 'http') {

		url = 'http://localhost/' + url;

	}

	if ($("#tb").tabs("getTab", title)) {

		$("#tb").tabs("select", title);

	} else {

		if (url.substring(0, 4) != 'http') {

			//第一种打开页面方式

			$('#tb').tabs('add', {

		           title: title,

		           href: url,

		           closable: true

		       });

		}else{

			//另外一种打开页面方式

			$("#tb").tabs('add',{

				title:title,

				content:"<iframe id='" + title + "' frameborder=0 style='width:100%;height:100%'></iframe>",

				closable:true

			});

			$("#" + title)[0].src = url;

		}

	}

}

</script>

</body>

</html>

easyui中首页通常是layout，一个layout能够划分成多个块，上北下南左西右东还有中。上方一般用来放logo，username，退出登录等信息，下方一般用来放公司信息，左边是导航栏。剩下的中间是不同的标签页。用来模拟多窗体模式。

导航栏用的是easyui中的accordion。api中并没有提到他，但他是最适合用来做导航栏的。

点击能够收缩扩展，效果不错。

js中run方法的意思是在中间的标签页中打开相应的页面。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

run方法之所以用两种是由于打开的效果不同。第一种打开是在dom里面加了一个div。里面的css引用不会生效。里面的元素和整个窗口公用一个dom；另外一种方法打开是在里面加了一个iframe，和大窗口是子父窗口的概念，子窗口不会污染父窗口。

建议使用第二中。否则你会被越来越多的元素id重名而烦恼。

easyui首页模板的更多相关文章

  1. phpcms V9 首页模板文件解析

    在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是content模块下index控制器的init方法. 下面, 我们逐步分析过程如下: 第一.首页默认执行的是 ...

  2. phpcms V9 首页模板文件解析(转）

    转自:http://www.cnblogs.com/Braveliu/p/5100018.html 转在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是con ...

  3. 反射实体自动生成EasyUi DataGrid模板

    用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...

  4. wordpress 首页模板变量对应表

    最近开始学习wp,这里做一些笔记. 首页模板,第一行为前台显示的html代码.第二行为 wp-content/themes/模板目录 下 head.php文件中. 其中我将变量名 html用绿色标记 ...

  5. eduSOHO 首页模板 全部课程模块代码

    首页模板文件 设置在后台主题-管理-选中网校课程 然后前台调用代码 {% if code != 'course-grid-with-condition-index' %}        {% cach ...

  6. jeecms首页模板自定义

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qxy369/article/details/50387465我们在点击[查看首页]时,发现出现的并不 ...

  7. 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码

    之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html   大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...

  8. 項目当中使用的easyui的模板crud页面

    1.简单的增删改查页面: 第一步骤:html原型型编写,写法参照了easyui demo中form有关html等 <!DOCTYPE html> <html> <head ...

  9. [python][django学习篇][10]再次修改博客首页模板

    目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...

随机推荐

  1. 初试百度地图API

    第一次使用百度地图API来定位并显示,参照了官网2.1.0版本demo里的DemoApplication和LocationOverlayDemo两个类来写,整了半天显示一片空白(图一),然后郁闷了半天 ...

  2. 设计模式之模板模式(PHP实现)

    github地址:https://github.com/ZQCard/design_pattern * 在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板. ...

  3. Java高级特性—反射和动态代理

    1).反射 通过反射的方式可以获取class对象中的属性.方法.构造函数等,一下是实例: 2).动态代理 使用场景: 在之前的代码调用阶段,我们用action调用service的方法实现业务即可. 由 ...

  4. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  5. Codeforces #282 div 1 C Helping People 题解

    CF 282 C Helping People 题解 [原题] time limit per test 2 seconds memory limit per test 512 megabytes in ...

  6. iOS_block代码块

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. 持久化配置管理 diamond 使用简介

    本次为大家介绍diamond的概况和快速使用. 一.概况 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单.可靠.易用,目前淘宝内部绝大多数系统的配置,由diamond来进行统一管 ...

  8. mac查看端口占用

    Mac OS/Linux命令查询网络端口占用情况   netstat命令 netstat -an | grep 3306 3306替换成需要grep的端口号 lsof命令 通过list open fi ...

  9. 如何用PS快速的批量制作连续号码数字编号图解

    如何用PS快速的批量制作连续号码数字编号图解 大家好,今天太原博飞设计培训小编就告诉大家如用PS快速的制作连续数字编号,在工作中尤其是大型活动的有时候制作连续的号码牌,少还好,如果上百上千个,那就辛苦 ...

  10. LeetCode题目: Remove Duplicate Letters

    问题描述 给一个字符串(只包含小写字母),删除重复的字母, 使得每个字母只出现一次.返回的结果必须是字典顺序最小的. 举例:“bcabc" -> "abc", &q ...