YUI Grids布局原理

Aug 11, 2010 07:13:58 AM

YUI Grids布局原理

(对外版)

主要内容

  • 学习使用YUI Grids布局

布局

  • 布局是网页的骨架，网页开发的第一步
  • 结构 模块 最终页面

不同的布局思路

(照片出自http://flickr.com/photos/ckalinw/)
(照片出自http://flickr.com/photos/my_soul_insurance2004/)
实例 实例

YUI Grids的好处

  • 解决重复劳动
  • 稳定
  • 黑盒系统
  • 自由安排内容的下载顺序
  • ~4K，支持>1000种页面布局
  • 适应所有IAB广告标准

开始

<body>
<div>
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
一个页面的最原始结构

引用YUI Grids CSS文件
<link rel="stylesheet" type="text/css" href="http://cn.yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">

第一步：决定页面的宽度(1)

<body>
<div id="doc">
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
  • #doc - 750px居中 (适合800x600)
  • #doc2 - 950px居中 (适合1024x768)
  • #doc3 - 100%液态 (适合everybody)
  • #doc4 - 974px居中 (适合1024x768)
  • #doc-custom - 自定义宽度

第一步：决定页面的宽度(2)

<body>
<div id="doc-custom">
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
<style> div#doc-custom{width:960px;} </style>

第二步：划分基本的内容块(1)

任何结构的页面都可划分为Main block和Secondary block。

第二步：划分基本的内容块(2)

<div id="bd"> 
<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
<!--start: 理财消费 {> ... <!--} end: 理财消费>
<!--start: 能人观点 {> ... <!--} end: 能人观点>
<!--start: 最新股票 {> ... <!--} end: 最新股票>
<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
</div>

第二步：划分基本的内容块(3)

<div id="bd"> 

	<div class="yui-b"> 
		<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
		<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
		<!--start: 理财消费 {> ... <!--} end: 理财消费>
	</div>

	<div class="yui-b"> 
		<!--start: 能人观点 {> ... <!--} end: 能人观点>
		<!--start: 最新股票 {> ... <!--} end: 最新股票>
		<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
	</div>

</div>

第二步：划分基本的内容块(4)

<div id="bd"> 

	<div id="yui-main"> 
		<div class="yui-b"> 
			<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
			<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
			<!--start: 理财消费 {> ... <!--} end: 理财消费>
		</div>
	</div>

	<div class="yui-b"> 
		<!--start: 能人观点 {> ... <!--} end: 能人观点>
		<!--start: 最新股票 {> ... <!--} end: 最新股票>
		<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
	</div>

</div>

第三步：选择模板

<body>
<div id="doc" class="yui-t1">
<div id="hd"> </div>
<div id="bd"> 
......
</div>
<div id="ft"> </div>
</div>
</body>

.yui-t1 - 2栏, 窄栏在左侧, 160px
.yui-t2 - 2栏, 窄栏在左侧, 180px
.yui-t3 - 2栏, 窄栏在左侧, 300px
.yui-t4 - 2栏, 窄栏在右侧, 180px
.yui-t5 - 2栏, 窄栏在右侧, 240px
.yui-t6 - 2栏, 窄栏在右侧, 300px
 

小结一下

  • 第1步 第2步
  • 第3步 第4步
  • 第5步 效果

内嵌布局

  • 内嵌布局
  • 格子Unit (.yui-u)
  • 网格Grid (.yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf)
  • 首格子 (.first)

网格类型

  • 两列
    .yui-g 1/2 - 1/2 (均匀分布)

    .yui-gc 2/3 - 1/3
    .yui-gd 1/3 - 2/3
    .yui-ge 3/4 - 1/4
    .yui-gf 1/4 - 3/4
  • 三列
    .yui-gb 1/3 - 1/3 - 1/3 (均匀分布)

使用Grids

  • 实例
  • ~2分钟
  • Grids的灵活性: 演示

多段布局(中国特色)

  • 演示
  • 段 (.section) 
    .section{margin-bottom:10px;}
.section:after{content:".";display:block;clear:both;visibility:hidden;height:0;}

相关资源

Homework

实例

要求：用YUI Grids手写完成上面Mockup的布局效果。

好好学习，天天向上!

Made with Eric A Meyer's S5

Tags: YUI javascript js framework dom
Posted in js-libraries | 4 Comments

检查素数的正则表达式

Aug 11, 2010 07:12:14 AM

 

一般来说，我们会使用正规表达式来做字符串匹配，今天在网上浏览的时候，看到了有人用正则表达式来检查一个数字是否为素数（质数），让我非常感兴趣，这个正则表达式如入所示：

检查素数的正则表达式/^1?$|^(11+?) +$/

要使用这个正规则表达式，你需要把自然数转成多个1的字符串，如：2 要写成 “11”， 3 要写成 “111”, 17 要写成“11111111111111111”，这种工作使用一些脚本语言可以轻松的完成。

一开始我对这个表达式持怀疑态度，但仔细研究了一下这个表达式，发现是非常合理的，下面，让我带你来细细剖析一下是这个表达式的工作原理。

首先，我们看到这个表达式中有“|”，也就是说这个表达式可以分成两个部分：/^1?$/ 和 /^(11+?)\1+$/

  • 第一部分：/^1?$/， 这个部分相信不用我多说了，其表示匹配“空串”以及字串中只有一个“1”的字符串。
  • 第二部分：/^(11+?)\1+$/，这个部分是整个表达式的关键部分。其可以分成两个部分，(11+?) 和\1+$，前半部很简单了，匹配以“11”开头的并重复0或n个1的字符串，后面的部分意思是把前半部分作为一个字串去匹配还剩下的字符串1次或多次（这句话的意思是——剩余的字串的1的个数要是前面字串1个数的整数倍）。

可见这个正规则表达式是取非素数，要得到素数还得要对整个表达式求反。通过上面的分析，我们知道，第二部分是最重要的，对于第二部分，举几个例子，

示例一：判断自然数8。我们可以知道，8转成我们的格式就是“11111111”，对于(11+?)，其匹配了“11”，于是还剩下“111111”，而\1+$正好匹配了剩下的“111111”，因为，“11”这个模式在“111111”出现了三次，符合模式匹配，返回true。所以，匹配成功，于是这个数不是质数。

示例二：判断自然数11。转成我们需要的格式是“11111111111”（十一个1），对于(11+?)，其匹配了“11”（前两个1），还剩下“111111111”（九个1），而\1+$无 法为“11”匹配那“九个1”，因为“11”这个模式并没有在“九个1”这个串中正好出现N次。于是，我们的正则表达式引擎会尝试下一种方法，先匹配 “111”（前三个1），然后把“111”作为模式去匹配剩下的“11111111”（八个1），很明显，那“八个1”并没有匹配“三个1”多次。所以， 引擎会继续向下尝试……直至尝试所有可能都无法匹配成功。所以11是素数。

通过示例二，我们可以得到这样的等价数算算法，正则表达式会匹配这若干个1中有没有出现“二个1”的整数倍，“三个1”的整数倍，“四个1”的整数倍……，而，这正好是我们需要的算素数的算法。现在大家明白了吧。

下面，我们用perl来使用这个正规则表达式不停地输出素数：（关于perl的语法我就不多说了，请注意表达式前的取反操作符）

perl -e'$|++;(1 x$_)!~/^1?$|^(11+?)\1+$/&&print"$_ "while ++$_'

另外，让我们来举一反三，根据上述的这种方法，我们甚至可以用正则表达式来求证某方式是否有解，如：

  • 二元方程：17x + 12y = 51   判断其是否有解的正则表达式是：^(.*)\1{16}(.*)\2{11}$
  • 三元方程：11x + 2y + 5z = 115 判断其是否有解的正则表达式是：^(.*)\1{10}(.*)\2{1}(.*)\3{4}$

大家不妨自己做做练习，为什么上述的两个正则表达式可以判断方程是否有解。如果无法参透其中的奥妙的话，你可以读读这篇英文文章。

 

源文档 <http://www.google.com/reader/view/>

Tags: RegEx prime number js
Posted in regex | 64 Comments

用 Javascript 获取指定页面元素的位置 - top, left, document, Element, 元素, position, 位置

Aug 11, 2010 07:09:58 AM

 

用 Javascript 获取指定页面元素的位置是一个非常常见的需求，本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标，即元素的 top 、left 的位置，而且能够兼容浏览器，相信对新手非常有用。

 

 

--------------------------------------------------------------

点此浏览示例文件

--------------------------------------------------------------

 

 

Javascript:

 

  1.  
  2. <script language="JavaScript" type="text/javascript">
  3. <!--
  1.  
  1. // 说明：用 Javascript 获取指定页面元素的位置
  2. // 整理：http://www.codebit.cn
  3. // 来源：YUI DOM
  1.  
  1. function getElementPos(elementId) {
  1.  
  1. var ua = navigator.userAgent.toLowerCase();
  2. var isOpera = (ua.indexOf('opera') != -1);
  3. var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
  1.  
  1. var el = document.getElementById(elementId);
  1.  
  1. if(el.parentNode === null || el.style.display == 'none') 
  1. {
  1. return false;
  1. }
  1.  
  1. var parent = null;
  2. var pos = [];
  1. var box;
  1.  
  1. if(el.getBoundingClientRect)    //IE
  1. {
  1. box = el.getBoundingClientRect();
  1. var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  2. var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  1.  
  1. return {x:box.left + scrollLeft, y:box.top + scrollTop};
  1. }
  1. else if(document.getBoxObjectFor)    // gecko
  1. {
  1. box = document.getBoxObjectFor(el);
  1. var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
  1. var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
  1.  
  1. pos = [box.x - borderLeft, box.y - borderTop];
  1. }
  1. else    // safari & opera
  1. {
  1. pos = [el.offsetLeft, el.offsetTop];
  1. parent = el.offsetParent;
  1. if (parent != el) {
  2. while (parent) {
  1. pos[0] += parent.offsetLeft;
  2. pos[1] += parent.offsetTop;
  3. parent = parent.offsetParent;
  1. }
  1. }
  1. if (ua.indexOf('opera') != -1 
  1. || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) 
  1. {
  1. pos[0] -= document.body.offsetLeft;
  1. pos[1] -= document.body.offsetTop;
  1. } 
  2. }
  1. if (el.parentNode) { parent = el.parentNode; }
  1. else { parent = null; }
  1. while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') 
  1. { // account for any scrolled ancestors
  1. pos[0] -= parent.scrollLeft;
  1. pos[1] -= parent.scrollTop;
  1. if (parent.parentNode) { parent = parent.parentNode; } 
  1. else { parent = null; }
  1. }
  1. return {x:pos[0], y:pos[1]};
  1. }
  1.  
  1. //-->
  1. </script>
  1.  

 

从 <http://www.codebit.cn/pub/html/javascript/tip/get_element_position/> 插入

Tags: javascript js fix cheats tricks technique elements position justify
Posted in javascript | 15 Comments