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

关注

原创最新推荐文章于 2026-06-02 15:16:45 发布 391 阅读 AI 写同款· GEO 优化 ›

基于Tauri2.0与VUE3的桌面应用框架设计与窗口置顶功能实战本文详细介绍了基于Tauri2.0与VUE3构建现代化桌面应用的完整流程。通过实战演示如何搭建项目框架、设计应用布局、实现自定义标题栏，并重点讲解了窗口置顶功能的实现方法，包括权限配置与状态同步，帮助开发者高效开发高性能、小体积的跨平台桌面应用。阅读详情

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