ikartool界面（二）

  如前所述，ikartool 的界面算是完成有一半了，现在来回想一下制作的过程。

一切都是从这里开始的：当我用 Google 浏览器打开 ikariam 官方页面，右键审查元素，发现网页源码中诸多的<div></div>。这是什么标签呢？搜索知其与 css排版关系很大。接下来在论坛上发现此文：

downpour 写道

使用HTML＋CSS编写一个灵活的Tab页

  对照着重做了一次，惊叹于其效果……决定用CSS写ikartool的界面，直到今天，写了大概有3天了吧，发现style.css样式表已经结构简明——高兴中——回想过程中的困难，把想到的写在这里：

 

1. class 和 id 都可以作为 CSS的选择器，那该如何选择呢？

按照我目前的理解，id 适合于只使用一次的情形，而 class的定义可以提供一种通用的格式，比如这里：

 

<div class="verticalboxes">
	<ul>
		<li>
			<input type="text" id="population" onChange="refresh()" />
		</li>
		<li>
			<input type="text" id="satisfaction" onChange="refresh()" />
		</li>
		<li>
			<input type="text" id="houses" onChange="refresh()" />
		</li>
	</ul>
</div>

 在CSS样表里只需要写上：

 

.verticaldecoration
{
	margin: 0px;
	padding: 0px;
	width: 200px;
	float: left;
}

.verticaldecoration ul
{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.verticaldecoration ul li
{
	float: top;
	margin: 0px;
	padding: 15px 0px 16px 40px;
	color: #7a0d0b;
}

 就能达到纵向排列的效果（注意 float: left; 和 float: top; 的合理使用）：

发现漂亮的一点是给 li 上背景时，padding 部分被计入 li 之内，所以只要给背景添加 no-repeat left top 样式，自动得到如图结果：

  ul

 

  ul

 

  li

 

用类似的方法，做了另外的一个表格区域：

  li

 

  ul

 

  li

 

2. 这里提一下，使当前 tab与其余tab不同（如图）

的方法：

 

样式表：

 

.vertic_tab ul li
{
	float: top;
	margin: 10px;
	padding: 0px;
}

.vertic_tab ul #current a
{
	background: url("../images/bg_breadcrumbs_side_on.gif") no-repeat left top;
	color: #00f;
}

 HTML文档：

 

	<div id="main">
		<div id="sider" class="vertic_tab">
			<ul>
				<li id="current"><a href="../urbanplan/town.php">town</a></li>
				<li><a href="../urbanplan/resource.php">resource</a></li>
				<li><a href="../urbanplan/needs.php">needs</a></li>
			</ul>
		</div>

感觉是很无赖的方法了*_^

 

3. PS缩放图片，先转化 索引模式 为 RGB模式 ”图像->模式->RGB颜色“解决缩小后图像变粗糙的问题，缩放的时候，用命令：

”编辑->变换->缩放“；

 

大体上就想起了这些，接下来需要解决的是记录用户数据的问题，首要的就是要避免切换标签时所有数据重置的问题：

 

先输入 town 数据：

然后是 resource 数据：

这时切回 town 标签，数据重置了：

 

现在想到的方法是，用几个变量储存这些数据，然后在每个页面的 Onload 函数里面刷新数据。

 

（……悲剧啊……原想用 php做的，结果发现 php很接近 lua。以前一致认为 JavaScript就是 Java，一直都不敢接触，昨天硬着头皮看了一点 js，才发现，整个一 C++嘛……害我犹豫了那么久不学 js。曾经一位高人告诉我 php与 asp相比要优越的多，现在我也深信不疑（虽然完全不懂 asp），但是看看，有什么是 js不能做的呢？为什么一定要 php？php与 js分别是哪里用的？这些待我慢慢学习吧。）

 

刚刚 Google 到的：

 

javascript就是浏览器执行的脚本语言，控制页面内容。

php就是服务器端执行的语言，读取数据库把内容显示到页面。
如果你想增加页面交互性，必须学javascript，否则可以不学。

 

这是说，我一开始就走错路了吗？

 

不，没有错，界面确实是浏览器的事，读数据是接下来我要做的，那么，学php喽！

 

首先，echo输出的信息会放在哪里？

 

<div id="main" style="font-size: 30px; color: #7a0d0b">
	<?php
		echo "Still in develop...";
	?>
</div>

 

 

这表明 echo输出的内容受到CSS格式影响，而 php代码放在什么区域，字符串就输出在哪里。

 

php获得页面上的 js数据：

 

<div id="main" style="font-size: 30px; color: #7a0d0b">
	<script type="text/javascript" src="../magellan.js" />
	<?php
		$str="<script>s;</script>";
		echo $str;
	?>
</div>

magellan.js

 

var s=document.write("Still in develop...");

 输出：

 

成功了。

 

然后又卡在 php传值给 js上面了。

php要怎样才能把数据传给js？

慢慢发现吧：

 

<div id="main" style="font-size: 30px; color: #7a0d0b">
	<script type="text/javascript">
		var s="Hello World!<br>";
	</script>
	<script type="text/javascript">gets();</script>
</div>

 

function gets()
{
	document.write(s);
}

 输出 Hello World!

 

 

var s="Still in Develop...";
function gets()
{
	document.write(s);
}

输出 Hello World!

 

 

function gets()
{
	var s="Still in Develop...";
	document.write(s);
}

输出 Still in Develop...

 

奇了，这是什么原因？

哦~在调用gets();时，magellan.js里面的无论前后的语句都没有被执行，只有gets()函数内部的语句被执行了。同时，

magellan.js可以调用到 magellan.php里面在<script type="text/javascript"></script>之间定义的变量。

 

<真灵异。>

    一开始我是这么做的：

 

<div id="main" style="font-size: 30px; color: #7a0d0b">
	<?php
		$ar="Hello World!";
	?>
	<script type="text/javascript">
		var ar="<?php echo $ar ?>";
		document.write(ar);
	</script>
</div>

 

   显示 ;document.write(ar);

 

   然后刚刚把双引号改成单引号，再刷新，显示 Hello World!

   然后再把单引号改回双引号，代码就和原来完全一样了，刷新，显示 Hello World!

   然后把$ar的值改为"Hello!"，刷新，显示 Hello!

</真灵异。>

 

好了，不论如何，php的值已经可以传给js了。

呃，不灵异了：

 

<div id="main" style="font-size: 30px; color: #7a0d0b">
	<?php
		$ar="<script>sets();</script>";
	?>
	<script type="text/javascript">
		var ar="<?php echo $ar ?>";
		gets();
	</script>
</div>

 

 

function sets()
{
	var s="Still in Develop...";
}

function gets()
{
	document.write(ar);
}

 这次就显示"; gets();

然后改成：

 

<div id="main" style="font-size: 30px; color: #7a0d0b">
	<?php
		$ar="Hello";
	?>
	<script type="text/javascript">
		var ar="<?php echo $ar ?>";
		gets();
	</script>
</div>

 

显示Hello

大概意味着在var ar="<?php echo $ar ?>";语句中，如果$ar无值，则会echo到后面的字符。试试看：

 

<?php
	$ar="Hello";
	$ar=nil;
?>

 

Notice: Use of undefined constant nil

猜测错误，那么，看看这个：

 

<script type="text/javascript">
	var ar="<?php echo $ar ?>";?>";
	gets();
</script>

 

 无输出。

再看：

 

<script type="text/javascript">
	var ar="<?php echo "Hi"; ?>";
	gets();
</script>

 

 Hi

 

OK，貌似，只有页面的首次刷新会导致服务器上 php中的变量传递到客户端中的 js脚本。

 

那么，按照我的要求，服务器读取相应的变量，发送给客户端，并显示在文本框中，仅这些方法已经可以满足要求了。

那么，我接下来就该看看数据库了吧。