easyui首页模板

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首页模板的更多相关文章

phpcms V9 首页模板文件解析
在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是content模块下index控制器的init方法. 下面, 我们逐步分析过程如下: 第一.首页默认执行的是 ...
phpcms V9 首页模板文件解析(转）
转自:http://www.cnblogs.com/Braveliu/p/5100018.html 转在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是con ...
反射实体自动生成EasyUi DataGrid模板
用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...
wordpress 首页模板变量对应表
最近开始学习wp,这里做一些笔记. 首页模板,第一行为前台显示的html代码.第二行为 wp-content/themes/模板目录下 head.php文件中. 其中我将变量名 html用绿色标记 ...
eduSOHO 首页模板全部课程模块代码
首页模板文件设置在后台主题-管理-选中网校课程然后前台调用代码 {% if code != 'course-grid-with-condition-index' %} {% cach ...
jeecms首页模板自定义
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qxy369/article/details/50387465我们在点击[查看首页]时,发现出现的并不 ...
反射实体自动生成EasyUi DataGrid模板第二版--附项目源码
之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html 大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...
項目当中使用的easyui的模板crud页面
1.简单的增删改查页面: 第一步骤:html原型型编写,写法参照了easyui demo中form有关html等 <!DOCTYPE html> <html> <head ...
[python][django学习篇][10]再次修改博客首页模板
目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...

随机推荐

espresso Seekbar
package test.utils; import android.support.test.espresso.PerformException; import android.support.te ...
android下socket编程问题：服务器关闭时，客户端发送请求的异常处理
我用socket分别创建了一个服务器和一个客户端. 当服务器程序运行时,客户端和服务器发送接收数据是OK的. 但是,如果服务器程序关闭以后,客户端仍然发送请求的话,会抛出一个IOException.但 ...
ES6里关于数字的拓展
一.指数运算符 ES6引入的唯一一个JS语法变化是求幂运算符,它是一种将指数应用于基数的数学运算.JS已有的Math.pow()方法可以执行求幂运算,但它也是为数不多的需要通过方法而不是正式的运算符来 ...
【AS3 Coder】任务五：Flash 2D游戏的第二春（上）
在上一节中,我们基本上已经讲完了游戏中最主要的逻辑部分,不过为了更加全面地运用Starling中的一些特性,在本节中我们将一起来看看如何实现多面板切换以及粒子效果,这两个玩意儿可是比较频繁会出现于St ...
右键添加"在此处打开命令窗口"菜单
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\Background\shell\CMD] @="在此 ...
Android学习（八）打开Activity
在Android中打开窗口有两种方式,第一种是不需要返回值的,第二种是带返回值的. Main.xml文件,程序从这个窗口开始执行. <LinearLayout xmlns:android=&qu ...
include file与jsp:include 的区别
<%include file="a.jsp"%>静态包含,先加入再编译,就是在编译的时候将a.jsp的代码加入进来在编译,只会生成一个servlet文件,而且不同a ...
mysql常用命令和函数
一.DROP IF EXISTS DROP FUNCTION IF EXISTS fun;DROP TABLE IF EXISTS table; 二.数据表1.建立表CREATE TABLE test ...
inspect模块详解
inspect模块主要提供了四种用处: (1).对是否是模块,框架,函数等进行类型检查. (2).获取源码 (3).获取类或函数的参数的信息 (4).解析堆栈使用inspect模块可以提供自省功能, ...
linux服务器性能检测工具nmon使用
今天介绍一款linux系统服务器性能检测的工具-nmon及nmon_analyser (生成性能报告的免费工具),亲测可用. 一.介绍 nmon 工具可以帮助在一个屏幕上显示所有重要的性能优化信息,并 ...

easyui首页模板

Easyui首页html代码

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

随机推荐

热门专题