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

  转载请注明文章来源自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里面定义这些属性效率更好。

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

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

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

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

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

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

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

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

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

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

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

事件：

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

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

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/

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

最近在学习java，但是如何快速高效率的学习是个问题。每个人接收新事物的方式都不同，我属于自由在折腾中才能学会的人。从以前学习css，js来看，都是需要折腾才能把东西记住的。书看了真的不是那么容易记忆的。

首先折腾的第一个程序：

实现这个效果

    *
  ***
*****

幸亏在之前自习看过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了哦

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

起因：css森林的robin 在看js权威指南的时候遇到了这个困惑，在写p143页面的demo代码的时候 搞不清为啥demo要这样执行。

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

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

起因：

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

转折：

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

问题：

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

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

解决方案：

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

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

Apache配置代码：

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

有是给rain写的列表。笔记一下。 一直想给编辑器加一个直接运行代码的按钮，但是确实能力有限不知道怎么加。有不愿去搜索。毕竟blog是做笔记的地方。不是给别人show的，所以给为看的朋友请见谅 麻烦复制到 DW里面 保存看效果。 可以使用 /d 来替换所有的项目列表数字符号。之前我的文章里面有提到过。

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

今天 ，群里的rain.kx 又让我帮他弄东西。 他想模拟 下拉菜单。 但是有不能定死下拉菜单宽度，所以希望能通过js获取模拟的下拉框的宽度。

xhtml

前阵子发现了 这个问题
http://www.dabaii.com/?action=show&id=66

之后写的解决方案
http://www.dabaii.com/?action=show&id=67

解决方案看上去比较ok拉。但是 实际上 由于图片使用了

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

群里的rain.kx 需要一个做类似于我的电脑右侧的那些 折叠菜单.

代码结构（rain.kx 提供的需求结构）

操作a按钮 ，实现打开和关闭ul

js

现在什么都高一个纪念日出来，搞得像一年到头都在过节一样。

今天是css裸奔日。所以把css给注释掉了。纪念一下自己 也是 一个web工作者，赶紧加入裸奔把，让这种专业文化发展起来。

昨天哪个问题 谢谢ashung 提供的思路.