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

当然，单单测试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高度是奇数的话，这个bug会出现。笔记一下。

在来看看我们天天抱怨的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.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)当外层过程的局部变量名和嵌套过程内的局部变量名同名时，外层局部变量名的作用域不包含此过程。

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

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

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

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

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

属性：

cancel：

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

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

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

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

一天一个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里面定义这些属性效率更好。

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

 一天一个jQuery UI 组件，今天折腾 Interactions 下面的droppable ，这个组件我一直不知道知道用什么中文名来描述它，这个组件的效果是当一个拖拽对象（draggable）拖拽到droppable的时候，droppable 可以发生一系列变化。所以我暂且把droppable 叫做放置对象。他是用来方式拖拽对象。

要使用放置对象，需要应用一下文件： （比昨天说的 拖拽对象多了一个ui.droppable.js）

放置对象没有拖拽对象那么多属性：

accept：
放置对象可接受的拖拽对象名字。可以为拖拽对象的ID 标签或者通配符。默认是接受所有拖拽对象。

activeClass:
拖拽对象开始被拖拽时（正在进行时），放置对象添加样式变化，拖拽结束或触发hoverClass自动移除这个样式。

hoverClass:
拖拽对象拖拽进行过程中，如果拖拽对象 的x轴或者y轴 有50%(根据tolerance参数来定义的)在放置对象的区域内，那么放置对象就添加这个样式，移除自动释放这个样式。

addClasses:
功能和拖拽对象的addClasses一样。请参阅。

greedy：
翻译是防止传递参数，具体没弄明白。

tolerance:
定义拖拽对象于放置对象发生交集的面积为多少时，才出发放置成功事件。

事件：

方法不说了，比较容易理解。

jQuery UI 很不错，最近在学习笔记一下，一下学习资料仅供参考，由于本人也是初学，对所有代码以及说明不做100%正确保证。请根据实际情况和现实理解和使用。如果发现错误，请告诉我，谢谢。

Draggable拖动是jQ UI 的第一个例子。今天学习了下，由于英文阅读能力有限 有些属性没弄明白，以后补充。

初始化框架，引用对应ui库文件

dom加载完以后执行绑定。 

现在基本的拖拽已经可以实现了。 只要你在页面创建一个 以 #draggable命名的标签就ok了

draggable方法有很多参数，今天我瞎摸弄明白了一下几个：

addClasses:
如果设置成false,将不添加ui-draggable这个class.当调用 .draggable() 初始化上百个元素时,可以优化性能（【王子很坏】提供翻译）

appendTo :
进行拖拽时,被传递或被appendTo选项选择的元素将被当做draggable helper的容器,默认情况下,helper被追加到那个draggable元素相同的容器中（（【王子很坏】提供翻译 , 这个属性我测试没成功。研究中）

axis:
拖拽动作只在 对应的轴向上移动。 参数x 或 y

cancel :
当拖拽对象是cancel说设置的标签或者对象时候，拖拽无效

containment:
限制拖拽对象在参数设置区域，参数可以为 标签 对象 或者 是[x1,y2,x2,y2]的像素区域

cursor:
设置 拖拽动作鼠标样式

cursorAt:
设置拖拽动作发生鼠标所在位置 参数为 { cursorAt: { left: 5 } }

delay:
拖拽动作延迟多少毫秒后响应 参数 毫秒

distance:
拖拽动作离开拖拽对象 一定像素以后 拖拽发生 参数数值

grid :
拖拽动作发生后 造成 对其网格效果， 其效果是每次移动 固定像素距离，参数为 [20, 20]

handle:
设置拖拽对象里面可实现拖拽动作的对象。参数是选择器 类似于浏览器一样，只能通过顶部蓝色条拖拽，但是拖动的是整个浏览器。

helper :
拖拽动作发生时 原始对象不动，复制一个对象给拖拽事件 对象在拖拽结束后是否保存在结束位置取决于参数   'original', 'clone', Function. 参数为function的时候不许返回一个 dom标签。

iframeFix :
防止应为iframes 的存在导致拖拽在中途丢失

opacity :
设置拖拽时的透明度 参数浮点型  1.00-0.00 拖拽结束后 透明度回复初始状态

scroll :
设置拖动对象被拖动时，是否允许拖出前容器（浏览器）显示区域（也就是说触不发auto-scrolls *关于auto-scrolls请看后面的解释*）。设置为false ，拖动对象碰到边框的时候容器窗口不会随着碰撞移动主体窗口。 注意，这个经过我测试，设置为false 一样会产生滚动条。

scrollSensitivity :
设置拖拽对象被拖拽时与容器发生碰撞的响应距离。貌似这样解释不好理解，通俗的说，就是当你碰到边框的多少像素范围内就发生auto-scrolls事件。

scrollSpeed:
当拖拽对象和浏览器边发生碰撞时，容器每次移动主体窗口的距离。

revert :
设置拖拽事件执行完毕后拖拽是否生效，如果不生效那么将以动画方式返回到拖拽对象初始化位置。参数为逻辑值或者字符串'valid', 'invalid'

revertDuration :
在revert事件执行时候，设置以动画返回初始化位置的速度。参数为 数值毫秒。在没有设置revert的情况下 改属性没意义。

snap:
拖拽对象设置该属性以后，在2个拖拽对象即将发生接触时，拖拽对象会自动吸附到相互的边上。类似于磁铁效果或者ps里面的对齐参考。参数为逻辑值， 只有2个或者2个以上对象设置了该属性才能相互发生作用。

snapMode :
拖拽对象相互之间的吸附模式。参数为'inner', 'outer', 'both'。 默认值是both。

snapTolerance:
拖拽对象相互之间发生吸附模式的作用范围，可以理解为 磁铁的磁力， 参数为 像素单位。

stack :
当你有多个拖拽对象的时候，你可以使用此参数把他们设置为一个组，然后在这个参数里面有可以定义最小z轴，这些拖拽对象，将不再按照原始z轴层叠，而是按照最后点击循序来层叠。类似于windows多个文件夹窗口一样的层叠。 参数方式{ stack: { group: 'div', min: 50 }}。

zIndex 拖动事件触发时候 z轴改成对应参数，拖拽结束，z轴还原。 

注：【aoto-scroll  是自动滚动，也就是说 拖拽对象在碰撞到边框的时候，容器（浏览器）滚动条会自动延伸滚动条 并且屏幕像碰撞方向偏移~】

 事件：

拖拽有3个事件，和4个参数 详情可以直接看官方aip那些不用详细说明。

基本参数写法

如何获取参数？

组件提供get和set方法来获取和设置参数。

以上面设置透明度为例：

以上只是draggable的部分内容，明天更新剩下的。如果有兴趣请直接访问

http://jqueryui.com/demos/draggable/

唉都怪英语没学好。痛苦中~~~

首先折腾的第一个程序：

实现这个效果

    *
  ***
*****

幸亏在之前自习看过js的面向对象编程方式，要不然对java的代码估计会一头雾水。很多java权威书都是基于你已经理解面向对象编程的基础上去写的，怪不得我之前看书看得云里雾里。

好了现在折腾这个效果：

1.建立一个demo的包
2.建立一个Yhsjx.java 的类（杨辉三角 其实这个效果只不过是看上去像杨辉三角而已 ，杨辉三角比这个复杂多了）
写第一段代码：

这个就是java的基本代码。我站在从前端角度走过来的视角来看这个问题，首先，应为前端角色接触的js大部分都是流程编程，所以看到这个会觉得奇怪，为啥代码要匡到这些代码里面，不框这里面不行么。 框在这里面是干嘛用的。 其实这是我看到这个基本代码的一系列问题。

但是现在我是初学，依葫芦画瓢，这些问题都以后再理解，只要记住你代码就只能写在 这个基本代码里面。就可以了。

这个输出结果是：

*
***
*****

这个输出在哪里？ 在没学之前我就根本不知道这些打印是输出在那里的。像js里你可以输出在页面，也可以alert弹出。 在java里面这些输出会在console里面输出，也就是说他有一个现实信息的控制台。输出的信息在里面，另外错误信息 和警告都会在里面。

现在我们输出的 和我们想要的结果不一样，但是这个是最基础的 东西，所以解释下代码。首先定义一个变量 c 类型是String ;这个和js不一样，js是弱类型的，所有变量都可以直接用var 并以，但是java不行，你要用什么类型就得用什么关键字定义。 应为我输出的是字符，最开始我是用char来定义，写成 char c = "*";结果报错了，后来询问了才明白char类型定义的单个要用单引号......额在java里面还区分单引号和双引号的。后来jond（我公司的java程序员）让我改成用String类型。

然后是一个for循环，应为我要输出3行，所以我就循环输出咯。 这个循环结构和 js 的是一样的，不做多说。

最后我们在循环体里面打印字符，然后累加。

现在要走的就是把这些*对其。对其的话最简单就是补充空格了。做前端的千万别想着加一个css的居中属性就解决了，控制台是输出信息的，不能用css格式化·····

加空格就是算法的问题了， 我们要在第一行加2个空格，第2行加1个空格，第3行家0个空格。

输出结果：

*
 ***
  *****

显然，空格的输出是反了的， 我下想要的是 第一行2个，第三行0个，结果反过来了。 应为只有一个循环。所以我没有想到好的方法在一个循环里面解决这个问题。所以我想在这个循环里面存储数组，在下一个循环里面显示数据。

    *
  ***
*****

现在就ok了哦

呵呵，下一步需要把 行数 用参数来调用。 所以需要把这个算法写成一个方法...现在要工作有空再写。

为什么要先执行一次 of();

只有调用了of 方法才有result属性.js属性是可以动态绑定的,o对像本身没有result属性.只有o1,o2属性.当调用of方法后.才会给o对像添加result属性.

在去年的深圳举行的第二届WebRebuild年会上面彪叔提及过如何通说设置服务来实现加速页面载入，主要把304请求转换为Cache请求。不过当时因为大部分再坐的都是页面重构，对服务器服务方面了解甚少，也就没有详细讲。我也没太在意。

转折：

昨天在群里和偷米饭扯淡的时候突然提及到这个问题，首先他告诉我304请求实际上是 服务器告诉我请求的文件已经在本机上有了，请从本机获取。而Cache请求是直接从本机获取。 所以速度方面会有提升。

问题：

1.如何让请求从304变换成Cache

2.如何保证 更新以后，请求能判断是否有新版本。

解决方案：

1.根据偷米饭的信息提供，需要设置apache的配置文件来实现。

2.设置文件的时间戳。以达到更新文件以后，就版本文件和新版本文件 文件名不一样，达到从新请求文件目的。

Apache配置代码：

如果我的说法有错误，麻烦看到的的大侠及时告知我。另外我不保证我阐述的一定是正确的，改文章只做笔记用，切勿当成真理。

这个选项列表要求大概是这样的， 点击标签然后 弹出列表，把列表项目最长的一项的宽度 给 点击标签。并且把文本值给过去。同时关闭列表。

xhtml

也就是说  图片如果比外面的标签大 就不会被截取。目前还没有想到办法解决。