JS UI自各儿搞2 - 构建简单的UI组件-JavaSript-爱易网页

JS UI自各儿搞2 - 构建简单的UI组件

日期：2014-05-16　浏览次数：20464 次

JS UI自己搞2 -- 构建简单的UI组件

这里贴出修改后的JS代码,其它的代码见第一节内容.

新增了动态创建HTML元素的功能,动态对其赋CSS属性的功能. 新增一个helloworld的例子: 尚未完成.

现在有事暂贴这些代码.

对第一节中html文件的修改处为 <body id='body'>,新增了一个id属性

Object.extend = function(distObject, souceObject) {
	for (var property in souceObject) {
		distObject[property] = souceObject[property];
	}
	return distObject;
}

//定义全局对象
if(typeof BJExtreme == 'undefined')
	BJExtreme =  function(){} ;

BJExtreme.log = nitobi.Debug.log ;

/*自定义的Dom*/
BJExtreme.Dom = {} ;

BJExtreme.Dom.$ = function(id){
	return document.getElementById(id);
}
BJExtreme.Dom.$name = function(name){
	return document.getElementsByTagName(name);
}
/**
 * 创建HTML元素,并连接到父元素中
 * @param {} elehtml
 * @param {} id
 * @param {} parentid
 */
BJExtreme.Dom.$c = function(elehtml,id,parentid){
	var ele = document.createElement(elehtml);
	ele.setAttribute('id',id);
	BJExtreme.Dom.$(parentid).appendChild(ele);
	ele = null ;
}


/**
 * 元素效果渲染功能区域
 * @type {}
 */
BJExtreme.EleHtml = {} ;

/**
 * 对指定id元素,冲入CSS元素,要注意的是在css属性出现连字符时
 * 将后面的首字母改为大写,并且去掉连字符. 例如:
 * margin-top 写成 marginTop
 * 
 * @param {} id
 * @param {} cssobj
 */
BJExtreme.EleHtml.css = function(id,cssobj){
	//HTML元素的style属性是个数组
	for (var property in cssobj) {
		BJExtreme.Dom.$(id).style[property] = cssobj[property];
	}
}


/**
 * 隐藏和显示HTML元素
 * @param {} id
 */
BJExtreme.EleHtml.hide = function(id){
	BJExtreme.EleHtml.css(id,{display:'none'});
}
BJExtreme.EleHtml.show = function(id){
	BJExtreme.EleHtml.css(id,{display:''});
}

BJExtreme.EleHtml.text = function(id,text){
	if ( text == undefined||text == '')
		return BJExtreme.Dom.$(id).innerText;
	BJExtreme.Dom.$(id).innerText = text;
}

BJExtreme.EleHtml.html = function(id,html){
	if ( html == undefined||html == '')
		return BJExtreme.Dom.$(id).innerHTML;
	BJExtreme.Dom.$(id).innerHTML = html;
}
/**
 * 设置HTML元素的宽高
 * @param {} id
 * @param {} width
 * @param {} height
 */
BJExtreme.EleHtml.setW$H = function(id,w,h){
	BJExtreme.EleHtml.css(id,{width:w,height:h});
}

/**
 * 仅对 position: absolute;的元素有效
 * 
 * 对于使用JS操作CSS时,如果使用的属性有连字符,后面那个大写
 * margin-top 写出 marginTop 
 * @param {} id
 */
BJExtreme.EleHtml.setAbsoluteCenter = function(id){
	var sfid = BJExtreme.Dom.$(id);
	BJExtreme.EleHtml.css(id,{
		position:'absolute',
		top:'50%',
		left: '50%',
		marginTop: (-(sfid.clientHeight / 2)) + 'px' ,
		marginLeft: (-(sfid.clientWidth / 2)) + 'px'
	});
	sfid = null ;
}


//UI控件区域
BJExtreme.WebUI = {} ;

BJExtreme.WebUI.popHelloWorld = function(){
	BJExtreme.Dom.$c('div','helloworld','body');
	BJExtreme.EleHtml.css('helloworld',{
		width:"400px",height:"200px",backgroundColor: 'pink'		
	});
	BJExtreme.EleHtml.setAbsoluteCenter('helloworld');
	
	
	BJExtreme.EleHtml.text('helloworld','你好,世界');
	
	
}
BJExtreme.WebUI.popHelloWorld();

//Test -- 区域
BJExtreme.Test = {} ;

BJExtreme.Test.$c = function(){
	BJExtreme.Dom.$c('p','exap','container');
	BJExtreme.EleHtml.html('exap','大家好啊');
}

BJExtreme.Test.show = function(){
	BJExtreme.EleHtml.show('container');
}
BJExtreme.Test.hide = function(){
	BJExtreme.EleHtml.hide('container');
}
BJExtreme.Test.setAbsoluteCenter = function(){
	BJExtreme.EleHtml.setW$H('container1',"200px","600px")
	BJExtreme.EleHtml.setAbsoluteCenter('container1');
}

BJExtreme.Test.$c();
BJExtreme.Test.hide();
BJExtreme.Test.show();

BJExtreme.Test.setAbsoluteCenter();

1 楼 vb2005xu 2009-03-18

http://www.tiddlywiki.com/ 很牛B的一个程序

2 楼 vb2005xu 2009-03-19

提供一个新的IP地址校验 Widget .. 尚未实现拖拽功能
[url]http://iamsese.cn/view/widget/iamsese/ipvalidator.html
[/url]
刚刚吧自己的那个文本论坛挣到里面了大家看看提点建

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS UI自各儿搞2 - 构建简单的UI组件

相关资料更多>

推荐阅读更多>