[Javascript][jQuery]kxbdTabs和kxbdAccordion
作者:勤卓 日期:2009-11-03
又写了一个选项卡和Accordion，这次是用jQuery完成的，这两个plugin内部实现其实基本一样，连应用也基本一致，之所以分成了两个，主要是因为前台代码结构并不由我控制，kxbdAccordion是适用于当前的业务需求，而我为了更多的适应将来的需求而重构了一下，写了kxbdTabs，一般情况下，使用kxbdTabs就好。
两个plugin区别在于kxbdAccordion要求是固定的DOM结构，而kxbdTabs通过传入选项卡数组和内容数组，可以更灵活的适应于大多数情况。在具体应用上，kxbdAccordion要实现选项卡的效果，也必须在CSS上多编写些代码，
功能不多，就是常用的展示，包括轮换，一些效果的设定，能通过事件callback来应对更多特殊的要求。
两个plugin区别在于kxbdAccordion要求是固定的DOM结构，而kxbdTabs通过传入选项卡数组和内容数组，可以更灵活的适应于大多数情况。在具体应用上，kxbdAccordion要实现选项卡的效果，也必须在CSS上多编写些代码，
功能不多，就是常用的展示，包括轮换，一些效果的设定，能通过事件callback来应对更多特殊的要求。
Tags: Javascript JQuery
[Javascript][jQuery]kxbdLayout——可拖动的100%布局
作者:勤卓 日期:2009-10-23
[Javascript][jQuery]hLayout——可拖动的100%宽度布局
作者:勤卓 日期:2009-10-22
最近在写一些UI布局方面的代码，jQuery UI里包括一些常用的插件，不过日常工作中还有不少UI需要而jQuery UI并没有提供，我这几天写的hLayout插件是在draggable插件基础上完成的。全屏的流体布局通常出现在Web软件里，Yahoo最近推出的新版邮箱就很强大，包括多种Web UI实现。
jQuery UI在core.js里提供构建jQuery widget的方法，这种方式和写jQuery plugin就有些差异了，而和我使用Mootools或者Prototype来写有些类似。现在用jQuery来写代码就让我感觉习惯多了。
我写这个插件的思路还是通过绝对定位来实现，用JS来设定拖动后的各元素的位置。因为要实现布局的嵌套，所以用hLayoutManager来管理所有hLayout，实现父级改变hLayout后，子级元素也做相应的变化。hLayout除了可以无限嵌套外，还可以设定是固定左边还是右边的宽度。
jQuery UI在core.js里提供构建jQuery widget的方法，这种方式和写jQuery plugin就有些差异了，而和我使用Mootools或者Prototype来写有些类似。现在用jQuery来写代码就让我感觉习惯多了。
我写这个插件的思路还是通过绝对定位来实现，用JS来设定拖动后的各元素的位置。因为要实现布局的嵌套，所以用hLayoutManager来管理所有hLayout，实现父级改变hLayout后，子级元素也做相应的变化。hLayout除了可以无限嵌套外，还可以设定是固定左边还是右边的宽度。
Tags: Javascript JQuery
[Javascript][jQuery]超级Marquee，可做图片导航，图片轮换
作者:勤卓 日期:2009-07-27
这几天没事的时候琢磨的小东西，在已有的Marquee继续扩展，因为用途多样，所以取名叫Super Marquee，虽然看上去和Marquee已经没有太多联系，但实际上和前几天写的Marquee原理是一样的。
新的插件，能实现广告，图片，公告等的轮换，还能做为滑动导航，当然也包括最基本的Marquee功能，同时加上了暂停滚动的功能。由于功能比较多，所以带来的后果是设定的参数也增多了。动画的实现仍然是使用设定scrollLeft和scrollTop来做，所以占用系统CPU并不多。
写这么一大坨的代码出来，我和代码都很纠结，其实编写过程并不复杂，但是浏览器调试占据了我大部分的时间，主要是因为Firefox的表现与其他浏览器不一致，经常会出现动画错位的现象。
新的插件，能实现广告，图片，公告等的轮换，还能做为滑动导航，当然也包括最基本的Marquee功能，同时加上了暂停滚动的功能。由于功能比较多，所以带来的后果是设定的参数也增多了。动画的实现仍然是使用设定scrollLeft和scrollTop来做，所以占用系统CPU并不多。
写这么一大坨的代码出来，我和代码都很纠结，其实编写过程并不复杂，但是浏览器调试占据了我大部分的时间，主要是因为Firefox的表现与其他浏览器不一致，经常会出现动画错位的现象。
Tags: Javascript JQuery
[Javascript][jQuery]模拟Marquee无缝滚动（二）
作者:勤卓 日期:2009-07-17
[Javascript][jQuery]模拟Marquee无缝滚动
作者:勤卓 日期:2009-07-16
我原来用Prototype.js写过一个无间断滚动图片，写的比较早，使用的思路还是FLASH里的一套，主要是通过不断设定元素的Position来完成的，这导致了执行效率差，CPU占用很多，如果一个页面多来几个这样的，只怕是不要想动了。
这几天一直在看jQuery，理顺了编写jQuery插件的思路，于是打算写一个最简单的插件来熟悉一下jQuery的编码方式，主要是根据jQuery插件开发模版来进行。
要实现滚动，除了设定元素的Position，还可以通过设定容器的scrollLeft和scrollTop来完成，无须改变元素的Style，大大减少执行的开销。
这几天一直在看jQuery，理顺了编写jQuery插件的思路，于是打算写一个最简单的插件来熟悉一下jQuery的编码方式，主要是根据jQuery插件开发模版来进行。
要实现滚动，除了设定元素的Position，还可以通过设定容器的scrollLeft和scrollTop来完成，无须改变元素的Style，大大减少执行的开销。
Tags: Javascript JQuery
