`
qinzhenzhou
  • 浏览: 10524 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

javascript控件开发之可见控件(1)

阅读更多
   上一篇写了第一个基础控件,本篇我们开始编写可见控件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 为基类调用的创建方法,用于初始化变量,比如键盘事件,鼠标事件,宽,高等属性
render 为跟据属性,渲染或重构dom元素
afterRender为渲染后函数,
_doResize 则为跟据宽,高等属性,设置dom元素的位置或宽高等,
因为dom元素多需要添加样式,这里写了针对样式控制的方法,setStyle, addStyle, clearStyle, delStyle,另外,dom元素都有margin, padding, border等属性,为了续方便,添加了简易的读取边距函数,
这里我们有些函数用到了下划线开头,我们这里定义这种函数为私有函数,
详细代码如下,
/**
 * 可见窗口基类.
 * 创建: QZZ
 * 日期: 2014-04-06
 */
(function(undefined) {	
	nameSpace("com.ui");
	
	com.ui.window = Extend(com.baseObject, {
            /**
		 * 初始化函数.
		 * @param option 属性
		 * @param control DOM元素
		 * @param isDom 是否dom元素, 如果是在html页面上布局,
		 *                            则option已自动解析,
		 */
	    init:function(option, control, isDom) {		    
		    this.base(option);	
		    if(typeof control != "undefined") {
			    //获取dom元素
		    	this.thisWindow = control;
		    	if(!isDom) {
				    //读取属性
		    		var op = control.attributes.option;
					if(typeof op != "undefined") {
						op = eval("(" + op.nodeValue + ")");
					}
					if(typeof op != "undefined") {
						for(var key in op) {
							this.option[key] = op[key];
						}
					}
		    	}
				this.name = control.id || control.name;
		    }
		    this.logInfo("window.init");
		    this.render();
		    this.afterRender();
	    },
		/**
	     * 对象创建函数.
	     */
	    create:function() {
		    this.base();
		    this.className = "com.ui.window";
		    this.logInfo("window.create");
		    this.eventList = {};
		    this.keyBoard = {
		        DOWN:40,
		        UP:38,
		        LEFT:37,
		        RIGHT:39,
		        ENTER:13,
				C:10,
				V:86,
				X:88,
				Z:90
		    };
			this.mouseType = {mtLeft : "L",
		                      mtRight: "R"};
		    this.parent;
			//处理宽高,顶点,左边
			this.option.top = this._domValue(this.option.top, 0);
		    this.option.left = this._domValue(this.option.left, 0);
			//绝对顶、左点
			this._atop = null;
		    this._aleft = null;
			//宽高
			this.option.width = this._domValue(this.option.width, 10);
		    this.option.height = this._domValue(this.option.height, 10);
			//内外边距
			this.option.margin = this._domValue(this.option.margin,0);
			this.option.padding = this._domValue(this.option.padding,0);	
            this.option.border = this.option.border||"";
		    this.focus = false;
		    //面板选择
		    this.hasSelect = false;
			this._eventList = {};
		    this.body = null;
	    },
		/**
	     * 渲染函数.
	     */
	    render:function() {
	    	this.logInfo("window.render");
	    	if(typeof this.thisWindow == "undefined") {    	
	    	    this.thisWindow = this.createElement("div");
	    	}	    	    
	    	this.setStyle(this.thisWindow, "winStyle");
			//处理大小变量
	    	if(this._hasResize()) {
	    	    this._doResize();
	    	}
	    },
		/**
	     * 渲染后执行.
	     */
	    afterRender:function(){
	    	var _this = this;
	    	this.thisWindow.onmouseup = function() {
	        	_this.hasSelect = true;
	        };
	        //系统事件
	        this._sysEvent();
	    },
		/**
	     * 执行变化调整事件.
	     * @return 返回状态
	     */
	    _doResize:function() {	    	
	    	if(!this._update) return false;
	    	this.logBegin("_doResize");
	    	//边距处理
	    	if(this.thisWindow.style.margin != this.option.margin + "px") {
	    		this.thisWindow.style.margin = this.option.margin + "px";
	    	}
	    	if(this.thisWindow.style.padding != this.option.padding + "px") {
	    		this.thisWindow.style.padding = this.option.padding + "px";
	    	}
			if(this.option.border !== "") {
	    		this.thisWindow.style.border = this.option.border;
	    	}
	    	//计算长宽
	    	var bw = this._getRectWidth();
	    	var bh = this._getRectHeight();
	    	if(bw <= 0) {
	    		bw = 1;
	        }
	    	bw += "px";
	    	if(bh <= 0) {
	    		 bh = 1;
	    	}
	    	bh += "px"
	    	var isResize = false;
	    	var msg = "";
	    	//处理大小
	    	if(this.thisWindow.style.width != bw) {
	    		msg += this.getName() + " width:" + this.thisWindow.style.width + " to " + bw + " ";
	    	    this.thisWindow.style.width = bw;
	    	    isResize = true;
	    	}
	    	if(this.thisWindow.style.height != bh) {
	    		msg += this.getName() + " height:" + this.thisWindow.style.height + " to " + bh + " ";
	    	    this.thisWindow.style.height = bh;
	    	    isResize = true;
	    	}	    	
	    	this.logEnd("_doResize " + msg);
	    	return isResize;
	    },
	    /**
	     * 样式设置.
	     * @param tab 元素
	     * @param className 样式名
	     * @param doCss 设计样式
	     */
	    setStyle:function(tab, className, doCss){
	    	doCss = doCss || true;
	    	if(className instanceof Array) {
	    		//在元素上设置格式数组对象
	    		tab.cssAry = className;
	    		var cn = className.join(" ");
	    		if(tab.className != cn && doCss) {
	    			tab.className = cn;
	    		}
	    	} else {
	    		//直接设置样式
		    	if (tab.className != className) {
		    		if(doCss) {
		                tab.className = className;
		            }	            
		            tab.cssAry = [className];
		        }
	    	}
	    },
	    /**
	     * 添加样式.
	     * @param tab 元素
	     * @param className 样式名
	     * @param doCss 处理样式
	     */
	    addStyle:function(tab, className, doCss) {
	    	doCss = doCss || true;
	    	if(typeof tab.cssAry != "undefined") {
	    		//检查重复
	    		var i = 0, len = tab.cssAry.length
	    		for(; i < len; i++) {
	    			if(tab.cssAry[i] == className) {
	    				break;
	    			}
	    		}
	    		//添加样式
	    		if(i >= len) {
	    			tab.cssAry.push(className);
	    		}
	    	} else {
	    		tab.cssAry = [className];
	    	}
	    	if(doCss) {
	    		//设计样式到dom
	    		var ncs = tab.cssAry.join(" ");
	    		if(ncs !== tab.className) {
	    	        tab.className = ncs;
	    		}
	    	}
	    },
	    /**
	     * 清除样式.
	     * @param tab 元素
	     * @param doCss 执行样式.
	     */
	    clearStyle:function(tab, doCss) {
	    	if(typeof tab.cssAry != "undefined") {
	    		tab.cssAry = [];
	    	}
	    	doCss = doCss || true;
	    	if(doCss && tab.className !== "") {
	    	    tab.className = "";
	    	}
	    },
	    /**
	     * 删除样式.
	     * @param tab 元素
	     * @param className 样式名
	     * @param doCss 处理样式
	     */
	    delStyle:function(tab, className, doCss) {
	    	if(typeof tab.cssAry != "undefined") {
	    		//查找需要删除的样式名
	    		var i = 0, len = tab.cssAry.length;
	    		for(; i < len; i++) {
	    			if(tab.cssAry[i] == className) {
	    				break;
	    			}
	    		}
	    		if(i < len) {
	    			tab.cssAry.splice(i, 1);
	    		}
	    	}
	    	doCss = doCss || true;
	    	if(doCss) {
	    		var ncs = tab.cssAry.join(" ");
	    		if(ncs !== tab.className) {
	    	        tab.className = ncs;
	    		}
	    	}
	    },
		/**
		 * 解析dom元素的值.
		 * @param value 值
		 */
		_domValue:function(value, defValue) {
		    var vt = typeof value;
			var defValue = defValue || 0;
		    if(vt == "string") {
	    		value = value.replace(/px/, "");
	    		if(this.isNotEmpty(value) && !isNaN(value)) {
	    			value = parseInt(value, 10);
	    		} else {
				    value = defValue;
				}
	    	} else if(vt != "number") {
			    value = defValue;
			}
			return value;			
		},
		/**
	     * 大小是否发生变化.
	     */
	    _hasResize:function() {
	    	return !(this.thisWindow.style.top == this.option.top + "px" 
	    	         && this.thisWindow.style.left == this.option.left + "px"
	    	             && this.thisWindow.style.width == this._getRectWidth() + "px"
	    	                 && this.thisWindow.style.height == this._getRectHeight() + "px");
	    },
		/**
	     * 获取内宽.
	     * @return 返回宽度
	     */
	    _getRectWidth:function() {
	    	return this.getWidth() - (this._getBorderLeft() 
 	       + this._getBorderRight() 
	       + this._getMarginLeft()
	       + this._getMarginRight()
	       + this._getPaddingLeft()
	       + this._getPaddingRight());
	    },
	    /**
	     * 获取内高.
	     * @return 返回高度
	     */
	    _getRectHeight:function() {
	    	return this.getHeight() - (this._getBorderTop() 
 	       + this._getBorderBottom()
	       + this._getMarginTop() 
	       + this._getMarginBottom()
	       + this._getPaddingTop() 
	       + this._getPaddingBottom());
	    },
		/**
	     * 获取边左线.
	     * @param el 元素
	     * @return 返回宽度
	     */
	    _getBorderLeft:function(el) {
	    	var el = el || this.thisWindow;
	    	return this._domValue(el.style.borderLeftWidth, 0);;
	    },
	    /**
	     * 获取右边线
	     * @param el 元素
	     * @return 返回宽度
	     */
	    _getBorderRight:function(el) {
	    	var el = el || this.thisWindow;
	    	return this._domValue(el.style.borderRightWidth, 0);
	    },
		/**
		 * 获取上边线
		 * @param el 元素
		 * @return 返回宽度
		 */
	    _getBorderTop:function(el) {
	    	var el = el || this.thisWindow;
	    	return this._domValue(el.style.borderTopWidth, 0);
	    },
	    /**
	     * 获取下边线
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getBorderBottom:function(el) {
	    	var el = el || this.thisWindow;
	    	return this._domValue(el.style.borderBottomWidth, 0);
	    },
	    /**
	     * 获取左外边距
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getMarginLeft:function(el) {
	    	var el = el || this.thisWindow;	 
            return this._domValue(el.style.marginLeft, 0);
	    },
	    /**
	     * 获取右外边距
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getMarginRight:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.marginRight, 0);
	    },
	    /**
	     * 获取上外边距
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getMarginTop:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.marginTop, 0);
	    },
	    /**
	     * 获取下外边距
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getMarginBottom:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.marginBottom, 0);
	    },
	    /**
	     * 获取左内边距.
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getPaddingLeft:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.paddingLeft, 0);
	    },
	    /**
	     * 获取右内边距.
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getPaddingRight:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.paddingRight, 0);
	    },
	    /**
	     * 获取上内边距.
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getPaddingTop:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.paddingTop, 0);
	    },
	    /**
	     * 获取下内边距.
	     * @param el 元素
		 * @return 返回宽度
	     */
	    _getPaddingBottom:function(el) {
	    	var el = el || this.thisWindow;
            return this._domValue(el.style.paddingBottom, 0);
	    },
		/**
	     * 获取body元素宽度.
	     * @return body宽度
	     */
	    _getBodyWidth:function() {
	    	if(this.browser.safari) {
	    		return document.documentElement.clientWidth;
	    	} else {
	    		return this.body().width();
	    	}
	    },
	    /**
	     * 获取body元素高度.
	     * @return body高度
	     */
	    _getBodyHeight:function() {
	    	if(this.browser.safari) {
	    		return document.documentElement.clientHeight;
	    	} else {
	    		return this.body().height();
	    	}
	    },
		/**
		 * 返回当前窗口.
		 */
	    getRectDom:function() {
	    	return this.thisWindow;
	    },
		/**
		 * 返回窗口body.
		 */
	    body:function(){
	    	if(typeof this.winBody == "undefined") {
	    		this.winBody = document.getElementsByTagName("body")[0];
	    	}
	    	return this.winBody;
	    },
	    /**
	     * 获取高度.
	     * @return 返回高度
	     */
	    getHeight:function() {
	    	return this.option.height;
	    },	
	    /**
	     * 设置高度.
	     * @param height 高度
	     * @param doRs 执行变更函数
	     */
	    setHeight:function(height, doRs) {
	    	this.option.height = height;
	    	//this.logInfo("Window.setHeight");
	    	doRs = doRs || true;
	    	if(doRs && this._hasResize()) {
	    	    this._doResize();
	    	}
	    },
	    /**
	     * 获取宽度
	     * @return 返回宽度
	     */
	    getWidth:function() {
	    	return this.option.width;
	    },	  
	    /**
	     * 设置宽度.
	     * @param width 宽度
	     * @param doRs 执行变更函数
	     */
	    setWidth:function(width, doRs){
	    	this.option.width = width;
	    	//this.logInfo("Window.setWidth");
	    	doRs = doRs || true;
	    	if(doRs && this._hasResize()) {
	    	    this._doResize();
	    	}
	    },
	    /**
	     * 设置顶点.
	     * @param top 顶点
	     * @param doRs 执行变更函数
	     */
	    setTop:function(top, doRs) {
	    	this.option.top = top;
	    	this.logInfo("Window.setTop");
	    	doRs = doRs || true;
	    	if(doRs && this._hasResize()) {
	    	    this._doResize();
	    	}
	    },
	    /**
	     * 获取当前顶点位置
	     * @return 顶点坐标
	     */
	    getTop:function() {
	    	return this.option.top;
	    },
	    /**
	     * 设置左边位置.
	     * @param left 左边位置
	     * @param doRs 执行变更函数
	     */
	    setLeft:function(left, doRs) {
	    	this.option.left = left;
	    	this.logInfo("Window.setLeft");
	    	doRs = doRs || true;
	    	if(doRs && this._hasResize()) {
	    	    this._doResize();
	    	}
	    },
	    /**
	     * 获取左边位置值.
	     * @return 返回
	     */
	    getLeft:function() {
	    	return this.option.left;
	    }
    });
})();

有了上面的类,我们便可以在test.html文件中添加我们的自定义控件,如下<div>便是我们新增加的dom元素,这里我们把id设置为test, code为com.ui.window类,option中称添加height,width属性
<!DOCTYPE html>
  <head><title>test</title>
    <script src="../script/common/init.js" type="text/javascript"></script>
  </head>  
  <body>
    <div id='test1' code='com.ui.window' option='{"height":"100","width":"100"}'></div>
  </body>
</html>

同时,我们在样式文件com.comStyle.css中,添加一个样式,如下
注意,如果option没有设置对应的height,width的时候,将会以样式的宽高为准
.winStyle {
    border:1px solid #C3D2E6;
    font-size:12px;
    width:10px;
    height:10px;
}

这样,我们就可以通过浏览器打开test.html文件查看效果,会发现一个100px的蓝边正方形,

可下载附件的代码

  • 5.rar (10.1 KB)
  • 下载次数: 12
分享到:
评论

相关推荐

    javascript控件开发之可见控件 1

    在JavaScript控件开发中,"可见控件"是构建用户界面UI的重要组成部分。这些控件是用户与应用程序交互的桥梁,比如按钮、文本框、下拉列表等。本篇文章将聚焦于可见控件的渲染基类,这是创建自定义、高级控件的基础。...

    javascript控件开发之可见控件(2)

    在“javascript控件开发之可见控件(2)”这个主题中,我们将深入探讨如何在JavaScript中构建可控制其可见性的控件,并且在上一篇的基础上,通过添加事件相关函数来增强控件的灵活性和可扩展性。 首先,我们需要理解...

    javascript控件开发之继承关系

    在这个主题中,“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构,以及如何通过继承来实现代码的复用和模块化。 在JavaScript中,继承是基于原型...

    javascript控件开发之控件初体验

    JavaScript控件开发是Web应用程序中不可或缺的一部分,它允许开发者创建具有特定功能和交互性的用户界面元素。本篇文章将深入探讨JavaScript控件开发的基础知识,帮助初学者了解如何创建自己的控件,并提供一个实际...

    javascript控件开发之布局控件

    JavaScript控件开发是Web开发中的重要一环,特别是在构建交互丰富的网页应用时。布局控件是其中的关键元素,它允许开发者有效地组织和管理页面上的元素,实现多控件的协调和共存。在这个主题中,我们将深入探讨...

    javascript控件开发之动态加载

    JavaScript控件开发是一种常见的Web应用开发技术,它允许开发者创建交互性强、功能丰富的用户界面元素。动态加载作为JavaScript控件开发中的一个重要概念,是提升网页性能和用户体验的关键手段。动态加载意味着控件...

    javascript控件开发之工具栏控件

    在JavaScript控件开发中,工具栏控件是一个关键的元素,它通常被用来提供用户界面中的功能快捷方式或操作选项。工具栏控件的设计和实现是网页交互性的重要组成部分,尤其是在构建富客户端应用或者增强用户体验的网页...

    javascript控件开发之按钮控件

    在JavaScript的世界里,控件是构建用户界面的基本元素,它们为用户提供交互能力,使得Web应用更具活力和用户体验。...记住,实践是提高技能的关键,不断地尝试和改进,你将成为一名出色的JavaScript控件开发者。

    javascript控件

    JavaScript控件是网页开发中常用的一种元素,它们用于增强用户界面的交互性和功能。JavaScript是一种轻量级的脚本语言,常被嵌入HTML页面中,以实现动态内容的生成和用户交互。在这个主题中,我们将深入探讨...

    javascript控件开发之渲染对象

    在JavaScript控件开发中,渲染对象是一个至关重要的概念,它涉及到如何将数据转换为用户界面可见的元素。本文将深入探讨渲染对象的概念、工作原理以及如何在实际开发中使用它们。 渲染对象通常指的是在JavaScript中...

    javascript控件开发之滚动条控件

    在网页中,本身就有滚动条,在显示文本内容的时候,原始的滚动条已够用,一般如果我们想实现一个类似列表的控件时,也可以把所有的列表数据输出到一个完整的标签,再嵌入到一个DIV中即可,然而如果数据量达到几千行...

    几个经典JavaScript控件下载

    这些JavaScript控件体现了JavaScript在前端开发中的强大能力,它们可以提升用户体验,使网页更加动态和互动。开发者可以学习并利用这些组件,快速构建具有高级特性的网页应用,同时也可以自定义样式和行为,以适应...

    JS控件,JAVASCRIPT控件,实用控件!

    JavaScript控件,通常简称为JS控件,是Web开发中常用的一种技术,它利用JavaScript语言来实现用户界面的交互和动态功能。JavaScript控件能够增强网页的用户体验,提供丰富的图形界面,以及各种用户输入和数据处理...

    javascript时间控件

    "java源代码"标签可能意味着这个时间控件包含Java语言的后端部分,用于处理与前端JavaScript控件的交互,例如验证用户输入的时间数据,或者将时间数据保存到数据库。Java的后端可以使用Servlet、JSP(JavaServer ...

    Javascript密码输入控件

    JavaScript密码输入控件是网页开发中常见的一种交互元素,它用于收集用户的安全信息,如登录密码、PIN码等。在Web应用中,正确地实现密码输入控件对于提高用户体验和保障数据安全至关重要。本文将深入探讨JavaScript...

    javascript开发的实用页面选项卡控件

    在实际开发中,还可以考虑使用现有的JavaScript库或框架,如jQuery、React、Vue等,它们提供了成熟的组件系统和丰富的API,可以帮助开发者更快捷、高效地创建出具有交互性和动画效果的选项卡控件。同时,对于响应式...

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...

Global site tag (gtag.js) - Google Analytics