控件开发篇
文章平均质量分 91
yangdengfeng2003
这个作者很懒,什么都没留下…
展开
-
使用Popup窗口创建无限级Web页菜单(1)
在Web上使用菜单可以极大地节约页面的空间,同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中,我们普遍使用div嵌套table的方式来实现菜单,这样的菜单有个最致命的问题就是会被覆盖。我们为了解决这个问题,有时我们干脆在显示图层菜单的同时隐藏页面上的所有下拉列表框,在菜单消失的时候,再显示他们。这个方法虽然可以解决问题,而其优化过后还可以只隐藏和下拉原创 2007-05-05 18:53:00 · 366 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(8)
作为一个TreeView控件,显示、操作、动态加载都完成了,接下来最重要的就是怎么和用户代码结合了。事件是一种控件结合用户交互较好的方式,接下来就介绍一下在这个TreeView控件中的事件处理模型及实现。 我们应该承认,C#的+=和-=方式的事件attach和dettach方式是非常清晰易用的。不过由于JavaScript不支持运算符重载,要实现这样的调用方式非常的困难,因为只有基本原创 2007-05-05 19:05:00 · 674 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(7)
上一次说了一下要支持无限级的动态加载TreeView控件,服务器端数据的准备情况。不过那只是一个小小的演示实例,在实际的使用中,服务器端的数据可能会完全的不同,不过不管怎么变化,也必须要保证能形成树形数据的request/response结构。 由于TreeView必须在加载了节点信息有才能被Show出来,所以这里我们先手动把root level的节点生成。代码示例如下:scr原创 2007-05-05 19:04:00 · 659 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(6)
既然是动态的载入数据的TreeView,那么服务器端的数据也同时应该以一种树型结构来保存。通过客户端发送节点标识,返回该节点下的子节点数据从而动态生成子节点。下面是一个模拟文件夹数据存放结构的服务器端数据获取示例。 我们设计这样一张数据库表来存放文件夹数据结构: CREATE TABLE [T_202_118_224_132] ( [DirIndex] [int] NOT原创 2007-05-05 19:03:00 · 611 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(5)
今天讨论一下TreeView控件的交互问题。包括鼠标对TreeNode的选取(单选&多选)、Checked;键盘对TreeNode的选取(单选&多选)、Checked;通过代码和控件交互三种方式。最后提供一个现阶段完成版本的演示示例供大家测试。 使用封装好的代码来操作TreeView的UI,是我们上次主要讲述的内容。要实现交互,最重要的就是管理键盘和鼠标的事件。我原来讲过,关于Tre原创 2007-05-05 19:03:00 · 578 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(4)
前三天我们把TreeView给显示出来了,不过光是显示显然是不够的。TreeView的UI还需要根据用户的各种操作和不同的属性设置产生不同的效果变化,比如:Actived、Selected、Checked等。下面就来设计并实现TreeView的UI动态更新问题。 对于控件开发,不管是Web上的还是WinForm上,使用鼠标和键盘来触发的UI更新和使用程序代码来触发更新是同等地位的。所原创 2007-05-05 19:02:00 · 556 阅读 · 0 评论 -
j动态载入数据的无刷新TreeView控件(3)
今天完成了对菜单输出部分的重构实现,就是怎么样把我们的JS类变成能看到的实实在在的树。这个步骤虽然不是很难,不过很多细微的东西还是值得注意的。具体输出HTML代码的结构可以参看(1)中的图示,而我们的重点是讲讲为TreeView显示正确的层次结构图标。 由于我开始说了,希望树的UI逻辑有比较高的内聚性,所以使用了一个可以递归的UI层次结构。我们使用一个TABLE元素来作为树的一个Le原创 2007-05-05 19:01:00 · 537 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(2)
昨天说了一下TreeView控件的数据结构和UI表现的设计。为了让一个TreeView控件有更好的实用性,对它的功能和外观作一些必要的定制是非常有用的,今天就来说一下关于定制这个TreeView相关的一些设计。因为这些东西在一开始编码后就会马上被使用到,先确定好能省不少事。 目前设计了3个辅助TreeView的类,它们分别是:原创 2007-05-05 19:00:00 · 605 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(1)
上次我介绍过,使用popup窗口来制作无限级菜单。由于当时对于JavaScript的了解比较有限,加之又把主要的精力都focus到popup窗口本身的一些问题上去了,所以关于菜单的设计中还是有很多不合理的地方。后来因为需要又作了一个TreeView控件,不过由于需求变化大,被改得来结构相当的乱了,于是抽空重构一下,并把一些设计步骤记录下来,欢迎大家讨论并提意见。 虽然使用脚本制作的T原创 2007-05-05 19:00:00 · 660 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(8)
最后总结一下示例中的一些小问题,没有什么太重要的东西,主要都是为了UI上更好看些。 显示特效的支持,使用style的filter来实现的,代码:Menu.prototype.FadeinEffect = function(effect)#region Menu.prototype.FadeinEffect = function(effect) Menu.prototyp原创 2007-05-05 18:58:00 · 451 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(7)
这一节主要说一下Menu对键盘的支持,本来不支持键盘这个菜单也完全可用了,不过还是为了和WinForm的Menu统一,所以支持了和WinForm菜单一样的操作方式。 菜单的处理函数Menu.prototype.Keydown是在AttachEvents()方法里通过: doc.attachEvent(onkeydown, this.Keydown); 来attac原创 2007-05-05 18:57:00 · 386 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(6)
在使用...(5)中用Show()把菜单显示出来了,Show中的大部分大代码都很好理解,这节主要说一下event的处理,在Show的末尾我们使用了一个AttachEvents()方法来attach鼠标和键盘的事件,该方法的代码如下: Menu.prototype.AttachEvents = function(menuHtml) { var menuObj = __Menu原创 2007-05-05 18:56:00 · 459 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(5)
代码框架在(4)里面已经全部列出来了,现在工作就是按流程把他们完成。本来实现一个prototype的Menu菜单类只需要最多300行代码,可是后来做了一些操作习惯支持和UI显示上的优化后,代码猛增到了1000多行。不过final版本看起来确实比土不拉叽的prototype强很多哦。 为了比较直观的说明代码的作用,我就从菜单的显示开始说。要显示一个菜单显必须构建一个菜单的实例,实例构原创 2007-05-05 18:56:00 · 401 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(4)
前面的(1),(2),(3)解决了popup创建Menu的主要技术问题后,现在开始具体的编码心里就有底多了,而且可以把精力集中在逻辑的处理上。当然还有一些UI的问题需要考虑,但都是HTML+CSS的小问题了。 菜单的数据结构其实就是树,由于Menu及MenuItem有很多的自身属性,我们使用面向对象的方式来实现这个菜单。关于JavaScript面向对象的编成不是我讨论的主题,可以参原创 2007-05-05 18:55:00 · 412 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(3)
菜单除了要它能显示,还要它能执行动作才是最关键的地方。popup是个子窗口,虽然他没有opener。我们有两种办法来在popup中执行脚本,一是把script代码写到其document中,让它运行,比如: var win = window; var doc = win.document; var popup = win.createPopup();原创 2007-05-05 18:54:00 · 421 阅读 · 0 评论 -
使用Popup窗口创建无限级Web页菜单(2)
上次我说到要使用popup在web中创建无限级菜单,两个要解决的问题是多个popup窗口共存和popup中的事件的处理。其中多个popup共存的问题我已经讲了可以使用popup.document的parentWindow来再createPopup,这个就算搞定了,而第二个问题就有些让人讨厌了,为什么呢? 我们通过createPopup创建的popup对象包含了一个document属原创 2007-05-05 18:53:00 · 450 阅读 · 0 评论 -
动态载入数据的无刷新TreeView控件(9)
在上次把TreeView的事件支持实现后,整个TreeView的主体也就完成了。但是由于在UI元素的管理上,使用了Script类对象和DOM对象间的环状链表引用,所以还必须在页面退出时作一些清理工作,也就是为每个类都实现一个Dispose方法。 我们的TreeView一共使用了3个类,Tree、TreeNodeBase和TreeNode。Script类对象和DOM对象间的环状链表引用是原创 2007-05-05 19:06:00 · 711 阅读 · 0 评论