Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<div id="newModelContent" style="width:100%; height: 100%;"></div>


<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
.NewModel-Wrapper{
	background-color:  #fff !important;
	font-family: 'Lato', sans-serif !important;
	display: table !important;
	width: 100% !important;
	font-size: 12px !important;
	color: rgb(127, 122, 127) !important;
}

.NewModel-Wrapper p{
	font-family: 'Lato', sans-serif !important;
	text-align: justify;
}
.NewModel-Wrapper-Left-Img{
	float: left;
	width: 64px;
	height: 64px;
}

.NewModel-Wrapper strong{
	font-family: 'Lato', sans-serif !important;
}

.NewModel-Wrapper-Title{
	float: left;
    font-weight: 900;
    font-family: 'Lato', sans-serif !important;
    font-size: 24px;
    width: calc(100% - 128px);
    height: 64px;
    padding: 20px 0px;
	text-align: center;
}


.NewModel-Wrapper-Title span{
	font-weight: 900;
    font-family: 'Lato', sans-serif !important;
    font-size: 24px;
	color: #FFAB00;
}

.NewModel-Wrapper-Totvs-Img{
	float: left;
	width: 48px;
	height: 48px;
	padding-top: 12px;
}


.NewModel-Wrapper-Body{

}

.NewModel-Wrapper h1{
	color: rgb(143, 62, 21) !important;
	font-size: 20px !important;
	font-family: 'Lato', sans-serif !important;
	font-weight: 900;
}


.NewModel-Wrapper h2{
	color: rgb(127, 122, 127) !important;
	font-size: 20px !important;
	font-family: 'Lato', sans-serif !important;
	font-weight: 900;
}


.NewModel-Wrapper .toc-link, .NewModel-Wrapper .wiki-content a:link,  .NewModel-Wrapper .wiki-content a, .wiki-content a:link {
	color: rgb(127, 122, 127) !important;
	font-size: 16px !important;
	font-family: 'Lato', sans-serif !important;
}
.NewModel-Wrapper .toc-macro ul li{
		list-style-type: none !important;
}

.NewModel-Wrapper h1 a, .NewModel-Wrapper h1 a:active, .NewModel-Wrapper h1 a:link{
	color: #FFAB00 !important;
	font-weight: 900;
}


.NewModel-Wrapper h2 a, .NewModel-Wrapper h2 a:active, .NewModel-Wrapper h2 a:link{
	color: #FFAB00 !important;
	font-weight: 900;
}


.NewModel-Wrapper li{
	font-family: 'Lato', sans-serif !important;
}


.NewModel-Wrapper .panel{
	background-color: #303030;
	color: #fff;
	font-family: 'Lato', sans-serif !important;
}
</style>
<script>


TOTVS_TDN_Document_New_Model = {
	Id: "New_Model1",
	Container: null,
	WrapperEl: null,
	Init: function(id, nameOfContainer){
		this.Id = id;
		this.Container = (typeof nameOfContainer === "string") ? document.getElementById(nameOfContainer) : nameOfContainer;
	},
	Build: function(id, nameOfContainer){
		this.Init(id, nameOfContainer);


		var _newModelWrapper = document.createElement("div");
		_newModelWrapper.id = this.Id + "_Wrapper";
		_newModelWrapper.className = "NewModel-Wrapper"
		
		this.Container.appendChild(_newModelWrapper);
		this.WrapperEl = _newModelWrapper;
	},
	AddHeader: function(title){
		var _newModelHeader = document.createElement("div");
		_newModelHeader.id = this.WrapperEl.id + "_Header";
		
		var _newModelHeaderLeftIcon = document.createElement("img");
		_newModelHeaderLeftIcon.id = this.WrapperEl.id + "_HeaderLeftImg"
		_newModelHeaderLeftIcon.name = _newModelHeaderLeftIcon.id;
		_newModelHeaderLeftIcon.src = <script type="text/javascript" src="/download/attachments/330843097/leftTOTVS_iconTDNNewModel.pngjs?version=12&modificationDate=15223494272411522686091726&api=v2";
		_newModelHeaderLeftIcon.className = "NewModel-Wrapper-Left-Img";


		_newModelHeader.appendChild(_newModelHeaderLeftIcon);


		var _newModelHeaderTitle = document.createElement("span");
		_newModelHeaderTitle.id = this.WrapperEl.id + "_HeaderSpan"
		_newModelHeaderTitle.name = _newModelHeaderTitle.id;
		_newModelHeaderTitle.innerHTML = title;
		_newModelHeaderTitle.className = "NewModel-Wrapper-Title";


		_newModelHeader.appendChild(_newModelHeaderTitle);


		var _newModelHeaderTotvsIcon = document.createElement("img");
		_newModelHeaderTotvsIcon.id = this.WrapperEl.id + "_HeaderTotvsImg"
		_newModelHeaderTotvsIcon.name = _newModelHeaderTotvsIcon.id;
		_newModelHeaderTotvsIcon.src = "></script>
<link rel="stylesheet" type="text/css" href="/download/attachments/330843097/totvsTOTVS_iconTDNNewModel.pngcss?version=42&modificationDate=15223494274911522686091289&api=v2";
		_newModelHeaderTotvsIcon.className = "NewModel-Wrapper-Totvs-Img";

		_newModelHeader.appendChild(_newModelHeaderTotvsIcon);


		this.WrapperEl.appendChild(_newModelHeader);
	},
	AddBody: function(bodyEl){
		var _newModelBody = document.createElement("div");
		_newModelBody.id = this.WrapperEl.id + "_Body";
		_newModelBody.className = "NewModel-Wrapper-Body";

		var _body = (typeof bodyEl === "string") ? document.getElementById(bodyEl) : bodyEl;


		_newModelBody.appendChild(_body);
		this.WrapperEl.appendChild(_newModelBody);
	},
	AddFooter: function(){
		var _newModelFooter = document.createElement("div");


		this.WrapperEl.appendChild(_newModelFooter);
	}
}
>


<div id="newModelContent" style="width:100%; height: 100%;"></div>

<script>
window.onload = function(){
	TOTVS_TDN_Document_New_Model.Build('Document1', 'newModelContent');
	TOTVS_TDN_Document_New_Model.AddHeader('Serviço de Cache Centralizado <span>Instalação e Configuração</span>');
	TOTVS_TDN_Document_New_Model.AddBody('divBody');
}
</script>

...