做别人没想过的,想别人没做过的

return false会阻止冒泡的发生，而preventDefault 不会，

看地址 http://www.dabaii.com/demo/20100709/

今天遇到的这个问题其实早在1年前做DNF商城的时候就遇到了，由于ajax的数据加载，导致原本拥有position属性的元素不会自动移动位置，导致原始内容，和ajax 内容叠加。

当然，单单测试position 是不会有问题的。但是这个问题很容易触发。比如说 position 的父标签或者最祖辈标签里有背景。加入机器稍微差点这个时候就会触发。如果机器好点 ，有可能还得加条件。

同样，网上流传的那个清楚浮动的理想方式里面的 

这个也会引起新能问题。

提供一个测试：

试试用你的ie6 测试一下。http://www.dabaii.com/demo/20100701/

注意这个一个测试文件。不要纠结css代码和结构的意义。虽然这个测试文件 这种css 和代码看上去没啥意义，也不符合逻辑。为什么平白无故清浮动？ 为什么A要有position:relative。但是总归有一天会又这样的结构需要这样的css……这里只是展示一下这个bug出现的条件而已。

这行代码有啥用呢？  实际上我在产品布局的时候希望 产品呈方块形一个个排列，一行N个，一共x行。

但是我们知道如果我们使用浮动的话 必须给li定高，要不然 不等高会导致下一行出现错位。原因是 在统一行多个浮动始终会以最高的那个为标准来确定是否换行。 至于为什么要浮动，而使用inline， 主要是我们希望li这个元素拥有block状态下的一些属性。以便更好的控制。

而使用inline-block 可以实现有lnline的显示方式，但是又有block的属性。 但是这个属性版本性支持不理想。

首先我们在ie下面使用*display:inline; zoom: 1;来模拟。 display 可以让对象实现在一行显示， zoom可以让对象获得layout，从而拥有black状态的一些属性。 

vertical-align: top; 解决li之间上下对其的问题

min-height:180px; 主要是让默认状态实现统一的一个高度。

 _hiehgt:180px; 让ie6实现 min-height

最近突然想到了这个问题，以前看过类似文章的解答，自己也想了想，笔记一下 ，以免忘记。

这个使用 li的起始位置在剧中的50%的地方，所以需要把li 向左边移动50%。 这里想问题的时候要注意，position:relative所定义的移动百分比不是相对于自身的，而是相对于父元素的。也就是说 li 50% 实际上计算出来的宽度 是 ul宽度的一半，而不是li的。

今天我做圆角box。设置左下角 和右下角的 位置是bottom :-1px; 按计算来说是正常的。但是始终错位了1像素。

分析以后才知道，如果box高度是奇数的话，这个bug会出现。笔记一下。

我发表这篇文章 也是用的火狐浏览器，我有很多插件 …… 点击 帮助（alt+h）——关于mozilla firefox（A）看到的版本更新信息是20091102。打开我的ie7，一样的操作，我看到的版权信息是2006年，百度百科一下（http://baike.baidu.com/view/392749.htm）,2006年末发布的。

在来看看我们天天抱怨的ie6把（http://baike.baidu.com/view/476980.htm）,2001年末发布的版本。

那看看我们的css版本把（http://baike.baidu.com/view/15916.htm#2）,1998年中旬发布的css2.0。

有何感想？你有理由去抱怨一款8年前的或者3年前的产品么？在你抱怨他的时候是否看到他的伟大，试问如果firefox从现在开始不更新能否3年以后 8年以后还能用来正确有效的浏览90%以上的网页?在抱怨的时候你为啥不想想在这8年的时间里为什么舍不得花费20分钟来升级你的浏览器。

一款不更新的浏览器能够坚持8年已经不错了，你们就放过ie6把，该升级的升级，改写hack的写hack，不要整天骂他了。他只是个孩子。

火狐的版本历史（http://baike.baidu.com/view/3279.htm#2）,太多太多，我很喜欢火狐，但是如果真的说心里话，我很佩服ie。

注意， 数据链接来源于http://www.w3school.com.cn/ ，我只不过是做了2次整理以便于学习。

在线地址：

http://www.dabaii.com/demo/2009/04/index.htm

xls表格下载

http//www.dabaii.com/demo/2009/04/html4_html5.xls

百度文档中心下载

http://wendang.baidu.com/view/2079551810a6f524ccbf8596.html

万恶的 google文档又挂了~~~所以不提供地址。另外我的评论系统坏了，有错误请麻烦各位邮箱联系  dabaicj@gmail.com

森林某人 前几天问

http://www.dabaii.com/demo/2009/03/ 

这个效果怎么写标签，于是 我想起了我之前写的一个模范豆瓣评分的（http://dabaii.com/?action=show&id=35）。

显然这次的评分和上次的从标签来说 没什么好说的，主要还是看怎么实现效果。

首先确定结构

首先要确保可以复用 ，所以box是个单独的模块，一个评分条。 f 是现实分值的， s 是评分条。

css代码（不解释）：

关键是思维，其实我一直觉得写前端效果主要还是要想到用什么方式实现效果。我这里采用的是获取鼠标基于评分条位置来确定分数显示版的位置，来判断鼠标位置位于评分条总宽度的百分比，然后确定分数显示版的数值。

步骤
1。给所有评分条绑定事件；
2。获取评分条的位置；
3。获取鼠标位置；
4。计算显示板的需要显示的位置（鼠标位置-评分条位置）；
5。计算显示数值（显示位置/评分条宽度*10；截取小数点1位）；
6。设置到相应页面属性。

提供一个获取鼠标位置的方法。

js代码（基于jQ，别问我js怎么写 不解释）：

前段时间腾讯招聘，群友去了以后带回来的题目。

把数字格式123456789转换成123,456,789.

由于本人对正则一窍不通，所以根本就想不到用正则去处理这个问题，于是用的是分割字符串的办法。

代码够多的把，能力不行就是没办法。

测试地址：http://dabaii.com/demo/2009/01/index.html

正则的方法：

不过用js的方法让我也长进了不少，至少很少使用的递归我今天倒是第一次用到了。

笔记。

今天群里有人说去淘宝面试了，有一道关于简单有容易出错的问题，应为基础不牢固也犯错了特此笔记一下。

输出的是什么呢？

开始我觉得应该是  200 和 100， 结果 确实NaN和100。

为什么第一个会是NaN呢？命名已经定义了全局变量，var b=2 * a 应该是可以2*100的结果啊

后来翻阅资料才明白，当全局变量和局部变量同名的时候，全局变量是不会主用于同名局部变量的作用域的。也就是说var a=100是不会作用于testResult这个函数中的。

引用：

1.全局变量和它的作用域
　　全局变量是指在程序开头的说明部分定义和说明的量。它的作用域分为两种情况：
(1)在全局变量和局部变量不同名时，其作用域是整个程序。
(2)在全局变量和局部变量同名时，全局变量的作用域不包含同名局部变量的作用域。
2.局部变量和它的作用域
　　凡是在子程序内部使用的变量，必须在子程序中加入说明。这种在子程序内部说明的变量称为局部变量。局部变量的作用域是其所在的子程序。形式参数也只能在子程序中有效。因此也属于局部变量。局部变量的作用域分为两种情况：
(1)当外层过程序的局部变量名和嵌套过程中的局部变量不同名时，外层过程的局部变量作用域包含嵌套过琛。
(2)当外层过程的局部变量名和嵌套过程内的局部变量名同名时，外层局部变量名的作用域不包含此过程。

 转载请注明文章来源自http://www.dabaii.com/ 

上周五工作太忙，周末周日休息。今天继续更新。

之前我介绍了3个组件，缺没写一个demo来掩饰。呵呵，应为单独演示一个组件貌似看不出jQuery UI的强大。所以我打算至少学习完一组组件以后再写一个demo来演示他的强大。

selectable 这个组件主要用于选择对象，不如说 我有菜单5个，我点击选中其中一个。或者 用鼠标框住连续的几个。在我没有看过比较牛x的效果之前，我也不知道这个组件是干嘛的。但是本着我一贯依葫芦画瓢的态度，反正先弄明白他的属性再说。弄明白了，以后总归用得到的。

题外话，这些关于jQuery UI的文章我也是自己慢慢看的，肯定有些地方解释得活着分析得不够得当或者贴切，我都声明过了这个是我的个人笔记分享，不要当成是真理。如果你要确保资料的可靠性 请学好英语和培养好理解能力看官方的api。

首先我们要应用一下文件。

属性：

cancel：

属性是选择器，所选择的对象不加载selectable这个方法。

一下列表中 id为 a的是不能通过点击选中的。

delay：
鼠标按下后停留多少毫秒以后才能框住几个。

distance：
设置鼠标框住多少距离以后才实现效果。

  转载请注明文章来源自http://www.dabaii.com/ 

一天一个jQuery UI 组件，今天折腾 resizable 。resizable 是让对象拥有可调整大小的属性，类似于windows文件夹一样可以通过拖动边或者角来调整文件夹的大小。

要使用resizable ，需要应用一下文件：（呵呵，这个组件不再和之前2个组件有关联了。）

属性：

alsoResize：
参数是选择器，参数所指的对象也会跟随调整大小对象一起进行大小改变。参数所指对象可以是调整大小对象内部元素 也可以是外部元素。

animate：
调整大小动作发生在调整以后。以渐进加速方式实现动作。也就是说 你在调整的时候对象的大小是不会变化的，当你松开鼠标的时候才开始发生大小变化，变化的过程并不是匀速的。参数是布尔值。

animateDuration：
与上面一个参数配合用，设置多少秒类完成大小变化动作。单位是毫秒。 参数也可以为内置的字符串 'slow', 'normal'

animateEasing：
这个属性我很纳闷，应为我在官方api上面只看到一个参数 就是swing，而默认值就是swing。

aspectRatio：
设置为true按比例调整大小，可以设置为比例制 如1/2 或者0.5.  

autoHide：
自动隐藏右下角调整标识...在加载ui的时候，右下角会有一个类似于QQ右下角那种3斜杠。这个属性值在设置鼠标没有放在边上的时候 不显示这个。

cancel：
属性是选择器，所选择的对象不能调整。比如说用 class选择器选择了一批标签，但是我希望这批标签里面的 id是#a的不能调整。

containment：
限定可调整区域。参数'parent', 'document'，也可以是选择器或者标签名。比如说我把调整区域限制在父标签，那么这个元素最大只能调整成父标签的大小。

 delay：
延迟多少毫秒执行调整事件。这样可以有效的避免因为不经意的操作而误调整了窗口。也就是说 你鼠标放在边或者角上的时候需要按下去停留一定的毫秒才能执行调整事件。

JavaScript代码
$(".resizable").resizable({ delay: 2000 });  //测试用的，按下去2秒后才能调整，否则无效

distance：
延迟多少像素执行调整事件，作用和上面的参数一样，都是为了防止误操作。 鼠标按下去移动参数像素以后才能触发调整事件。

JavaScript代码
$(".resizable").resizable({ distance: 200 });  

ghost：
设置为true以后，调整时，原始对象并不发生变化，而是复制一份原始对象，并且把它半透明，来显示你调成的大小，鼠标松开后，半透明的复制对象消失，原始对象直接显示调整后的大小。 

grid：
设置调整大小时候x y 轴每次移动多少像素。

handles：
可实行调整的边和角。默认只有 [右边,下边,右下角]可以调整。 可以根据参数{ n, e, s, w, ne, se, sw, nw }自由搭配。

helper：
拖拽组件也有这个属性，但是在这个里面 效果不同，这个里面helper的参数是一个字符串（class名字），当调整发生时，会有类似ghost的效果发生，只不过ghost效果所复制的是已经定义好的，而这里可以自己根据css定义复制出来的 原始对象。同样，在调整结束后，这个复制对象会消失。

maxHeight：
maxWidth:
minHeight:
minWidth:
这2个属性，等同于css里面的 对应属性。实际上，如果不考虑ie6的话，在css定义 这些属性比在jQ里面定义这些属性效率更好。

方法，和皮肤 很简单 看官方的很容易明白 这里我就不记录肋