• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
 






hlissnake

 
 

Powered by 博客园
博客园 | 首页 | 新随笔 | 联系 | 订阅 订阅 | 管理

2011年6月8日

搭建Javascript框架(六): Tab控件标题左右滑动功能
摘要: 最近自建Javascript库已日渐完善,在基础库的基础上,增加很多自制UI控件,除了之前展示的Grid,最近还完成了Tab,Accordion,Tree,DropDrag,DigitalNumber,以及矢量数字时钟等控件,本来想以文章的形式给大家分享这些控件代码,但是每个控件代码量都在200行以上,看来放上来是个不切合实际的事情。今天主要想给大家分享的仅仅是Tab控件中的一个功能:如何实现可活动标题。这个功能的大致需求是,当Tab标题栏中 Tab页总宽度大于标题栏实际可见宽度后,超出的Tab页会被覆盖在标题栏的内层,同时两侧各增加一个半透明的Button,点击可使标题栏内部左右滑动。Ta. 阅读全文
posted @ 2011-06-08 00:40 hlissnake 阅读(4785) 评论(0) 推荐(1)
 

2011年5月19日

搭建Javascript框架(五):setTimeout、setIterval 计时器函数扩展
摘要: setTimeout setIterval,这两个计时器函数对于Javascript程序员来说肯定不陌生,它们是实现一些动态效果和数据交互的重要工具,但是原生函数不能传参,而且作用域统统指向window,这里可以对其进行一个简单的封装,先是setTimeout 函数相关扩展:defer : function(time, scope){ var slice = Array.prototype.slice, method = this, args = slice.call(arguments, 2); if(typeof time !== 'number' || time < 阅读全文
posted @ 2011-05-19 23:31 hlissnake 阅读(517) 评论(0) 推荐(0)
 

2011年5月15日

搭建Javascript框架(四): 实现简单UI组件-使用观察者事件模式构建Grid表格
摘要: 组件是一个可复用的类,UI组件应该把开发人员从组织HTML+CSS中解放出来,让他们只关注驱动UI显示的数据,以及各种业务逻辑,事件驱动等,之前的自建JS类库已经有了基本对象扩展、类扩展、以及最核心的功能:事件监听管理,今天我就来使用这些自建的JS方法来构建一个简单并且可扩展的Grid组件! 先说说Ext Grid吧,其功能极其强大,有着让人惊艳的UI显示和强大的交互功能,这里要制作的Grid组件当然不会要和Ext比较,况且涉及的知识点也会非常多难度也很大。我只是采用Ext GridView源码中的一种事件代理机制来设计自己的组件,再详细阐述事件代理机制前,我们先搭建Grid组件的基本类结构. 阅读全文
posted @ 2011-05-15 02:00 hlissnake 阅读(652) 评论(0) 推荐(1)
 

2011年5月8日

搭建Javascript框架(三): Javascript对象继承机制
摘要: 一个Javascript框架,没有一个设计合理的面向对象继承机制可是不行的哦,让我们先看看JS那独特的OOP方式!如今面向对象的JS继承机制五花八门。各大框架都有自己独特的设计方案,但最基本的原理都大致属于原型继承机制。让我们来看段代码:Class = function(){ this.name = 'classname'; this.result = 'nam';};Class.prototype = { init : function(){}, setName : function(){}, getResult : function(){}}; 以上定义一个 阅读全文
posted @ 2011-05-08 23:05 hlissnake 阅读(404) 评论(0) 推荐(0)
 

2011年5月5日

搭建Javascript框架(二):实现Javascript对象扩展,作用域代理
摘要: 各大JS框架库都有一套基于JS原型对象的扩展,很多扩展方法能提高方便的用途,最普通的就是封装作用域这类方法了:下面来看几个例子,都是模仿Extjs和Prototype的源码HL.append = function(destination, source){ for(var o in source){ destination[o] = source[o]; } return destination;};HL.append(Function.prototype, { //改变当前函数的作用域以及参数 delegate : function(scope){ var method = this, a. 阅读全文
posted @ 2011-05-05 00:01 hlissnake 阅读(555) 评论(0) 推荐(0)
 

2011年5月2日

Extjs高级应用(一):实现GridPanel的单元格多选模组
摘要: 之前在项目中突然遇见一个很奇怪的需求,要求单元格能和Excel一样进行多选,比如框选其中一个矩形区域,然后复制到同页面另一个Grid中!!并添加统计报表功能。当时这个需求就把我们都怔住了!很变态很强悍的需求,因为这个模块是一个基于报表的统计功能,使用了一个第三方的报表工具,但是页面展示非常难看。。。。。客户就对我们说,为什么不用Ext来制作报表呢。呵呵最后当时是被我们回绝了,因为这确实是对我们团队来说难度太大,而且成本太高。具备统计功能的Ext Grid再加上可编辑等等,就几乎是一个网页版的Excel了,我们不认为我们团队能和Google Doc叫板....... 但是事后我看了看 Cell. 阅读全文
posted @ 2011-05-02 23:36 hlissnake 阅读(4838) 评论(4) 推荐(2)
 
搭建Javascript类库(一):观察者/DOM事件管理器,改良版(新功能:监听函数只触发一次)
摘要: 从去年起项目中开始使用Extjs,在熟悉Ext API以及各组件的用法之余也抽空看了Ext源码,但40000多行的代码在时间和理解上都有很大困难,所以就专门了解了其中某些部分的代码。尤其针对Ext.Observble接口源代码进行了反复阅读,对Ext关于事件处理机制上有了一些初步的了解。结合之前刚刚阅读的道格拉斯先生所著的《JavaScript:The Good Parts》中关于接口继承的函数化方式,自己尝试的写了一套简单的Javascript事件处理管理器。当然在正常的开发过程中还是建议使用成熟JS框架,这里所讨论的内容仅仅是加强大家对JS事件机制的理解以及观察者模式的应用。OK 上代码. 阅读全文
posted @ 2011-05-02 00:33 hlissnake 阅读(1307) 评论(4) 推荐(2)