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

vb2005xu

浏览: 1780192 次
性别:
来自: 北京

最近访客更多访客>>

秋之风245

lukeme

liugm1

SeerMi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript 学习

UI CSS HTML C C++

这里贴出修改后的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();

查看图片附件

分享到：

给朋友写大学毕业前的实习鉴定 | HTML元素布局学习1 -- 绝对居中

2009-03-15 17:10
浏览 1648
评论(8)
论坛回复 / 浏览 (8 / 4309)
分类:Web前端
查看更多

8 楼 vb2005xu 2009-03-24

DIV 左右图片边框的实现: 因为DIV不像表格那样简单的实现左右图片边框的效果


/*设置布局元素*/
div#layout{
	height: 100%;width: 800px;
	margin: 0px auto ;
	position: relative;
}
/*左边框*/
div#layout #leftline {
	background-image: url(../img/bg_border_left1.jpg) ;
	background-repeat: repeat-y;display: inline;
	width: 8px;	height: 100%;float: left;
}
/*右边框*/
div#layout #rightline {
	background-image: url(../img/bg_border_right1.jpg) ;
	background-repeat: repeat-y;
    width: 8px;	height: 100%;float: right;
}

div#layout #interline {
	height: 100%;display: inline;
	width: 784px;float: left;
	background-color: #ffffff ;/*设置颜色,为了与logo的画布颜色相同*/
}

7 楼 hanjs 2009-03-23

lz的代码没有注释,没法看.

6 楼 luolonghao 2009-03-20

js按照这样的java风格写代码会很长，javascript开发最重要的原则是保持代码可读性的前提下尽量缩减代码量。

BJExtreme = function(){} ; 可以写成 BJExtreme = {};

BJExtreme.Dom.$ = function(id){
return document.getElementById(id);
}
感觉完全没必要，省不了多少字节。

5 楼 vb2005xu 2009-03-20

增加一段代码

$(document).ready(function(){
	$.ajaxSetup({async:false});//同步加载
	//定义全局对象
	if(typeof WebWidget == 'undefined')
		var WebWidget =  function(){} ;
	
	//设置根目录
	$('script').each(function(){
		var match = $(this).attr('src').match(/.*boot.js($|\?.*)/);
		if (match){
			WebWidget.appPath = $(this).attr('src').replace(/core\/boot\.js.*/, '');
		}
	});
}

4 楼 vb2005xu 2009-03-20

http://www.iamsese.cn/view/cssbook/cssonlineguide/
在线CSS手册

3 楼 vb2005xu 2009-03-19

2 楼 vb2005xu 2009-03-19

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

1 楼 vb2005xu 2009-03-18

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论