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. 【java】java自带的java.util.logging.Logger日志功能

    偶然翻阅到一篇文章,注意到Java自带的Logger日志功能,特地来细细的看一看,记录一下. 1.Java自带的日志功能,默认的配置 ①Logger的默认配置,位置在JRE安装目录下lib中的logg ...

  2. JAVA常见算法题(七)

    package com.xiaowu.demo; /** * 输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. * * @author WQ * */ public class De ...

  3. Android - 标准VideoView播放演示样例

    标准VideoView播放演示样例 本文地址: http://blog.csdn.net/caroline_wendy 在Android SDK中的ApiDemos内, 提供标准播放视频的代码,使用V ...

  4. ieda常用快捷键

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  5. windows 2003子目录权限丢失及子目录权限无法继承更改的解决方法

    对于ntfs格式的分区,不当的操作方式很容易引起各种访问权限问题. 早上,给公司服务器配置网站权限,其中一个网站添加IIS_User权限删除了everyone权限后,发现网站无法访问,要求输入用户名和 ...

  6. Java List序列化的实现

    概述 java中的序列化与反序列化都要求对象实现Serializable接口(其实就是声明一下),而对于List这种动态改变的集合默认是不实现这个接口的,也就是不能直接序列化.但是数组是可以序列化的, ...

  7. Win7删除虚拟机新建的用户怎么恢复

    11月3日 VMware Workstation 7 Installed in Windows 7 AutoLogon Problem 安装VMware Workstation 7 在Windows ...

  8. es6 webpack转es5

    更新时间: 2018-7-31 首次更新. 先生成package.json npm init -y 再安装以下npm插件 npm i babel-core babel-loader babel-pre ...

  9. ionic中actionsheet在安卓中显示样式问题

    可以看到在浏览器上是正常的,在安卓上的样式没了 建议不要直接去动ionic的css文件,容易影响全局 方法:注释掉_action-sheet.sass中文件123行,针对安卓样式去写的样sass 保存 ...

  10. 怎样把报表放到网页中显示（Web页面与报表简单集成样例）

    1.问题描写叙述 如今用户开发的系统基本上趋向于BS架构的浏览器/server模式.这些系统可能由不同的语言开发.如HTML.ASP.JSP.PHP等.因此须要将制作好的报表嵌入到这些页面中. Fin ...