qinzhenzhou
- 浏览: 10560 次
- 性别:
- 来自: 珠海
-
最新评论
-
qinzhenzhou：
onload, onerror 是<script> ...
javascript控件开发之动态加载(1) -
nangonglingxue：
这个onload事件跟onerror事件在什么时候用的？？
javascript控件开发之动态加载(1) -
nangonglingxue：
楼主， importObj.onload = importOb ...
javascript控件开发之动态加载(1) -
网易YY：
支持楼主，想跟楼主学习
javascript控件开发之动态加载(1) -
rex0654335：
好牛B 的样子
javascript控件开发之动态加载(2)
文章列表
在网页中，<DIV>本身就有滚动条，在显示文本内容的时候，原始的滚动条已够用，一般如果我们想实现一个类似列表的控件时，也可以把所有的列表数据输出到一个完整的<table>标签，再嵌入到一个DIV中即可，然而如果 ...
在前几篇的基础上，本篇将开发工具栏控件，工具栏控件一般包括三部份，
1、toolBar控件，简单说就是工具栏容器，
2、toolButton控件，即工具栏上的按钮控件，该按钮控件包括图标和文字两部份，
3、则是分隔符控件，一般分隔符控件也是在toolButton控件基础上引申出来的，
为了简单易学，我们这里直接用上一篇的控件作为toolBar控件使用，也就是我们这次编写出来的toolButton控件直按放一Panel控件上，
首先在component\ui\文件夹下添加控件文件，com.ui.toolButton.js 如下，
定义com.ui.toolButton控件类，继承com.ui.p ...
上篇写完了页面控制器，本篇接着写下一个控件--布局控件，布局控件在系统开发中不算最重要，但也是起着举足经重的作用，相信做过网页的应该了解，在Html中页面布局是一件让人蛋痛的事情，有时候花一天都搞不定，因此所有控件开始之前，先把布局控件做好，后续有部份控件需要从这布局控件继承。
在html标签中，有外边距、内边距、还有边框、坐标这几样属性，这几项控制好，布局的大方向基本能做好，再有就是浏览器的兼容问题一并考虑，
首先，我们需要对先前写的com.ui.window.js做修改，把先前的 this.thisWindow改为this.win(前面的变量太长，改短一点)
对渲 ...
本篇，我们主要实现页面控制器，简单说就是用于控制当前html对应的js类,我们将在上一篇的基础上继续增加新的代码，首先，我们在common文件夹下添加pageControllor.js文件，该文件，继承com.baseObject对象,代码比较简单，主要目的是要把页面上的控件对象，移到控制器类中
/**
* 页面控制基类
* 创建：qzz
* 日期: 2014-05-01
*/
(function(undefined) {
pageControllor = Extend(com.baseObject, {
/**
* 初始化函数
* ...
上一篇我们写完了可见窗口的基础控件，本篇我们来实现一个简单的按钮控件，虽然这个控件<input>类似，但是自定义的空间却无限的大，首先我们在component\ui\目录下添加com.ui.button.js文件，定义com.ui.button控件，继承com.ui.window控件，重写create, render, doMouseDown, doMouseUp, _doResize事件，另外给容器thisWindow添加onmouseover,onmouseout两个事件，用于控制按钮的样式，然后把文件添加到staticScript.js列表中。最后为控件添加onClick事 ...
经过上一篇，我们开始了可见控件的实现，考虑控件会用到键盘及鼠标，因此在上一篇控件com.ui.window基础上，我们再添加事件的处理，添加函数_sysEvent及_clearEvent
/**
* 系统事件.
*/
_sysEvent:function(){
...
上一篇写了第一个基础控件，本篇我们开始编写可见控件com.ui.window.js,首先，在component文件夹下面添加ui文件夹，并在ui文件夹下添加com.ui.window.js文件，并添加初始化方法，init、create、render、_doResize方法
window类继承com.baseObject类，
init 重写基类的方法，主要添加dom占位元素，是否由dom创建标志两个参数
并从dom元素对象中获取option属性，合并到类option属性并调用渲染方法，
create 为基类调用的创建方法，用于初始化变量，比如键盘事件，鼠标事件，宽，高等属性
ren ...
此篇开始，我们正式进入了控件开发之旅，首先，一套好用的控件，要有一套实用的继承关系，我这里先列出初步的类关系图，大致如下
com.baseObject
+--com.list
+--com.treeNode
+--com.treeList
+--com.ui.window
+--com.ui.scrollBar
+--com.ui.botton
+--com.ui.calendar
+--com.ui.panel
+--com ...
前面我们写了文件加载，类继承，都比较基础，有了前面的框架， 后边我们还需要一个可见控件的渲染对象，也是我们本章讲的重点，
主要目的是跟据我们在dom元素上的配置，渲染出我们想要的效果，例如我们在div上配置一个code="com.ui.Botton"属性，就跟据指定的com.ui.Botton.js类来绘制我们的按钮，
实现思路是先读取所有的dom元素，查看是否有指定code的元素在，并执dom对应的控件代码。
我们在common下面增加文件render.js
/**
* ui控件渲染
* 参数：dom 占位符
* callBack 回调函 ...
经过上一篇，我们实现了文件的动态加载， 为了能方便编写控件，后续我们将采用类似继承的关系，编写多个js文件，并动态加载到页面上，在此我们编写一个函数，用于虚拟继承，
在目录common下添加extend.js文件， 并定义函数Extend，其中带三个参数，第一个参数，为基类，第二个参数为子类，第三个参数为绑定this状态,为了方便，我们参数做了兼容处理，即可以只有子类childClass的处理,
function Extend(baseClass, childClass, isBind) {
// 兼容jClass({}, true)的情况
if(typ ...
上一篇在init.js文件内编写了加载对象， 在这基础上， 在init.js文件内再定义一个全局变量，及一个起始函数（startup），在body加载完成后执行，
另外要再准备一个可供加载js的文件，在common目录下新增加一个文件，staticScript.js,代码中只有一个数组对象，为了验证加载的情况，我们再添加一个简单的样式com.comStyle.css文件，
文件目录如下
+--demo
+--script
+--common
+--init.js
+--staticScrip ...
做了几年开发， 平时看着会做框架的高手，那个羡慕妒忌恨呀，有闲的时候，总会想，要是自己能做一个框架该多好呀，经过一段时间的积累，有了一点点进步，于是决定亲手开发一个框架，本系列主要做一些初步的框架，希望自己学习，希望也能帮到跟我一样有梦想的人。
所谓框架，就是基于它，能很方便的进行业务开发，减少技术上的时间花费，通过了解那么多框架后， 你是否也有想从0开始，自己开发一个呢！如果有，那就一起来吧，也许会有很大乐趣哦。
此次要做的框架，是前端javascript框架，面向的是，大型应用前端界面，比如数据编辑，数据查询，数据管理等用到的前端控件及功能，有两个主要的目的， 第一， ...