Fixjs实践——滚动条控件

<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t"><span lang="EN-US" style="font-family:'Calibri','sans-serif';font-size: 1pt; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;"><sdtpr></sdtpr><sdt id="89512082" title="文章标题" storeitemid="X_056CFCA8-CBB2-4E66-A4CB-D5DE178E5B6A" text="t" docpart="89512082" xpath="/ns0:BlogPostInfo/ns0:PostTitle"></sdt></span> </sdt>

Fixjs介绍

Fixjs是一款javascript界面基础框架,主要为开发复杂组件提供底层的框架支持。

基于Fixjs构建的滚动条控件

为了能全面验证一下Fixjs的初步成果,基于Fixjs我构建了2个滚动条控件:垂直滚动条VScroller和水平滚动条HScroller

滚动条控件主要包括:按钮、滑块、背景部分,滑块能够进行鼠标拖放,还有,要支持滚动事件的派发,是一款界面技术应用比较综合的控件。

以下是示例的效果图,灰色部分是页面应用Application区域,它设置了属性能够跟随浏览器大小自动调整。

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><img alt="" src="https://img-blog.csdn.net/20130616154233687"><stroke joinstyle="miter"><formulas><f eqn="if lineDrawn pixelLineWidth 0"><f eqn="sum @0 1 0"><f eqn="sum 0 0 @1"><f eqn="prod @2 1 2"><f eqn="prod @3 21600 pixelWidth"><f eqn="prod @3 21600 pixelHeight"><f eqn="sum @0 0 1"><f eqn="prod @6 1 2"><f eqn="prod @7 21600 pixelWidth"><f eqn="sum @8 21600 0"><f eqn="prod @7 21600 pixelHeight"><f eqn="sum @10 21600 0"></f></f></f></f></f></f></f></f></f></f></f></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"><lock aspectratio="t" v:ext="edit"></lock></path></stroke></shapetype>

该示例验证了一下几个重要的Fixjs技术点:

l 绝对定位:控件能够设置xy属性进行精确的布局定位。

l 鼠标拖动:鼠标拖动滚动条的滑块,能够控制滚动值。

l 事件处理:滚动事件的派发,进行滚动后续处理。

l 布局自适应:滚动条控件实现了右边和底边停靠,布局自动适应应用区域大小的改变。

l 容器与子项:滚动条作为显示子项动态添加到应用区域。

l 浏览器兼容:上述的技术点,在不同浏览器下效果保存一致。

效果演示

在线演示地址

使用时的代码编写效果

Fixjs设计的时候,我尽量参考了flash的框架,代码的效果跟as3代码非常接近,这说明经过良好、合理的封装,javascript其实也能够达到高级面向对象语言的使用效果的。

说说JavaScript

从逻辑上讲,javascriptWeb的底层语言。

DartCofficScriptTypeScript等这些技术的出现,可以看出个巨头对web前端技术的未来发展的定位,这些语言的出现其中一个初衷是为了提高web前端开发的生产力,因为javascript语言特性存在不足,而且因为历史原因这些不足比较难得到解决。

TypeScript定位为web大型应用开发,以javascript作为编译结果。Web大型应用其实FlexSilverlight都可以而且能做得更好,只是要依赖于浏览器插件以及“技术政治”等原因未能得到广泛支持。TypeScript等将是它们的代替品,当然,也要看别人买不买账

最近开始使用WebStorm,用它来编写复杂的javascript真的非常方便,这里真心的推荐一下。

相关文章

Fixjs专栏

转载请注明来源:http://blog.csdn.net/hunkcai

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值