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. NSPredicate 条件查询或过虑

    NSPredicate用于查询和过滤 在SQL中作为查询条件通常用WHERE,但在COREDATA中作为查询条件就可以用到NSPredicate. NSPredicate 不单可以和COREDATA中 ...

  2. FragmentTransaction的commit的异步操作

    FragmentTransaction是异步的,commit()仅是相当于把操作加入到FragmentManager的队列,然后FragmentManager会在某一个时刻来执行,并不是立即执行.所以 ...

  3. [Android Traffic] 根据网络类型更改下载模式

    转载自: http://blog.csdn.net/kesenhoo/article/details/7396321 Modifying your Download Patterns Based on ...

  4. Python中的XMLRPC（Calendar）

    XMLRPC服务器端代码,定义了三个方法名,getMonth获取所给月份的日历,getYear获取一年的日历,getDict测试返回字典的效果. xmlrpc_server.py: #!/usr/bi ...

  5. JAVA之ArrayList集合

    /** * ArrayList集合讲解 * 集合的添加.遍历.删除 */package com.test; import java.util.*; public class test7 { /**   ...

  6. Eclipse web项目导入Intellij 并且部署

    一.导入自己的web项目 步骤:File->New->Project from Existing Source... 二.选择项目的所在位置,点击"OK";接着如下图所 ...

  7. 【HTML 元素】嵌入图像

    img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" ...

  8. iOS OC08,09_内存管理

    //管理内存有三种方式, //1.是垃圾回收,java常见的管理内存的方法,系统来检測对象是否被使用,是否被释放 //2.MRC手动管理引用计数,iOS管理内存的方式,程序猿通过手动的方式来管理对象是 ...

  9. 2.oracle分页，找到员工表中薪水大于本部门平均薪水的员工

     ROWNUM的知识点 A ROWNUM依照oracle的默认机制生成. B rownum仅仅能使用<=  <号,不能使用>  >= rownum的实现机制 rownum表 ...

  10. Android学习（十九）Dialog对话框

    一.什么是Dialog对话框 对话框是当前页面中弹出的一个小窗口,用于显示重要的提示信息,提示用户输入信息,确认信息,或者显示某种状态,如下载进度,退出提示等等.用户需要与对话框进行交互,才能回到原窗 ...