[置顶] JS UI自己搞2 -- 构建简单的UI组件

来源：互联网发布：西安广告算法工程师编辑：程序博客网时间：2024/06/06 14:56

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

查看图片附件

0 0