随笔分类 -  JavaScript组件开发

开发JavaScript组件（完整示例）
摘要：使用JavaScript，按照面向对象的思想来构建组件。 现以构建一个TAB组件为例。 从功能上讲，组件包括可视部分和逻辑控制部分；从代码结构上讲，组件包括代码部分和资源部分（样式、图片等）。 组件的特点：高内聚，低耦合（不与其他代码逻辑交叉，可以继承，包含）；封装性（隐藏私有方法和变量）；可重用性 阅读全文
posted @ 2015-01-15 20:07 hongweigg 阅读(13) 评论(0) 推荐(0)
EXTJS 组件开发（完整例子）
摘要：目标：EXTJS组件开发，从component基础实现一个TAB控件。 使用EXTJS版本为5.0。测试通过。 这个例子还很初级，仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。 <html> <head> <meta http-equiv="Content-Type" content= 阅读全文
posted @ 2015-01-15 17:30 hongweigg 阅读(18) 评论(0) 推荐(0)
JavaScript函数同名覆盖问题
摘要：在JavaScript脚本中，局部函数与外围函数同名，则会覆盖掉外网函数，即变量可以重复定义。 见下面的例子。 A = function(){ var me = this; me.method1 = function(){ var items = [1,2,3,4,5]; for(var i=0;i 阅读全文
posted @ 2014-12-08 16:27 hongweigg 阅读(36) 评论(0) 推荐(0)
三层DIV定位
摘要：CSS的position有三种属性:static, relative, absolute，如果DIV套DIV，达到多层，这些层间的定位关系又是怎样的呢？ 1、只要父容器的postion属性不为static，组件就会以父容器作为定位基准，否则找上一级可定位的容器作为基准。 2、上一级定位容器的rela 阅读全文
posted @ 2014-09-12 15:42 hongweigg 阅读(16) 评论(0) 推荐(0)
两层容器的position 之间的关系
摘要：在HTML的CSS种，容器如DIV有三种position属性：static, relative,absolute。其中static为默认属性，relative意为相对父容器定位，absolute意为相对可定位的上层容器进行定位，这个上层容器不一定是父容器，若找不到可定位的上层容器，则会以docume 阅读全文
posted @ 2014-09-12 15:24 hongweigg 阅读(17) 评论(0) 推荐(0)
ul li 制作横向菜单
摘要：关键的CSS设置： float:left; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>配置</title> <style> .wlsc-menu-active{ 阅读全文
posted @ 2014-01-18 18:41 hongweigg 阅读(120) 评论(0) 推荐(0)
css优先级别
摘要：CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。 CSS优先级的计算规则如下： * 页面中定义的样式,加1,0,0,0 * 每个ID选择符(如 #id),加0,1,0,0 * 每个Class选择符( 阅读全文
posted @ 2011-12-01 17:56 hongweigg 阅读(15) 评论(0) 推荐(0)
Javascript 中 Array和Object的关系
摘要：Javascript中， Array 也是Object, 但有的人可能会误认为，形如a['key'] 的访问是Array的功能，其实不是。 如下例中，Array 赋值后，其length属性仍然为0,因为数据并没有被放到数组的位置中，而是被放到了Array的原形对象Object中。 var a = n 阅读全文
posted @ 2011-11-07 21:49 hongweigg 阅读(19) 评论(0) 推荐(0)
javascript 遍历页面中所有的元素
摘要：javascript 遍历页面中所有的元素，获取每个元素的节点类型，全局索引号 var nodes = document.all; for(var i=0;i<nodes.length;i++){ var o = nodes[i]; alert(o.tagName + ',' + o.nodeTyp 阅读全文
posted @ 2011-09-30 17:36 hongweigg 阅读(35) 评论(0) 推荐(0)
javascript prototype 实现类似OOP继承
摘要：这里要说明的是，公有属性（使用this.修饰符）可以被覆盖，私有属性(使用var 修饰符)不能被覆盖 子类不能访问父类的私有属性，父类的方法正常访问父类的私有变量。 function Vegetable(){ this.taste='delicious'; var a = 'I\'m Vegetab 阅读全文
posted @ 2011-09-29 17:59 hongweigg 阅读(3) 评论(0) 推荐(0)
javascript 使用prototype 实现OOP继承
摘要：使用prototype特性，可以很方便的在子类中继承父类的方法和属性。 下例中Vegetable视为父类，Celery视为子类。 Vegetable 拥有属性taste, 方法fun1 Celery 拥有属性 color, 方法fun2，如果再定义与Vegetable 中同名的属性或方法，则会覆盖父 阅读全文
posted @ 2011-09-29 11:49 hongweigg 阅读(12) 评论(0) 推荐(0)
javascript prototype
摘要：prototype 可以定义一个对象或称类的方法和属性，下面的例子实现了类似的面向对象编程的方法和属性的设置 function Test1(){ alert('test1 init'); this.p = 'Test1\' property-p'; } Test1.prototype.f = fun 阅读全文
posted @ 2011-09-28 17:02 hongweigg 阅读(6) 评论(0) 推荐(0)
javascript caller
摘要：返回函数的调用者 function test1(){ if(test1.caller == test2){ alert('test2 call me!'); }else if(test1.caller == test3){ alert('test3 call me!'); }else{ alert( 阅读全文
posted @ 2011-09-28 16:41 hongweigg 阅读(5) 评论(0) 推荐(0)
js的call方法 apply方法 caller属性 callee属性
摘要：js的call方法_apply方法_caller属性_callee属性 原文地址：http://aweber.blogbus.com/logs/46751586.html 一、call 方法 调用一个对象的一个方法，以另一个对象替换当前对象(其实就是更改对象的内部指针，即改变对象的this指向的内容 阅读全文
posted @ 2011-09-28 16:14 hongweigg 阅读(11) 评论(0) 推荐(0)
javascript call callee
摘要：call 能实现类似的面向对象继承： function Person(){ this.a = 'person'; this.b = function(){ alert('I\'m a person!'); } this.c = 'Person\' c property'; this.d = func 阅读全文
posted @ 2011-09-28 15:57 hongweigg 阅读(9) 评论(0) 推荐(0)
javascript apply
摘要：apply 方法很强大，可以用来实现类似面向对象编程的特性。 实现继承： function Person(){ this.a = 'person'; this.b = function(){ alert('I\'m a person!'); } } function Student(){ Perso 阅读全文
posted @ 2011-09-28 15:07 hongweigg 阅读(7) 评论(0) 推荐(0)
一个TIP信息提示框的实现
摘要：一个TIP信息提示框的实现 <style> #mopTip01 .leftTop{ font-size:3px;height:20px;width:20px; background-repeat:no-repeat; filter:progid:DXImageTransform.Microsoft. 阅读全文
posted @ 2011-09-27 18:20 hongweigg 阅读(6) 评论(0) 推荐(0)
Web开发中的Drag and Drop
摘要：这几天做了一些drag&drop操作方面的工作，在这里把一些注意事项记录下来，算是给自己备个忘，也给需要做类似工作的人留个树阴。这里要讨论的drag&drop是指使用IE提供的内置机制，而不是使用鼠标模拟的那种"假"drag&drop，比如移动一个div或span的效果那种。 要实现和控制drag& 阅读全文
posted @ 2011-09-20 18:23 hongweigg 阅读(11) 评论(0) 推荐(0)