使用内联框架的原型

时间:2014-07-22 14:50来源: 作者: 点击: 次

分享到：

随着Web上信息量越来越大，如何有效展示信息成了重要难题。经过实践检验，使用内联框架（iframe）是一种很好的解决方案，特别是在后台管理系统的设计上。使用内联框架，能更清晰

随着Web上信息量越来越大，如何有效展示信息成了重要难题。经过实践检验，使用内联框架（iframe）是一种很好的解决方案，特别是在后台管理系统的设计上。使用内联框架，能更清晰的展示信息层级和缩短页面响应时间。下面是实现内联框架的一个原型，其中有使用到Smarty类库进行分层，关于Smarty的配置不是这里的重点，不在赘述。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Framework Prototype</title>
<style type="text/css">
body{
	text-align:center;}
	
#head, #container, #footer{
	margin: 10px auto;
	width: 1024px;
	text-align: left;}

#head{
	background: #6495ED;}
	
h3, h4{
	text-align: center;
	padding: 10px;}

#menu{
	float: left;
	width: 124px;
	height: 300px;
	background: #FDF5E6;}

#frameDiv{
	float: left;
	width: 880px;
	margin: 0 0 0 15px;
	border: 1px solid #CCC;}

#clearFloat{
	clear: both;
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	border: 0;}
</style>
</head>

<body>
<div id="head">
	<h3>This is a Framework Prototype</h3>
</div>

<div id="container">
<div id="menu">
	<ul>
	<!-- Ver 1
	<li><a href="./demo/templates/php.html" target="rightframe">PHP</a></li>
	<li><a href="./demo/templates/python.html" target="rightframe">Python</a></li>
	<li><a href="./demo/templates/perl.html" target="rightframe">Perl</a></li>
	-->
	<!-- Ver 2 (Using Smarty) -->
	<li><a href="./demo/process.php?lang=php" target="rightframe">PHP</a></li>
	<li><a href="./demo/process.php?lang=python" target="rightframe">Python</a></li>
	<li><a href="./demo/process.php?lang=perl" target="rightframe">Perl</a></li>
	</ul>
</div>
<div id="frameDiv">
	<iframe src="./demo/process.php" name="rightframe" width="100%" height="300px" frameborder="0"></iframe>
</div>
</div>
<div id="clearFloat"></div>
<div id="footer">
	<h4>Powered by: <u>phplaber</u></h4>
</div>
</body>

</html>

2. [代码]控制器跳至 [1] [2] [3] [全屏预览]

<?php

require '../Smarty/Smarty.class.php';
$smarty = new Smarty;
$language = $_GET['lang'];

if ($language == '')	$smarty->display('default.html');
else
{
	$smarty->assign("lang", $language);
	$smarty->display('info.html');
}

3. [代码]视图跳至 [1] [2] [3] [全屏预览]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{$lang} page</title>
<style type="text/css">

</style>
</head>

<body>
<h1>Hello {$lang}</h1>
</body>

</html>