141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
/** HTML закладки
|
||
*/
|
||
class tcTabs
|
||
{
|
||
//element_id - Контейнер где будут созданны закладки
|
||
constructor(element_id){
|
||
this.tbs=new Array();
|
||
if(typeof element_id == 'string') this.bd=document.getElementById(element_id); else this.bd=element_id;
|
||
|
||
this.wra=document.createElement('div');
|
||
this.wra.style.cssText="display: table; width :100%; height: 100%; padding: 0px; margin: 0px; border-collapse: collapse; border: 0px solid #000000;";
|
||
|
||
var tr=null;
|
||
tr=document.createElement('div');
|
||
tr.style.cssText='display: table-row; height: 1%; padding: 0px; margin: 0px; border: 0px solid #0000ff;'
|
||
|
||
this.btt=document.createElement('div');
|
||
this.btt.style.cssText='display: table-cell; width :100%; height: 1%; padding: 0px; margin: 0px; border: 0px solid #0000ff;background-color:var(--back-color-2);color:var(--text-color-1);';
|
||
tr.appendChild(this.btt);
|
||
this.wra.appendChild(tr);
|
||
|
||
tr=document.createElement('div');
|
||
tr.style.cssText='display: table-row; width :100%; height: 100%; padding: 0px; margin: 0px; border: 0px solid #0000ff;'
|
||
|
||
//Content
|
||
this.ctt=document.createElement('div');
|
||
this.ctt.style.cssText='display:table-cell; width :100%; height: 100%; padding: 0px; margin: 0px; border; border: 1px solid #b3b3b3; overflow:hidden;'
|
||
|
||
tr.appendChild(this.ctt);
|
||
this.wra.appendChild(tr);
|
||
|
||
this.bd.appendChild(this.wra);
|
||
}
|
||
//Добавление новой закладки
|
||
addTab(config)
|
||
{
|
||
let tab=new tcTab(config)
|
||
tab.par=this
|
||
this.btt.appendChild(tab.div);
|
||
|
||
this.tbs[this.tbs.length]=tab;
|
||
return tab;
|
||
}
|
||
//Удаление закладки
|
||
delTab(tab)
|
||
{
|
||
if (typeof tab === 'string' || tab instanceof String)
|
||
{
|
||
}else
|
||
{
|
||
for(let i=0;i<this.tbs.length;i++)
|
||
{
|
||
if(this.tbs[i]==tab)
|
||
{
|
||
this.btt.removeChild(tab.div);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//Поиск закладки по имени
|
||
getTabByName(name)
|
||
{
|
||
for(let i=0;i<this.tbs.length;i++)
|
||
{
|
||
if(this.tbs[i].name==name)
|
||
{
|
||
return this.tbs[i];
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
}
|
||
|
||
class tcTab
|
||
{
|
||
constructor(config){
|
||
|
||
this.bColor="";
|
||
|
||
if(typeof config == 'undefined' || config == null) config = {};
|
||
if(typeof config.float == 'undefined'){ config.float='left'; }
|
||
if(typeof config.name == 'undefined'){ config.name=''; }
|
||
|
||
this.id=0;
|
||
this.name=config.name;
|
||
this.par=null;
|
||
this.sel=false;
|
||
this.con=null; //Элемент с содержимым
|
||
this.display = 'block'; //Для сохранения старого значения
|
||
this.href='';
|
||
|
||
//Сам таб на который нажимаем (ушко)
|
||
this.div=document.createElement('div')
|
||
this.div.style.cssText='position: relative; top: 1px; cursor: pointer; float: '+config.float+'; border: 1px solid #b3b3b3; border-radius: 5px 5px 0px 0px; padding: 1px; padding-right: 4px; padding-left: 4px; margin-left: 2px; margin-right: 2px;'
|
||
this.div.style.background = 'var(--back-color-1)';
|
||
this.div.innerHTML=config.caption;
|
||
|
||
this.div.onmouseover=function(obj){return function(){ if(!obj.sel) obj.div.style.background = 'var(--row-color-1)'; }}(this);
|
||
this.div.onmouseout=function(obj){return function(){ if(!obj.sel) obj.div.style.background = 'var(--back-color-1)'; }}(this);
|
||
this.div.onclick=function(obj){return function(){ obj.setSel(); if(obj.href!='') goToURL(obj.href); }}(this)
|
||
}
|
||
|
||
setConText(txt)
|
||
{ if(this.con!=null) this.con.parent.removeChild(this.con)
|
||
this.con=document.createElement('div')
|
||
this.con.style.cssText='width: 100%; height: 100%;'
|
||
if(!this.sel) this.con.style.display='none'
|
||
this.con.innerHTML=txt
|
||
this.par.ctt.appendChild(this.con)
|
||
return this.con
|
||
}
|
||
|
||
setConObj(val)
|
||
{
|
||
if(this.con!=null) this.con.parent.removeChild(this.con)
|
||
if (typeof val === 'string' || val instanceof String)
|
||
val=document.getElementById(val);
|
||
if(val===null || typeof(val)=='undefined') return;
|
||
this.con=val;
|
||
|
||
this.display = this.con.style.display;
|
||
|
||
if(!this.sel) this.con.style.display='none';
|
||
this.par.ctt.appendChild(this.con);
|
||
return val;
|
||
}
|
||
|
||
setSel()
|
||
{
|
||
for(let i=0;i<this.par.tbs.length;i++)
|
||
{ this.par.tbs[i].div.style.background = 'var(--back-color-1)';
|
||
this.par.tbs[i].div.style.borderBottom = "1px solid #b3b3b3"
|
||
this.par.tbs[i].sel=false
|
||
this.par.tbs[i].con.style.display='none'
|
||
}
|
||
this.div.style.background = 'var(--row-color-2)';
|
||
this.div.style.borderBottom = '1px solid var(--back-color)'
|
||
this.con.style.display = this.display; //this.con.style.display='block'; //this.con.style.display='inline'
|
||
this.sel=true
|
||
}
|
||
} |