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. Android Handler 消息循环机制

    前言 一问起Android应用程序的入口,很多人会说是Activity中的onCreate方法,也有人说是ActivityThread中的静态main方法.因为Java虚拟机在运行的时候会自动加载指定 ...

  2. 几个有关Hadoop自带的性能测试工具的应用

    http://www.talkwithtrend.com/Question/177983-1247453 一些测试的描述如下内容最为详细,供你参考: 测试对于验证系统的正确性.分析系统的性能来说非常重 ...

  3. 【Hadoop】Hadoop DataNode节点超时时间设置

    hadoop datanode节点超时时间设置 datanode进程死亡或者网络故障造成datanode无法与namenode通信,namenode不会立即把该节点判定为死亡,要经过一段时间,这段时间 ...

  4. 【Hadoop】Hadoop MR 自定义排序

    1.概念 2.代码示例 FlowSort package com.ares.hadoop.mr.flowsort; import java.io.IOException; import org.apa ...

  5. 面试——谈谈对JAVA的理解

    谈谈你对Java平台的理解.答:Java首先是一种面向对象的语言,语言特性有封装,继承,多态,泛型,Lamda表达式等; 第二个特性:支持跨平台,一次书写导出运行(write once,run any ...

  6. 2017.7.10 Package name does not correspond to the file path

    参考来自:https://stackoverflow.com/questions/26440623/package-name-does-not-correspond-to-the-file-path- ...

  7. Android Scroll具体解释(二)：OverScroller实战

    作者: ztelur 联系方式:segmentfault,csdn.github 本文仅供个人学习,不用于不论什么形式商业目的,转载请注明原作者.文章来源.链接,版权归原文作者全部.  本文是andr ...

  8. 快速构建大数据存储分析平台-ELK平台安装

    一.概述 ELK是由Elastic公司开发的Elasticsearch.Logstash.Kibana三款开源软件的缩写(但不限于这三款软件). 为什么使用ELK? 在目前流行的微服务架构中,一个大型 ...

  9. 【转】 从输入 URL 到页面加载完成的过程中都发生了什么事情？

    该问题总结 一. 往浏览器输入URL后给你一个页面,你天天在使用的东西,学过计算机网络的知道是怎么回事,就DNS解析然后页面的回馈,不过要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的 ...

  10. wps文档忘记保存关闭了怎么恢复

    wps文档忘记保存关闭了怎么恢复 点击程序左上角的''WPS文字/表格/演示''选择备份管理,根据需要尝试右侧下面的"查看其他备份"功能就能找了. 点击"开始-运行&qu ...