Javascript 动态表格 Grid 更新记录
dTable动态表格更新记录。
1.对行事件的处理进行了修改和完善。由对每一个tr对象进行事件注册改为事件委托。
2.对功能菜单按钮和上下文菜单选项进行了枚举化。避免不必要的错误。
3.对整体的性能进行微调。 继续阅读 »
转载请注明原文出处《Javascript 动态表格 Grid 更新记录》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
Javascript中继承的实现与问题
继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承，多利用组合代替继承，但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制。
Javascript中实际上是没有继承的概念的，但是我们可以通过一些手段来模仿实现它。这种继承实际上把一个对象复制到另外一个对象内部。你需要注意的是所有的本地类和宿主类是不能作为基类被继承的，主要是为了安全方面的考虑。
Javascript中的继承大约有三类：1.对象冒充；2.原型继承；3.二者的混合。 继续阅读 »
转载请注明原文出处《Javascript中继承的实现与问题》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
Javascript以面向对象的思路实现可切换的页面控件
本篇文章的主要目的是使用Javascript以面向对象的思想从另外一个角度去实现一系列页面控件。
首先声明一下：
1.如果你只是想要一个完善的js代码，让你可以套用到自己的页面并立即实现你想要的效果，为了节省你的时间，请绕过。
2.如果你想看一篇手把手的给你实现一个标签页效果或者轮换图片的效果，那么请路过。
3.如果你喜欢Javascript这个语言，想一起思考一些更深入的东西，请继续阅读并希望你不吝赐教。
点击查看演示效果（Demo比较粗糙，兼容IE6+，FX3.5+） 继续阅读 »
转载请注明原文出处《Javascript以面向对象的思路实现可切换的页面控件》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
Javascript动画工具mo对象更新记录
-
o
- 修正了changeColor()方法的错误，多次快速触发颜色变化方法是不会再发生同时触发slideUp()方法。
- 修正了透明度改变动画在IE下的的错误。透明度值可以进行连续变化。
- 修正了初始化函数的部分内容。
- 添加了时间控制参数，可以采用数字或mo本身提供的类似枚举变量。
o
o
o
- mo(target).animate({opacity:'0.4'},mo.fast);
-
- mo(target).animate({opacity:'0.4'},40);
mo对象提供三个值分别为mo.fast，mo.normal，mo.slow。注意这里的的时间值为帧数而不是时间值，可以通过简单的换算来得到时间值，例如40帧，对应10mspf，持续时间应该为400ms。
本工具主要用于学习，效率方面可能会存在某些问题，下一步会考虑在动画执行效率方面进一步优化。
转载请注明原文出处《Javascript动画工具mo对象更新记录》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
Javascript 动态表格 Grid – 实现与使用(3)
这是一个系列文章，前两篇文章分别的介绍了一个轻量级的Javascript版Grid控件的实现目标和简单的使用方法。
最近又对这个控件进行了一个简单的改进，主要是对行的点击选择行为进行了修改，使之更加符合通用的用户使用习惯。将以前的单一的点击选择方式改为：单击，Ctrl+单击，Shift+单击。
单击：保持当前选中的只有一列。
Ctrl+单击：可以不连续的选中多行。
Shift+单击：用于连续的选中多行。
转载请注明原文出处《Javascript 动态表格 Grid – 实现与使用(3)》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
Javascript 动态表格 Grid – 实现与使用(2)
上一篇文章中简单的说了一下我要实现的Javascript版的页面Grid控件的基本目标，并给出了相应的效果图。本篇文章简要的介绍一下实现的思路和dTable控件的使用方法。
控件主要由三个对象和两个可枚举的结构组成，它们分别是dtable，FuncMenu，cstmContextMenu三个对象，以及funcBtnsEvent和contextMemuItem两个可枚举的结构。命名有点乱…
dtable对象：负责与Table相关的样式和事件进行管理，提供相关的行数据。
FuncMenu对象：对功能按钮进行管理，负责功能按钮的内容，管理功能按钮的绑定事件，样式变化。
cstmContextMenu对象：自定义右键菜单对象，负责对自定义的右键菜单进行管理，包括内容，事件，样式的管理。
funcBtnsEvent对象：包含功能菜单对应的引用事件，在使用时应该进行重写。
contextMenuItem对象：包含右键菜单对应的引用事件，在使用时应该进行重写。
下面让我们看一下怎么使用。
我们需要在页面加载完成后初始化dtable对象，参数包含三个，Table的id，功能按钮的名称数组，右键菜单的名称数组。其中第三个参数可为空，当它为空的时候不启用右键菜单功能。
在初始化dtable对象之前你应该定义好相关的事件，否则相应的菜单在触发事件后可能会提醒你相对应的事件未定义。
另外你需要在页面中保持一点简单的结构，当然你也可以按照自己的意愿进行自定义。
下面给一个简单的例子。
- window.onload = function(){
- ocontextMenuItem.context_new.func = function(){
- o//Just do something you like...
- oalert('New Item');
- o}
- ocontextMenuItem.context_edit.func = function(){
- o//Just do something you like...
- oalert('Edit.aspx?Id='+d.currentRow.id);
- o}
- ocontextMenuItem.context_delete.func = function(){
- o//Just do something you like...
- ovar ids = '';
- ofor(var i in d.rowCollection){
- oids += d.rowCollection[i].id + ',';
- o}
- oalert('Delete.aspx?Id='+ids);
- o}
- ofuncBtnsEvent.tool_edit = function(){
- o//Just do something you like...
- oalert('Edit.aspx?Id='+d.rowCollection[0].id);
- o}
- ofuncBtnsEvent.tool_delete = function(){
- o//Just do something you like...
- ovar ids = '';
- ofor(var i in d.rowCollection){
- oids += d.rowCollection[i].id + ',';
- o}
- oalert('Delete.aspx?Id='+ids);
- o}
- otoolBar = ['tool_query','tool_new','tool_edit','tool_copy','tool_delete','tool_refresh','tool_save','tool_return']
- ovar contextMenuItems = ['context_new','context_edit','context_delete'];
- ovar d = new dtable('dtable',toolBar,contextMenuItems);
- }
通过定义的dtable对象d，你可以获取当前选中的所有行对象d.rowCollection，或者是在右键菜单触发时，你可以获取当前右键菜单发生的行d.currentRow，你可以在相应的事件函数内部进行你需要的处理。
由于图片和各种资源文件比较多，这里就不给出Demo了，你可以点击这里下载源代码。欢迎交流。
转载请注明原文出处《Javascript 动态表格 Grid – 实现与使用(2)》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。