又到上海

昨天下午4:05分离开了福州,经过了将近7个小时的时间,到了上海,出差还在进行中,比较好的一点是目前确定了下周二回北京,上海这边的同事已经帮订好票了,希望不要再有所变化。

上海这里依旧很热,跟福州也相差不大,太阳威力也很大,突然觉得南方的阳光比较晒人,这几天看看上海这边实施的项目,项目实施到现在,已经过了一段时间了,好像实施的进度上不像原来想的那样,流程的变更与配套系统的变更确实是需要花费时间的,各方的沟通协调也很重要,客户自身对系统的渴求都会增加项目的实施进度,但最重要的是实施项目的负责人要做到心里有数,要促使项目实施像预期的方向发展,碰到需要沟通协调的,要第一时间找到人去沟通协调解决需要协调的问题,碰到系统的问题,能有一个很好的解决问题的办法,然后付诸于行动,项目的实施会在逐一解决问题的情况下,最终迈向成功。自然这些过程中的事情也是很能锻炼人的,总是在实际中获得经验,为下一个项目积累经验。

初做红烧肉(家常红烧肉)

这次的出差除了工作之外,还是蛮有收获的,在出差过程中,在上海停留的过程中,观摩了红烧肉的制作过程,并亲自进行了实验,最终的成品还是不错的,至少吃起来味道还是不错的,记录下来,免得长时间不实践给忘记了。

步骤:
1.去菜场或者超市购买五花肉若干(五花肉要选好的),让菜场人帮忙切成1.5厘米-2.0厘米左右的块;
2.回家将肉用水洗净;
3.准备1-2片大片姜片;
4.放少许油在锅内(要非常少),放入姜片;
5.油热后放入五花肉进行煸炒,将油炒出,这部分要自行看煸炒程度,以肉块外表微黄为准;
6.根据肉量放入料酒,进行少许翻炒;
7.老抽(上色),生抽(上味),翻炒使得均匀,加入白砂糖(视肉量),加入水(视肉量),放1-2颗大料,开锅够更换小锅;
8.小火炖,大约2小时,直到汁收的差不多,我这个汁收的不是很好(水放的有点多);
9.出锅装盘,红烧肉完工。

成果:

家常红烧肉

左侧Tab切换页面实现

最近在玩着做一个小站,目前的状态正处于设计阶段(再小的东西都需要设计一下的),在Photoshop中做好图转化成页面,页面中有个部分需要实现左侧Tab页面切换的效果,做了下代码实验,最终实现,分享出来供需要的人取用。

设计的最终效果图如下所示:

左侧可以切换的页面

左侧可以切换的页面

之所以选择使用Tab页面切换来显示页面中的内容是因为要显示的内容属于同一类型,内容能在该类型中很清晰的分组,这样有利于用户在浏览的时候有更好的比较跟选择,能在同一块显示区域显示更多的内容,有较好的体验,这仅仅是自己的想法,不一定正确。(btw:在网上称为滑动门在目前的网站中比较常见,这让我想起前不久还在职的时候经历的一个项目,决策者放佛迷恋这种效果,于是说能用滑动门都用滑动门,于是乎…)。

1、设计到页面的转换

首先PS中设计出上图,然后开始切图,主要切出左侧Tab页面即可,因为右边内容区域可设置容器的border来达到最终效果,切出52×32的图,有两个,切好后如下所示。

然后就开始形成最终要用的页面,  主要想法是左侧Tab条跟右侧内容区域,两个float:left;跟整个的con大小匹配,然后用js完成在左侧tab按钮条选择切换的时候应用不同的样式即可,考虑到IE跟Firefox的像素差距注意使用!important,在选择到Tab页的时候,让tab的图像向右偏移一个像素(px),使用对象不可层叠(position取值为relative)将内容区域的边线遮住,然后加上调试,形成最终代码如下。

2、测试页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>tab test</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <link rel="stylesheet" type="text/css" href="style.css" />
  </HEAD>
<BODY>
  <div id="con">
    <ul id="tabs">
      <li style="margin-top:25px;" class="selectTab">
        <a href="javascript:void(0)" onclick="selectTab('tabContent0',this)">tab1</a>
      </li>   
      <li><a href="javascript:void(0)" onclick="selectTab('tabContent1',this)">tab2</a></li>
    </ul>
    <div id="tabContent">
      <div id="tabContent0" class="tabContent selectTab">
        <p>tab1 contents</p>
      </div>
      <div id="tabContent1" class="tabContent"><p>tab2 contents</p></div>
    </div>
 </div>
</BODY> 
<script type="text/javascript">
  function selectTab(thisContent,thisObj) {
    thisObj.blur();
    var tab = document.getElementById("tabs").getElementsByTagName("li");
    var tablength = tab.length;
    for(i=0; i<tablength; i++) {
      tab[i].className = "";
    }
    thisObj.parentNode.className = "selectTab";
    for(i=0; j=document.getElementById("tabContent"+i); i++) {
      j.style.display = "none";
    }
    document.getElementById(thisContent).style.display = "block";
  } 
</script>
</HTML>

3、相关的样式文件

#con{width:439px !important;width:440px;height:402px;float:left;}
#con #tabs{height:400px;width:52px;margin:0;padding:0;float:left;}
#con #tabs li {float:left;background:url(tabnormal.png) no-repeat; height:32px; list-style-type:none;width:52px;margin-top:8px;text-indent:12px;font-size:14px;}
#con #tabs li a { text-decoration:none; float:left; background:url(tabnormal.png) no-repeat;height:32px;line-height:32px;color:#000;}
#con #tabs li.selectTab {background:url(tabselect.png) no-repeat;position:relative;height:32px;width:52px;right:-1px;}
#con #tabs li.selectTab a {background:url(tabselect.png) no-repeat;color:#7979b3; height:32px; line-height:32px;}
#tabContent {background-color:#fff; border:1px solid #0087ae;float:left;width:384px !important;width:382px;height:400px;} 
.tabContent {margin:10px 0 0 10px;color:#474747; width:360px; display:none}
#tabContent div.selectTab{display:block}

 

佑宁寺–神奇的藏传佛教

不知道多少年没有在家过正月十五了,反正是很多年了。今天十五早上很早起来跟高中同学约好去佑宁寺,也许真是年龄大了,以前对于寺庙也是抱着观光游玩的心情,而如今多少带点心里的寄托前去,所以心情不一样,感觉也自然不同,在青海省的众多寺庙中,比较闻名的那是塔尔寺,塔尔寺去过几次,而佑宁寺却是第一次前去。却发现原来佑宁寺也非常有名。

佑宁寺位于青海互助土族自治县五十乡寺滩村,曾在康熙年间达到鼎盛,当时超过7000僧从,是青海湟水河以北最大的黄教格鲁派寺院,同样佑宁寺也经历过很多的劫难,到如今只有400多僧从,佑宁寺有四大活佛之一的章嘉活佛,据现在的僧从来说是康熙微服私访记中的法印就是章嘉活佛,这就是我今天了解的,对于我这个出生成长在青海的人来说比较惭愧,居然也是第一次了解这座目前看上去并不像寺庙的但是却比较有故事的寺院。

9点我们出发,经历了半个多小时的时间,到达了佑宁寺,因为同学结识佑宁寺中的一个辈分很高的喇嘛,所以相约到这个喇嘛家中,稍事的闲谈以及新年的问候,在一碗浓浓的酥油茶之后,抱着尝试的让这位大师按照宗教的方式对我进行了讲评,确实让我感到很神奇,也许对于宗教中的理解跟现实的理解不同,但相互参照对我讲的所有的东西都非常准确(我第一次前去,之前我们不曾相识),看着大师手中厚厚的一打写满藏文的纸,也许这就是佛教长期沉淀下来的宗教知识,对于我来说确实比较惊讶,可惜关于我的一些情况没有一个是我想听到的。

这之后我们准备了些东西,前往代表财运的玛尼石许愿祭拜,我也是第一次接触这些东西,按照当地的叫法有很多我都不是很理解。驱车经过20多分钟攀上了山顶,然后经过一公里的步行,到达了玛尼石,放上松香,炒面(这些都是大师给提供的),困扎了自己的经旗,放上宝瓶,放飞撰满经文图像的纸片(好像叫luma),然后大师盘坐诵经,给我们祈福。结束后我们回到佑宁寺,大师在家中招待了我们,随后按照针对我们的讲评选择自己需要的经书,给我们诵经祈福,我还点了个酥油灯,在一切完成之后,我们就踏上了返程的路,结束了佑宁寺执行。

在很久以前曾记得在前往青海湖的路上能碰到徒步磕长头前往拉萨布达拉宫的虔诚修行者,当时没有这方面的感触,在回程的路上,同学说在布达拉宫门口能看到徒步到达,近百人的磕长头画面确实很让人震撼,去过塔尔寺,也去过不少青海的藏传寺庙,如今又去了佑宁寺,也许真该去拉萨看看。佑宁寺夏天风景非常好看,但是对于青藏的冬天,更多的是苍茫。

 

页面客户端简易柱状图的实现

对于统计的的结果很多时候会采用一些图表进行显示,这样一方面给人的视觉上有很直观的表现,另一方面比起数字来说有很强的对比性及友好性,其中柱状图是常用到的一种图表。

在页面客户端展现柱状图目前多采用图片,其实现方式包括直接由服务器的脚本生成、一些类库、Flash等,对于简单的柱状图其实也可以使用CSS结合Javascript来完成.

1、最终效果

柱状图(效果中颜色跟高度随机)

柱状图(效果中颜色跟高度随机)

2、页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Histogram</title>
  <style type="text/css">
    #Histogram{
      width:300px;
      height:150px;
      position:relative;
      border-left:1px solid #000;
      border-bottom:1px solid #000;
    }
    #Histogram ul {
      width:300px;
      height:150px;
      margin:0;
      padding:0;
    }
    #Histogram ul li {
      position:absolute;
      width:12px;
      height:120px;
      bottom:0px;
      padding:0 !important;
      margin:0 !important;
      text-align:center;
      font-weight:bold;
      color:#fff;
      line-height:2.5em;
    }
  </style>
  <script language="javascript" type="text/javascript">
    function getRandomColor() {
      var str = "0123456789abcdef";
      var sColor = "#";
      for(var i=0;i<6;i++) {
        sColor = sColor + str.charAt(Math.random()*str.length);
      }
      return sColor;
    }
    function setResults() {
      var oRes = document.getElementById("Histogram");
      var tmpString = "";
      tmpString += "<ul>";
      for (var i=0; i<10; i++) {
        tmpString+="<li style=\"left:"+(30+(20*i))+"px;background:"+getRandomColor()+";height:"+Math.random()*120+"px;\">"+i+"</li>";
      }
      tmpString+="</ul>";
      oRes.innerHTML = tmpString;
      oRes.style.display="block";
    }
  </script>
</head>
<body onload="setResults();">
  <div id="Histogram"></div>
</body>
</html>