Histórico da Página
HTML |
---|
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Carousel.js?version=15&modificationDate=1521836856000&api=v2"></script> <script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.mutate.js?version=12&modificationDate=1521827027000&api=v2"></script> <script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.js?version=1&modificationDate=1521827211000&api=v2"></script> <link rel="stylesheet" <script type="text/cssjavascript" hrefsrc="/download/attachments/330843097/TOTVS_CarouselDocumentSearcher.cssjs?version=15&modificationDate=15218368560001521838432570&api=v2">></script> <link rel="stylesheet" <script type="text/cssjavascript" hrefsrc="/download/attachments/347442711330843097/TOTVS_AccordionKeywords.cssjs?version=110&modificationDate=15218267900001522346687000&api=v2"> |
Collapsible Panels (Painéis Expansíveis)
Para se utilizar o Painel Expansível, alguns passos devem ser utilizados:
1 - Adicione os Scripts
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
></script> <script type="text/javascript" src="/download/attachments/347442711330843097/TOTVS_AccordionTDNNewModel.mutate.js?version=1&modificationDate=15218270270001522686091726&api=v2"></script> <script<link rel="stylesheet" type="text/javascriptcss" srchref="/download/attachments/347442711330843097/TOTVS_AccordionCarousel.jscss?version=1&modificationDate=15218272110001521836856000&api=v2"></script> |
2 - Adicione os CSSs
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
> <link rel="stylesheet" type="text/css" href="/download/attachments/347442711/TOTVS_Accordion.css?version=110&modificationDate=1521826790000&api=v2"> | ||||||||
HTML | ||||||||
<script <link rel="stylesheet" type="text/javascriptcss"> Totvs href="/download/attachments/330843097/TOTVS_Keywords.css?version=2&modificationDate=1522346687000&api=v2"> <link rel="stylesheet" type="text/css" href="/download/attachments/330843097/TOTVS_TDNNewModel.css?version=1&modificationDate=1522686091289&api=v2"> |
TOTVS Accordion
...
Para se utilizar o TOTVS Accordion, alguns passos devem ser utilizados:
1 - Adicione os Scripts
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.mutate.js?version=2&modificationDate=1521827027000&api=v2"></script>
<script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.js?version=1&modificationDate=1521827211000&api=v2"></script> |
2 - Adicione os CSSs
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<link rel="stylesheet" type="text/css" href="/download/attachments/347442711/TOTVS_Accordion.css?version=1&modificationDate=1521826790000&api=v2"> |
HTML |
---|
<script type="text/javascript"> Totvs = { Accordion: function(optCollapsiblePanel){ var oCollapsiblePanel = function(optCollapsiblePanel){ this.Id = "CollapsiblePanel1"; this.ElementToAttach = window.body; this.TitleMark = "titlemark"; this.Title = ""; this.TitleImageUrl = ""; this.Groups = []; this.LoadComponents = function(optCollapsiblePanel){ if(optCollapsiblePanel= { CollapsiblePanel: function(optCollapsiblePanel){ var oCollapsiblePanel = function(optCollapsiblePanel){ this.Id = "CollapsiblePanel1"; this.ElementToAttach = window.body; this.TitleMark = "titlemark"; this.Title = ""; this.TitleImageUrl = ""; this.Groups = []; this.LoadComponents = function(optCollapsiblePanel){ if(optCollapsiblePanel != null && optCollapsiblePanel != undefined && !$.isEmptyObject(optCollapsiblePanel)){ if(optCollapsiblePanel.Id != null && optCollapsiblePanel.Id != undefined && optCollapsiblePanel.Id != "") this.Id = optCollapsiblePanel.Id; if(optCollapsiblePanel.ElementToAttach != null && optCollapsiblePanel.ElementToAttach != undefined) this.ElementToAttach = optCollapsiblePanel.ElementToAttach; if(optCollapsiblePanel.Title != null && optCollapsiblePanel.Title != undefined && optCollapsiblePanel.Title != "") this.Title = optCollapsiblePanel.Title; if(optCollapsiblePanel.TitleMark != null && optCollapsiblePanel.TitleMark != undefined && optCollapsiblePanel.TitleMark != "") this.TitleMark = optCollapsiblePanel.TitleMark.replace("<").replace(">"); if(optCollapsiblePanel.TitleImageUrl != null && optCollapsiblePanel.TitleImageUrl != undefined && optCollapsiblePanel.TitleImageUrl != "")!$.isEmptyObject(optCollapsiblePanel)){ this.TitleImageUrl = optCollapsiblePanel.TitleImageUrlif(optCollapsiblePanel.Id != null && optCollapsiblePanel.Id != undefined && optCollapsiblePanel.Id != "") this.Id = optCollapsiblePanel.Id; if(optCollapsiblePanel.GroupsElementToAttach != null && optCollapsiblePanel.GroupsElementToAttach != undefined) this.GroupsElementToAttach = optCollapsiblePanel.Groups ElementToAttach; } var ElementCollapsiblePanel = document.createElement('div'); if(optCollapsiblePanel.Title != null && optCollapsiblePanel.Title != undefined && optCollapsiblePanel.Title != "") ElementCollapsiblePanel this.idTitle = this.Id + "_OuterDiv"; optCollapsiblePanel.Title; ElementCollapsiblePanelif(optCollapsiblePanel.nameTitleMark != this.Id + "_OuterDiv"; ElementCollapsiblePanel.className = "outerDiv"; var ElementCollapsiblePanelWrapper = document.createElement('div'); ElementCollapsiblePanelWrapper.id = this.Id + "_OuterDivWrapper"; ElementCollapsiblePanelWrapper.name = this.Id + "_OuterDivWrapper"; ElementCollapsiblePanelWrapper.className = "outerDivWrapper"; null && optCollapsiblePanel.TitleMark != undefined && optCollapsiblePanel.TitleMark != "") this.TitleMark = optCollapsiblePanel.TitleMark.replace("<").replace(">"); if(optCollapsiblePanel.TitleImageUrl != null && optCollapsiblePanel.TitleImageUrl != undefined && optCollapsiblePanel.TitleImageUrl != "") this.TitleImageUrl = optCollapsiblePanel.TitleImageUrl; if(thisoptCollapsiblePanel.TitleGroups != null && thisoptCollapsiblePanel.TitleGroups != undefined && this.Title != ""){ if( this.TitleImageUrlGroups != null && this.TitleImageUrl != undefined && this.TitleImageUrl != ""){ optCollapsiblePanel.Groups ; } var ElementCollapsiblePanelWrapperTitleSpanElementCollapsiblePanel = document.createElement('spandiv'); ElementCollapsiblePanelWrapperTitleSpanElementCollapsiblePanel.id = this.Id + "_OuterDivWrapperTitleSpanOuterDiv"; ElementCollapsiblePanelWrapperTitleSpanElementCollapsiblePanel.name = this.Id + "_OuterDivWrapperTitleSpanOuterDiv"; ElementCollapsiblePanelWrapperTitleSpanElementCollapsiblePanel.className = "outerDivWrapperTitleSpanouterDiv"; var ElementCollapsiblePanelWrapperTitleSpanImgElementCollapsiblePanelWrapper = document.createElement('imgdiv'); ElementCollapsiblePanelWrapperTitleSpanImgElementCollapsiblePanelWrapper.id = this.Id + "_OuterDivWrapperTitleSpanImgOuterDivWrapper"; ElementCollapsiblePanelWrapperTitleSpanImgElementCollapsiblePanelWrapper.name = this.Id + "_OuterDivWrapperTitleSpanImgOuterDivWrapper"; ElementCollapsiblePanelWrapperTitleSpanImgElementCollapsiblePanelWrapper.className = "outerDivWrapperTitleSpanImgouterDivWrapper"; ElementCollapsiblePanelWrapperTitleSpanImgif(this.srcTitle != this.TitleImageUrl; ElementCollapsiblePanelWrapperTitleSpan.appendChild(ElementCollapsiblePanelWrapperTitleSpanImg); null && this.Title != undefined && this.Title != ""){ if(this.TitleImageUrl != null && this.TitleImageUrl != undefined && this.TitleImageUrl != ""){ var ElementCollapsiblePanelWrapperTitleSpanTextElementCollapsiblePanelWrapperTitleSpan = document.createElement('span'); ElementCollapsiblePanelWrapperTitleSpanText ElementCollapsiblePanelWrapperTitleSpan.id = this.Id + "_OuterDivWrapperTitleSpanTextOuterDivWrapperTitleSpan"; ElementCollapsiblePanelWrapperTitleSpanText ElementCollapsiblePanelWrapperTitleSpan.name = this.Id + "_OuterDivWrapperTitleSpanTextOuterDivWrapperTitleSpan"; ElementCollapsiblePanelWrapperTitleSpanText ElementCollapsiblePanelWrapperTitleSpan.className = "outerDivWrapperTitleSpanTextouterDivWrapperTitleSpan"; ElementCollapsiblePanelWrapperTitleSpanText.innerHTMLvar ElementCollapsiblePanelWrapperTitleSpanImg = this.Title; document.createElement('img'); ElementCollapsiblePanelWrapper.appendChild(ElementCollapsiblePanelWrapperTitleSpan)ElementCollapsiblePanelWrapperTitleSpanImg.id = this.Id + "_OuterDivWrapperTitleSpanImg"; ElementCollapsiblePanelWrapper.appendChild(ElementCollapsiblePanelWrapperTitleSpanText)ElementCollapsiblePanelWrapperTitleSpanImg.name = this.Id + "_OuterDivWrapperTitleSpanImg"; } else ElementCollapsiblePanelWrapperTitleSpanImg.className = "outerDivWrapperTitleSpanImg"; ElementCollapsiblePanelWrapperElementCollapsiblePanelWrapperTitleSpanImg.innerHTMLsrc = this.TitleTitleImageUrl; } else{ if($(window.document).find(this.TitleMark).length > 0)ElementCollapsiblePanelWrapperTitleSpan.appendChild(ElementCollapsiblePanelWrapperTitleSpanImg); ElementCollapsiblePanelWrapper.innerHTMLvar ElementCollapsiblePanelWrapperTitleSpanText = $(window.document).find(this.TitleMark)[0].innerHTMLdocument.createElement('span'); } ElementCollapsiblePanel.appendChild(ElementCollapsiblePanelWrapper); ElementCollapsiblePanelWrapperTitleSpanText .id = this.Id + "_OuterDivWrapperTitleSpanText"; for(var iElementCollapsiblePanelWrapperTitleSpanText .name = 0; i < this.Groups.length;Id i++){+ "_OuterDivWrapperTitleSpanText"; ElementCollapsiblePanel.appendChild(this.Groups[i]); ElementCollapsiblePanelWrapperTitleSpanText .className = "outerDivWrapperTitleSpanText"; if(this.Groups.length > 1 && i < this.Groups.length - 1){ElementCollapsiblePanelWrapperTitleSpanText.innerHTML = this.Title; var _paddingDiv = document.createElement("div"ElementCollapsiblePanelWrapper.appendChild(ElementCollapsiblePanelWrapperTitleSpan); _paddingDiv.className = "paddingDiv"; ElementCollapsiblePanelElementCollapsiblePanelWrapper.appendChild(_paddingDivElementCollapsiblePanelWrapperTitleSpanText); } } else if(typeof this.ElementToAttach ElementCollapsiblePanelWrapper.innerHTML === "string") this.Title; } this.ElementToAttach = document.getElementById(this.ElementToAttach);else{ this.ElementToAttach.appendChild(ElementCollapsiblePanel); return this; if($(window.document).find(this.TitleMark).length > 0) } return this.LoadComponents(optCollapsiblePanel)ElementCollapsiblePanelWrapper.innerHTML = $(window.document).find(this.TitleMark)[0].innerHTML; } return new oCollapsiblePanel(optCollapsiblePanelElementCollapsiblePanel.appendChild(ElementCollapsiblePanelWrapper); }, CollapsiblePanelGroup: function(optCollapsiblePanelGroup){ var oCollapsiblePanelGroup = function(optCollapsiblePanelGroupfor(var i = 0; i < this.Groups.length; i++){ this.Id = "CollapsiblePanelGroup1"; ElementCollapsiblePanel.appendChild(this.Groups[i]); if(this.Parent = null; this.GroupTitleMark = "grouptitlemark{0}" this.GroupTitle = ""; this.GrouptTitleImageUrl = ""; this.LoadComponents = function(optCollapsiblePanelGroup){ Groups.length > 1 && i < this.Groups.length - 1){ var _paddingDiv = document.createElement("div"); _paddingDiv.className = "paddingDiv"; ElementCollapsiblePanel.appendChild(_paddingDiv); } } if(optCollapsiblePanelGroup!= null && optCollapsiblePanelGroup!= undefined && !$.isEmptyObject(optCollapsiblePanelGroup)){typeof this.ElementToAttach === "string") if(optCollapsiblePanelGroupthis.GroupTitleElementToAttach != null && optCollapsiblePanelGroup.GroupTitle != undefined && optCollapsiblePanelGroup.GroupTitle != "")document.getElementById(this.ElementToAttach); this.GroupTitle = optCollapsiblePanelGroup.GroupTitleElementToAttach.appendChild(ElementCollapsiblePanel); if(optCollapsiblePanelGroup.GroupTitleImageUrl!= null && optCollapsiblePanelGroup.GroupTitleImageUrl != undefined && optCollapsiblePanelGroup.GroupTitleImageUrl!= "")return this; } return this.GroupTitleImageUrl = optCollapsiblePanelGroup.GroupTitleImageUrlLoadComponents(optCollapsiblePanel); } if(optCollapsiblePanelGroup.GroupTitleMark != null && optCollapsiblePanelGroup.GroupTitleMark != undefined && optCollapsiblePanelGroup.GroupTitleMark != "") return new oCollapsiblePanel(optCollapsiblePanel); }, this.GroupTitleMark = optCollapsiblePanelGroup.GroupTitleMark.replace("<").replace(">"); } var ElementCollapsiblePanelGroup = document.createElement('div'); ElementCollapsiblePanelGroup.id = this.Id + "_GroupOuterDivCollapsiblePanelGroup: function(optCollapsiblePanelGroup){ var oCollapsiblePanelGroup = function(optCollapsiblePanelGroup){ this.Id = "CollapsiblePanelGroup1"; ElementCollapsiblePanelGroupthis.nameParent = this.Id + "_GroupOuterDiv"null; ElementCollapsiblePanelGroupthis.classNameGroupTitleMark = "groupOuterDivgrouptitlemark{0}"; var ElementCollapsiblePanelGroupWrapper = document.createElement('div'); ElementCollapsiblePanelGroupWrapper.idthis.GroupTitle = this.Id + "_GroupOuterDivWrapper"; ElementCollapsiblePanelGroupWrapperthis.nameGrouptTitleImageUrl = this.Id + "_GroupOuterDivWrapper"; ElementCollapsiblePanelGroupWrapperthis.classNameLoadComponents = "groupOuterDivWrapper";function(optCollapsiblePanelGroup){ if(this.GroupTitle optCollapsiblePanelGroup!= null && this.GroupTitle optCollapsiblePanelGroup!= undefined && this.GroupTitle != ""!$.isEmptyObject(optCollapsiblePanelGroup)){ if(thisoptCollapsiblePanelGroup.GroupTitleImageUrlGroupTitle != null && thisoptCollapsiblePanelGroup.GroupTitleImageUrlGroupTitle != undefined && thisoptCollapsiblePanelGroup.GroupTitleImageUrlGroupTitle != ""){ var ElementCollapsiblePanelGroupWrapperTitleSpan this.GroupTitle = document.createElement('span');optCollapsiblePanelGroup.GroupTitle; ElementCollapsiblePanelGroupWrapperTitleSpan.id = this.Id + "_GroupOuterDivWrapperTitleSpan";if(optCollapsiblePanelGroup.GroupTitleImageUrl!= null && optCollapsiblePanelGroup.GroupTitleImageUrl != undefined && optCollapsiblePanelGroup.GroupTitleImageUrl!= "") ElementCollapsiblePanelGroupWrapperTitleSpanthis.nameGroupTitleImageUrl = this.Id + "_GroupOuterDivWrapperTitleSpan";optCollapsiblePanelGroup.GroupTitleImageUrl; ElementCollapsiblePanelGroupWrapperTitleSpan.className = "groupOuterDivWrapperTitleSpan"; var ElementCollapsiblePanelGroupWrapperTitleSpanImgif(optCollapsiblePanelGroup.GroupTitleMark != null && optCollapsiblePanelGroup.GroupTitleMark != undefined && optCollapsiblePanelGroup.GroupTitleMark != "") this.GroupTitleMark = optCollapsiblePanelGroup.GroupTitleMark.replace("<").replace(">"); } var ElementCollapsiblePanelGroup = document.createElement('imgdiv'); ElementCollapsiblePanelGroupWrapperTitleSpanImgElementCollapsiblePanelGroup.id = this.Id + "_GroupOuterDivWrapperTitleSpanImgGroupOuterDiv"; ElementCollapsiblePanelGroupWrapperTitleSpanImgElementCollapsiblePanelGroup.name = this.Id + "_GroupOuterDivWrapperTitleSpanImgGroupOuterDiv"; ElementCollapsiblePanelGroupWrapperTitleSpanImgElementCollapsiblePanelGroup.className = "outerDivWrapperTitleSpanImggroupOuterDiv"; ElementCollapsiblePanelGroupWrapperTitleSpanImg.src = this.GroupTitleImageUrl; ElementCollapsiblePanelGroupWrapperTitleSpan.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpanImg); var ElementCollapsiblePanelGroupWrapperTitleSpanText = var ElementCollapsiblePanelGroupWrapper = document.createElement('spandiv'); ElementCollapsiblePanelGroupWrapperTitleSpanText ElementCollapsiblePanelGroupWrapper.id = this.Id + "_GroupOuterDivWrapperTitleSpanTextGroupOuterDivWrapper"; ElementCollapsiblePanelGroupWrapperTitleSpanText ElementCollapsiblePanelGroupWrapper.name = this.Id + "_GroupOuterDivWrapperTitleSpanTextGroupOuterDivWrapper"; ElementCollapsiblePanelGroupWrapperTitleSpanText ElementCollapsiblePanelGroupWrapper.className = "groupOuterDivWrapperTitleSpanTextgroupOuterDivWrapper"; ElementCollapsiblePanelGroupWrapperTitleSpanTextif(this.innerHTMLGroupTitle != null && this.GroupTitle; ElementCollapsiblePanelGroupWrapper.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpan); != undefined && this.GroupTitle != ""){ ElementCollapsiblePanelGroupWrapper.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpanText);if(this.GroupTitleImageUrl != null && this.GroupTitleImageUrl != undefined && this.GroupTitleImageUrl != ""){ } var ElementCollapsiblePanelGroupWrapperTitleSpan = document.createElement('span'); else ElementCollapsiblePanelGroupWrapperElementCollapsiblePanelGroupWrapperTitleSpan.innerHTMLid = this.GroupTitleId + "_GroupOuterDivWrapperTitleSpan"; } else{ ElementCollapsiblePanelGroupWrapperTitleSpan.name = this.Id + "_GroupOuterDivWrapperTitleSpan"; if($(window.document).find(this.GroupTitleMark).length > 0) ElementCollapsiblePanelGroupWrapperTitleSpan.className = "groupOuterDivWrapperTitleSpan"; ElementCollapsiblePanelGroupWrapper.innerHTMLvar ElementCollapsiblePanelGroupWrapperTitleSpanImg = $(window.document).find(this.GroupTitleMark)[0].innerHTMLcreateElement('img'); } ElementCollapsiblePanelGroup.appendChild(ElementCollapsiblePanelGroupWrapper); ElementCollapsiblePanelGroupWrapperTitleSpanImg.id = this.Id + "_GroupOuterDivWrapperTitleSpanImg"; return ElementCollapsiblePanelGroup; } return this.LoadComponents(optCollapsiblePanelGroup)ElementCollapsiblePanelGroupWrapperTitleSpanImg.name = this.Id + "_GroupOuterDivWrapperTitleSpanImg"; } return oCollapsiblePanelGroup(optCollapsiblePanelGroup); }, CollapsiblePanelGroupItem: function(optCollapsiblePanelGroupItem){ var oCollapsiblePanelGroupItem = function(optCollapsiblePanelGroupItem) { ElementCollapsiblePanelGroupWrapperTitleSpanImg.className = "outerDivWrapperTitleSpanImg"; this ElementCollapsiblePanelGroupWrapperTitleSpanImg.LoadComponentssrc = function(optCollapsiblePanelGroupItem){this.GroupTitleImageUrl; return null; ElementCollapsiblePanelGroupWrapperTitleSpan.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpanImg); } return this.LoadComponents(optCollapsiblePanelGroupItemvar ElementCollapsiblePanelGroupWrapperTitleSpanText = document.createElement('span'); } return oCollapsiblePanelGroupItem(optCollapsiblePanelGroupItem); } } </script> |
3 - Adicione o Script das Chamadas ao TOTVS_Accordion
HTML |
---|
<script type="text/javascript">
var _groups = [];
optCollapsiblePanelGroup1 = {
GroupTitle: "Grupo de Teste1",
GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2"
}
var _group1 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup1);
_groups.push(_group1);
optCollapsiblePanelGroup2 = {
GroupTitle: "Grupo de Teste2",
GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2"
}
var _group2 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup2);
_groups.push(_group2);
optCollapsiblePanel1 = {
ElementToAttach: "divContent",
Groups: _groups,
TitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2",
Title: "Título de Teste"
}
var _collapsiblePanel1 = Totvs.CollapsiblePanel(optCollapsiblePanel1);
</script>
<div id="divContent"><div> |
ElementCollapsiblePanelGroupWrapperTitleSpanText .id = this.Id + "_GroupOuterDivWrapperTitleSpanText";
ElementCollapsiblePanelGroupWrapperTitleSpanText .name = this.Id + "_GroupOuterDivWrapperTitleSpanText";
ElementCollapsiblePanelGroupWrapperTitleSpanText .className = "groupOuterDivWrapperTitleSpanText";
ElementCollapsiblePanelGroupWrapperTitleSpanText.innerHTML = this.GroupTitle;
ElementCollapsiblePanelGroupWrapper.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpan);
ElementCollapsiblePanelGroupWrapper.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpanText);
}
else
ElementCollapsiblePanelGroupWrapper.innerHTML = this.GroupTitle;
}
else{
if($(window.document).find(this.GroupTitleMark).length > 0)
ElementCollapsiblePanelGroupWrapper.innerHTML = $(window.document).find(this.GroupTitleMark)[0].innerHTML;
}
ElementCollapsiblePanelGroup.appendChild(ElementCollapsiblePanelGroupWrapper);
return ElementCollapsiblePanelGroup;
}
return this.LoadComponents(optCollapsiblePanelGroup);
}
return oCollapsiblePanelGroup(optCollapsiblePanelGroup);
},
CollapsiblePanelGroupItem: function(optCollapsiblePanelGroupItem){
var oCollapsiblePanelGroupItem = function(optCollapsiblePanelGroupItem) {
this.LoadComponents = function(optCollapsiblePanelGroupItem){
return null;
}
return this.LoadComponents(optCollapsiblePanelGroupItem);
}
return oCollapsiblePanelGroupItem(optCollapsiblePanelGroupItem);
}
}
</script> |
3 - Adicione o Script das Chamadas ao TOTVS_Accordion
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<script type="text/javascript">
var _groups = [];
optCollapsiblePanelGroup1 = {
GroupTitle: "Grupo de Teste1",
GroupTitleImageUrl: "/download/ | ||||||||||
Bloco de código | ||||||||||
| ||||||||||
<script type="text/javascript"> var _groups = []; optCollapsiblePanelGroup1 = { GroupTitle: "Grupo de Teste1", GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2" } var _group1 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup1); _groups.push(_group1); optCollapsiblePanelGroup2 = { GroupTitle: "Grupo de Teste2", GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2" } var _group2 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup2); _groups.push(_group2); optCollapsiblePanel1 = { ElementToAttach: "divContent", Groups: _groups, TitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2", Title: "Título de Teste" } } var _collapsiblePanel1group1 = Totvs.CollapsiblePanelCollapsiblePanelGroup(optCollapsiblePanel1optCollapsiblePanelGroup1); </script>_groups.push(_group1); <divoptCollapsiblePanelGroup2 id="divContent"><div> |
...
Para se utilizar o TDN Document Searcher, alguns passos devem ser utilizados:
1 - Adicione a Macro Children Display com a Propriedade Show Descendants como true.
Exibir filhos | ||
---|---|---|
|
HTML |
---|
<style> .changeSelection::selection { background:rgba(0,0,0,0.2); } </style> |
3 - Adicione a macro HTML (com o código abaixo) na posição onde desejar no documento:
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<div id="myContent"></div> |
4 - Adicione o Script do Objeto Totvs.DocumentSearcher
TOTVS_DocumentSearcher.jsCorousel
1 - Adicione o Style
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style> |
2 - Adicione o HTML
GroupTitle: "Grupo de Teste2",
GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2"
}
var _group2 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup2);
_groups.push(_group2);
optCollapsiblePanel1 = {
ElementToAttach: "divContent",
Groups: _groups,
TitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2",
Title: "Título de Teste"
}
var _collapsiblePanel1 = Totvs.Accordion(optCollapsiblePanel1);
</script>
<div id="divContent"></div> |
HTML |
---|
<div id="divAccordion"></div>
<script type="text/javascript">
var _groups = [];
optCollapsiblePanelGroup1 = {
GroupTitle: "Grupo de Teste1",
GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2"
}
var _group1 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup1);
_groups.push(_group1);
optCollapsiblePanelGroup2 = {
GroupTitle: "Grupo de Teste2",
GroupTitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2"
}
var _group2 = Totvs.CollapsiblePanelGroup(optCollapsiblePanelGroup2);
_groups.push(_group2);
optAccordion1 = {
ElementToAttach: "divAccordion",
Groups: _groups,
TitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2",
Title: "Título de Teste"
}
var _collapsiblePanel1 = Totvs.Accordion(optAccordion1);
</script> |
TDN Document Searcher
...
Para se utilizar o TDN Document Searcher, alguns passos devem ser utilizados:
1 - Adicione a Macro Children Display com a Propriedade Show Descendants como true.
Exibir filhos | ||
---|---|---|
|
2 - Adicione os scripts
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_DocumentSearcher.js?version=5&modificationDate=1521838432570&api=v2"></script> |
3 - Adicione o style
HTML |
---|
<style>
.changeSelection::selection {
background:rgba(0,0,0,0.2);
}
</style> |
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<div id="divContainer"></div><style> .changeSelection::selection { background:rgba(0,0,0,0.2); } </style> |
3 - Adicione o Javascripta macro HTML (com o código abaixo) na posição onde desejar no documento:
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script> |
HTML |
---|
<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
* {box-sizing: border-box;}
body {font-family: 'Lato', sans-serif !important;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -42px;
color: white !important;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
text-decoration: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
text-decoration: none;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
text-decoration: none;
}
/* Slideshow container */
.slideshow-container {
/*max-width: 1000px;*/
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 35px;
width: 100%;
text-align: center;
background: rgba(0,0,0,.7);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.totvs-skin-wrapper{
font-family: 'Lato', sans-serif !important;
background-color: #000;
padding:10px;
}
.totvs-skin-wrapper-header{
position: relative;
text-align: center;
color: white;
font-size: 20px;
font-family: 'Lato', sans-serif !important;
padding-bottom: 15px;
}
.totvs-skin-wrapper-header img{
position: absolute;
right: 0;
}
.totvs-skin-wrapper-footer{
position: relative;
text-align: center;
color: white;
font-family: 'Lato', sans-serif !important;
padding-top: 10px;
height: 35px;
border-top: 1px solid #000 !important;
}
.totvs-skin-wrapper-footer-input{
width: 50px;
height: 25px;
color: white;
font-family: 'Lato', sans-serif !important;
right: 0;
background: #000;
position: absolute;
text-align: center;
border: 0;
}
.totvs-skin-wrapper-footer-player-container{
width: 100px;
height: 25px;
margin-left: calc((100% / 2) - 50px);
}
.totvs-skin-wrapper-footer-player-container-play{
width: 16px;
height: 16px;
cursor: pointer;
}
.totvs-skin-wrapper-footer-player-container-pause{
width: 16px;
height: 16px;
cursor: pointer;
}
.totvs-skin-wrapper-footer-player-container-stop{
width: 16px;
height: 16px;
cursor: pointer;
padding:2px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
.totvs-skin-wrapper-thumb-container{
padding-top: 10px;
padding-bottom: 10px;
}
.totvs-skin-wrapper-footer-thumb{
position: absolute;
z-index:99;
right: 50px;
width: 16px;
height: 16px;
margin-top: -20px;
cursor: pointer;
}
</style> |
HTML |
---|
<div id="divContainer"></div> |
<div id="myContent"></div> |
HTML |
---|
<div id="myContent"></div> |
TOTVS Carousel
...
Para se utilizar o TOTVS Carousel, alguns passos devem ser utilizados:
1 - Adicione o Style
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<link rel="stylesheet" type="text/css" href="/download/attachments/330843097/TOTVS_Carousel.css?version=1&modificationDate=1521836856000&api=v2"> |
2 - Adicione o Javascript
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Carousel.js?version=5&modificationDate=1521836856000&api=v2"></script> |
3 - Adicione o HTML
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<div id="divContainer"></div> |
4 - Adicione o Script de Chamada
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<script>
var _images = [];
var _imagesSettings1 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-1.png?version=1&modificationDate=1521744577627&api=v2',
Caption: 'Página 1'
}
var _imagesSettings2 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-2.png?version=1&modificationDate=1521744583301&api=v2',
Caption: 'Página 2'
}
var _imagesSettings3 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-3.png?version=1&modificationDate=1521744585793&api=v2',
Caption: 'Página 3'
}
var _imagesSettings4 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-4.png?version=1&modificationDate=1521744587348&api=v2',
Caption: 'Página 4'
}
var _imagesSettings5 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-5.png?version=1&modificationDate=1521744590331&api=v2',
Caption: 'Página 5'
}
var _imagesSettings6 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-6.png?version=1&modificationDate=1521744593147&api=v2',
Caption: 'Página 6'
}
var _imagesSettings7 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-7.png?version=1&modificationDate=1521744596596&api=v2',
Caption: 'Página 7'
}
var _imagesSettings8 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-8.png?version=1&modificationDate=1521744598581&api=v2',
Caption: 'Página 8'
}
var _imagesSettings9 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-9.png?version=1&modificationDate=1521744575616&api=v2',
Caption: 'Página 9'
}
_images.push(_imagesSettings1);
_images.push(_imagesSettings2);
_images.push(_imagesSettings3);
_images.push(_imagesSettings4);
_images.push(_imagesSettings5);
_images.push(_imagesSettings6);
_images.push(_imagesSettings7);
_images.push(_imagesSettings8);
_images.push(_imagesSettings9);
TOTVS_Carousel.Init('Carousel1', 'divContainer', 5000, _images, true, true, true, 'Cache Centralizado', 'black');
TOTVS_Carousel.ShowSlides();
</script> |
HTML |
---|
<div id="divContainer"></div> |
HTML |
---|
<script>
var _images = [];
var _imagesSettings1 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-1.png?version=1&modificationDate=1521744577627&api=v2',
Caption: 'Página 1'
}
var _imagesSettings2 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-2.png?version=1&modificationDate=1521744583301&api=v2',
Caption: 'Página 2'
}
var _imagesSettings3 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-3.png?version=1&modificationDate=1521744585793&api=v2',
Caption: 'Página 3'
}
var _imagesSettings4 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-4.png?version=1&modificationDate=1521744587348&api=v2',
Caption: 'Página 4'
}
var _imagesSettings5 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-5.png?version=1&modificationDate=1521744590331&api=v2',
Caption: 'Página 5'
}
var _imagesSettings6 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-6.png?version=1&modificationDate=1521744593147&api=v2',
Caption: 'Página 6'
}
var _imagesSettings7 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-7.png?version=1&modificationDate=1521744596596&api=v2',
Caption: 'Página 7'
}
var _imagesSettings8 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-8.png?version=1&modificationDate=1521744598581&api=v2',
Caption: 'Página 8'
}
var _imagesSettings9 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-9.png?version=1&modificationDate=1521744575616&api=v2',
Caption: 'Página 9'
}
_images.push(_imagesSettings1);
_images.push(_imagesSettings2);
_images.push(_imagesSettings3);
_images.push(_imagesSettings4);
_images.push(_imagesSettings5);
_images.push(_imagesSettings6);
_images.push(_imagesSettings7);
_images.push(_imagesSettings8);
_images.push(_imagesSettings9);
TOTVS_Carousel.Init('Carousel1', 'divContainer', 5000, _images, true, true, true, 'Cache Centralizado', 'black');
TOTVS_Carousel.ShowSlides();
</script>
|
TOTVS Keywords
...
Para se utilizar o TOTVS Keywords, alguns passos devem ser utilizados:
1 - Adicione o Style
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<link rel="stylesheet" type="text/css" href="/download/attachments/330843097/TOTVS_Keywords.css?version=1&modificationDate=1522346687000&api=v2"> |
2 - Adicione o Javascript
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Keywords.js?version=10&modificationDate=1522346687000&api=v2"></script> |
3 - Adicione o HTML
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<div id="keyWordContainerDiv" style="padding-top: 10px;"></div> |
4 - Adicione o Script de Chamada
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
TOTVS_Keywords.WindowLoad('TOTVS_KeyWord', 'keyWordContainerDiv', null); |
HTML |
---|
<div id="keyWordContainerDiv" style="display:table"></div>
<script>
TOTVS_Keywords.WindowLoad('TOTVS_KeyWord', 'keyWordContainerDiv', null);
</script> |
TOTVS TDN Document New Model
...
Para se utilizar o TOTVS TDN Document New Model, alguns passos devem ser utilizados:
1 - Adicione o Style
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<link rel="stylesheet" type="text/css" href="/download/attachments/330843097/TOTVS_TDNNewModel.css?version=2&modificationDate=1522686091289&api=v2"> |
2 - Adicione o Javascript
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_TDNNewModel.js?version=2&modificationDate=1522686091726&api=v2"></script> |
3 - Adicione o HTML
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<div id="newModelContent" style="width:100%; height: 100%;"></div> |
4 - Adicione o Script de Chamada
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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');
} |
HTML |
---|
<iframe style="width:100%;height: 1000px; border: 0" id="external-page-frame" src="http://tdn.totvs.com/display/LRM/New+Model"></iframe> |
TOTVS TDN API DOC
...
HTML |
---|
<iframe style="width:100%;height: 1000px; border: 0" id="external-page-frame" src="http://tdn.totvs.com/display/LRM/Exemplo+TotvsApiDoc"></iframe> |
HTML |
<script>
TOTVS_Carousel = {
Id: "Carousel1",
Container: "divContainer",
Time: 0,
SlideIndex: 0,
Thumbs: false,
Images: [],
Auto: false,
UseTotvsSkin: false,
HeaderText: '',
AutoTimeOut: null,
ArrowColor: 'white',
Init: function(id, nameOfContainer, time, images, auto, thumbs, useTotvsSkin, headerText, arrowColor){
this.Id = id;
this.Time = time;
this.Container = (typeof nameOfContainer === "string") ? document.getElementById(nameOfContainer) : nameOfContainer;
this.Images = images;
this.Auto = auto;
this.Thumbs = thumbs;
this.UseTotvsSkin = useTotvsSkin;
this.HeaderText = headerText;
this.ArrowColor = arrowColor;
this.Build();
},
Build: function(){
if(this.Container){
if(this.UseTotvsSkin){
this.Auto = false;
var _divWrapperTotvsSkin = document.createElement('div');
_divWrapperTotvsSkin.id = this.Id + "_Wrapper";
_divWrapperTotvsSkin.className = 'totvs-skin-wrapper';
var _divWrapperTotvsSkinHeader = document.createElement('div');
_divWrapperTotvsSkinHeader.id = this.Id + "_WrapperHeader";
_divWrapperTotvsSkinHeader.className = 'totvs-skin-wrapper-header';
_divWrapperTotvsSkinHeader.innerHTML = this.HeaderText;
var _divWrapperTotvsSkinHeaderImg = document.createElement('img');
_divWrapperTotvsSkinHeaderImg .id = this.Id + "_WrapperHeaderImg";
_divWrapperTotvsSkinHeaderImg .name = _divWrapperTotvsSkinHeaderImg .id;
_divWrapperTotvsSkinHeaderImg .src = '/download/attachments/330843097/totvs_icon.png?version=3&modificationDate=1521732225403&api=v2'
_divWrapperTotvsSkinHeader.appendChild(_divWrapperTotvsSkinHeaderImg);
_divWrapperTotvsSkin.appendChild(_divWrapperTotvsSkinHeader);
}
var _divWrapper = document.createElement('div');
_divWrapper.id = this.Id + "_Wrapper";
_divWrapper.className = 'slideshow-container';
if(this.Images != null && this.Images != undefined && this.Images.length > 0){
for(var i = 0; i < this.Images.length; i++){
var _divWrapperImages = document.createElement('div');
_divWrapperImages.id = this.Id + "_WrapperImage_" + (i+1);
_divWrapperImages.className = 'mySlides fade';
var _divWrapperImagesUpperText = document.createElement('div');
_divWrapperImagesUpperText.id = this.Id + "_WrapperImage_" + (i+1) + "_UpperText";
_divWrapperImagesUpperText.className = 'numbertext';
_divWrapperImagesUpperText.innerHTML = (i+1) + " / " + this.Images.length;
if(this.UseTotvsSkin){
_divWrapperImagesUpperText.style.display = 'none';
}
_divWrapperImages.appendChild(_divWrapperImagesUpperText);
var _divWrapperImagesImg = document.createElement('img');
_divWrapperImagesImg.id = this.Id + "_WrapperImage_" + (i+1) + "_Img";
_divWrapperImagesImg.name = _divWrapperImagesImg.id;
_divWrapperImagesImg.style.width = '100%';
_divWrapperImagesImg.src = this.Images[i].Url;
_divWrapperImages.appendChild(_divWrapperImagesImg);
var _divWrapperImagesCaptionText = document.createElement('div');
_divWrapperImagesCaptionText.id = this.Id + "_WrapperImage_" + (i+1) + "_CaptionText";
_divWrapperImagesCaptionText.className = 'text';
_divWrapperImagesCaptionText.innerHTML = this.Images[i].Caption;
if(this.UseTotvsSkin && this.Thumbs){
_divWrapperImagesCaptionText.style.display = 'none';
}
_divWrapperImages.appendChild(_divWrapperImagesCaptionText);
_divWrapper.appendChild(_divWrapperImages);
}
if(!this.Auto || this.UseTotvsSkin){
var _divWrapperNext = document.createElement('a');
_divWrapperNext.id = this.Id + "_WrapperNext";
_divWrapperNext.className = 'next';
_divWrapperNext.innerHTML = '❯'
_divWrapperNext.style.setProperty( 'color', this.ArrowColor, 'important' );
_divWrapperNext.onclick = function() { TOTVS_Carousel.PlusSlides(1); }
_divWrapperNext.onmouseover = function(){
this.style.setProperty('color', 'white', 'important');
}
_divWrapperNext.onmouseout = function(){
this.style.setProperty('color', TOTVS_Carousel.ArrowColor , 'important');
}
_divWrapper.appendChild(_divWrapperNext);
var _divWrapperPrev = document.createElement('a');
_divWrapperPrev.id = this.Id + "_WrapperPrev";
_divWrapperPrev.className = 'prev';
_divWrapperPrev.innerHTML = '❮'
_divWrapperPrev.style.setProperty( 'color', this.ArrowColor, 'important' );
_divWrapperPrev.onclick = function() { TOTVS_Carousel.PlusSlides(-1); }
_divWrapperPrev.onmouseover = function(){
this.style.setProperty('color', 'white', 'important');
}
_divWrapperPrev.onmouseout = function(){
this.style.setProperty('color', TOTVS_Carousel.ArrowColor , 'important');
}
_divWrapper.appendChild(_divWrapperPrev);
}
if(!this.Thumbs && !this.UseTotvsSkin){
var _divWrapperDots = document.createElement('div');
_divWrapperDots.id = this.Id + "_WrapperDotsWrapper";
_divWrapperDots.style.textAlign = 'center';
for(var i = 0; i < this.Images.length; i++){
var _divWrapperDotsSpans = document.createElement('span');
_divWrapperDotsSpans.id = this.Id + "_WrapperDotsWrapper_" + (i+1) + "_Span";
_divWrapperDotsSpans.name = _divWrapperDotsSpans.id;
_divWrapperDotsSpans.className = 'dot';
if(!this.Auto){
_divWrapperDotsSpans.onclick = function() {
if(!TOTVS_Carousel.Auto){
var _index = 0;
var _left = this.id.substring(this.id.indexOf('_WrapperDotsWrapper_') + '_WrapperDotsWrapper_'.length);
if(_left.length > 0)
_left = _left.replace('_Span', '');
TOTVS_Carousel.CurrentSlide(_left);
}
};
}
_divWrapperDots.appendChild(_divWrapperDotsSpans);
}
_divWrapperDots.style.marginTop = '15px';
_divWrapper.appendChild(_divWrapperDots);
}
if(this.Thumbs){
var _divWrapperThumbContainer = document.createElement('div');
_divWrapperThumbContainer.id = this.Id + "_WrapperThumbContainer";
_divWrapperThumbContainer.className = 'totvs-skin-wrapper-thumb-container';
if(this.UseTotvsSkin)
_divWrapperThumbContainer.style.display = 'none';
var _divWrapperThumbContainerRow = document.createElement('div');
_divWrapperThumbContainerRow .id = this.Id + "_WrapperThumbContainerRow";
_divWrapperThumbContainerRow .className = 'row';
_divWrapperThumbContainer.appendChild(_divWrapperThumbContainerRow);
for(var i = 0; i < this.Images.length; i++){
var _divWrapperThumbContainerRowColumn = document.createElement('div');
_divWrapperThumbContainerRowColumn.id = this.Id + "_WrapperThumbContainerRowColumn" + "_" + (i+1);
_divWrapperThumbContainerRowColumn.className = 'column';
var _divWrapperThumbContainerRowColumnImg = document.createElement('img');
_divWrapperThumbContainerRowColumnImg.id = this.Id + "_WrapperThumbContainerRowColumn_" + (i+1) + "_Img";
_divWrapperThumbContainerRowColumnImg.name = _divWrapperThumbContainerRowColumnImg.id;
_divWrapperThumbContainerRowColumnImg.className = 'demo';
_divWrapperThumbContainerRowColumnImg.style.cursor = 'pointer';
_divWrapperThumbContainerRowColumnImg.style.width = '100%';
_divWrapperThumbContainerRowColumnImg.src = this.Images[i].Url;
if(!this.Auto){
_divWrapperThumbContainerRowColumnImg.onclick = function() {
if(!TOTVS_Carousel.Auto){
var _index = 0;
var _left = this.id.substring(this.id.indexOf('_WrapperThumbContainerRowColumn_') + '_WrapperThumbContainerRowColumn_'.length);
if(_left.length > 0)
_left = _left.replace('_Img', '');
TOTVS_Carousel.CurrentSlide(_left);
}
};
}
_divWrapperThumbContainerRowColumn.appendChild(_divWrapperThumbContainerRowColumnImg);
_divWrapperThumbContainerRow.appendChild(_divWrapperThumbContainerRowColumn);
}
_divWrapper.appendChild(_divWrapperThumbContainer);
}
}
if(this.UseTotvsSkin){
var _divWrapperFooter = document.createElement('div');
_divWrapperFooter .id = this.Id + "_WrapperFooter";
_divWrapperFooter .className = 'totvs-skin-wrapper-footer';
_divWrapper.appendChild(_divWrapperFooter);
var _divWrapperFooterInput = document.createElement('input');
_divWrapperFooterInput.id = this.Id + "_WrapperFooterInput";
_divWrapperFooterInput.name = _divWrapperFooterInput.id;
_divWrapperFooterInput.type = 'text';
_divWrapperFooterInput.className = 'totvs-skin-wrapper-footer-input';
_divWrapperFooterInput.value = '1/3';
_divWrapperFooterInput.readOnly = '';
_divWrapperFooterInput.onblur = function(){
var text = (this.value != null) ? this.value.replace(/\/\d/,'') : this.SlideIndex.toString();
TOTVS_Carousel.SlideIndex = parseInt(text);
TOTVS_Carousel.ShowSlides(TOTVS_Carousel.SlideIndex);
}
_divWrapperFooter.appendChild(_divWrapperFooterInput);
var _divWrapperFooterPlayerContainer = document.createElement('div');
_divWrapperFooterPlayerContainer.id = this.Id + "_WrapperFooterPlayerContainer";
_divWrapperFooterPlayerContainer.className = 'totvs-skin-wrapper-footer-player-container';
_divWrapperFooter.appendChild(_divWrapperFooterPlayerContainer);
if(this.Thumbs){
var _divWrapperFooterThumb = document.createElement('img');
_divWrapperFooterThumb.id = this.Id + "_WrapperFooterThumb";
_divWrapperFooterThumb.name = _divWrapperFooterThumb.id;
_divWrapperFooterThumb.className = 'totvs-skin-wrapper-footer-thumb';
_divWrapperFooterThumb.src = '/download/attachments/330843097/thumbs.png?version=1&modificationDate=1521831961741&api=v2';
_divWrapperFooterThumb.onclick = function(){
if(document.getElementById(this.id.replace("_WrapperFooterThumb", "_WrapperThumbContainer")).style.display == 'none'){
document.getElementById(this.id.replace("_WrapperFooterThumb", "_WrapperThumbContainer")).style.display = '';
document.getElementById(this.id.replace("_WrapperFooterThumb", "_WrapperFooter")).style.setProperty('border-top', '1px solid #fff', 'important');
}
else{
document.getElementById(this.id.replace("_WrapperFooterThumb", "_WrapperThumbContainer")).style.display = 'none';
document.getElementById(this.id.replace("_WrapperFooterThumb", "_WrapperFooter")).style.setProperty('border-top', '1px solid #000', 'important');
}
}
_divWrapperFooter.appendChild(_divWrapperFooterThumb);
}
var _divWrapperFooterPlayerContainerPlay = document.createElement('img');
_divWrapperFooterPlayerContainerPlay.id = this.Id + "_WrapperFooterPlayerContainerPlayImg";
_divWrapperFooterPlayerContainerPlay.name = _divWrapperFooterPlayerContainerPlay.id;
_divWrapperFooterPlayerContainerPlay.className = 'totvs-skin-wrapper-footer-player-container-play';
_divWrapperFooterPlayerContainerPlay.src = '/download/thumbnails/330843097/play-button.png?version=1&modificationDate=1521735312000&api=v2';
_divWrapperFooterPlayerContainerPlay.onclick = function(){
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerPlayImg", "_WrapperNext")).style.display = 'none';
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerPlayImg", "_WrapperPrev")).style.display = 'none';
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerPlayImg", "_WrapperFooterInput")).readOnly = 'readonly';
var thumbs = document.getElementsByClassName('demo');
for(var i = 0; i < thumbs.length; i++){
thumbs[i].style.cursor = 'default';
}
TOTVS_Carousel.Auto = true;
TOTVS_Carousel.SlideIndex -= 1;
TOTVS_Carousel.SlideIndex = (TOTVS_Carousel.SlideIndex < 0) ? 0 : TOTVS_Carousel.SlideIndex;
TOTVS_Carousel.ShowSlides();
this.style.display = 'none';
document.getElementById(this.id.replace("PlayImg", "PauseImg")).style.display = '';
document.getElementById(this.id.replace("PlayImg", "PauseImg")).style.marginRight = '10px';
document.getElementById(this.id.replace("PlayImg", "StopImg")).style.display = '';
}
_divWrapperFooterPlayerContainer.appendChild(_divWrapperFooterPlayerContainerPlay);
var _divWrapperFooterPlayerContainerPause = document.createElement('img');
_divWrapperFooterPlayerContainerPause.id = this.Id + "_WrapperFooterPlayerContainerPauseImg";
_divWrapperFooterPlayerContainerPause.name = _divWrapperFooterPlayerContainerPause.id;
_divWrapperFooterPlayerContainerPause.className = 'totvs-skin-wrapper-footer-player-container-pause';
_divWrapperFooterPlayerContainerPause.style.display = 'none';
_divWrapperFooterPlayerContainerPause.src = '/download/thumbnails/330843097/pause-sign.png?version=1&modificationDate=1521735312000&api=v2';
_divWrapperFooterPlayerContainerPause.onclick = function(){
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerPauseImg", "_WrapperNext")).style.display = 'none';
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerPauseImg", "_WrapperPrev")).style.display = 'none';
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerPauseImg", "_WrapperFooterInput")).readOnly = 'readonly';
var thumbs = document.getElementsByClassName('demo');
for(var i = 0; i < thumbs.length; i++){
thumbs[i].style.cursor = 'default';
}
TOTVS_Carousel.Auto = false;
TOTVS_Carousel.ShowSlides(TOTVS_Carousel.SlideIndex);
this.style.display = 'none';
this.style.marginRight = '0px';
document.getElementById(this.id.replace("PauseImg", "PlayImg")).style.display = '';
document.getElementById(this.id.replace("PauseImg", "PlayImg")).style.marginRight = '10px';
document.getElementById(this.id.replace("PauseImg", "StopImg")).style.display = '';
}
_divWrapperFooterPlayerContainer.appendChild(_divWrapperFooterPlayerContainerPause);
var _divWrapperFooterPlayerContainerStop = document.createElement('img');
_divWrapperFooterPlayerContainerStop.id = this.Id + "_WrapperFooterPlayerContainerStopImg";
_divWrapperFooterPlayerContainerStop.name = _divWrapperFooterPlayerContainerStop.id;
_divWrapperFooterPlayerContainerStop.className = 'totvs-skin-wrapper-footer-player-container-stop';
_divWrapperFooterPlayerContainerStop.style.display = 'none';
_divWrapperFooterPlayerContainerStop.src = '/download/attachments/330843097/stop-button.png?version=2&modificationDate=1521738581119&api=v2';
_divWrapperFooterPlayerContainerStop.onclick = function(){
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerStopImg", "_WrapperNext")).style.display = '';
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerStopImg", "_WrapperPrev")).style.display = '';
var thumbs = document.getElementsByClassName('demo');
for(var i = 0; i < thumbs.length; i++){
thumbs[i].style.cursor = 'pointer';
}
document.getElementById(this.id.replace("_WrapperFooterPlayerContainerStopImg", "_WrapperFooterInput")).readOnly = '';
TOTVS_Carousel.Auto = false;
TOTVS_Carousel.SlideIndex = 1;
TOTVS_Carousel.ShowSlides(TOTVS_Carousel.SlideIndex);
this.style.display = 'none';
document.getElementById(this.id.replace("StopImg", "PauseImg")).style.display = 'none';
document.getElementById(this.id.replace("StopImg", "PlayImg")).style.display = '';
document.getElementById(this.id.replace("StopImg", "PlayImg")).style.marginRight = '0px';
}
_divWrapperFooterPlayerContainer.appendChild(_divWrapperFooterPlayerContainerStop);
_divWrapperTotvsSkin.appendChild(_divWrapper);
this.Container.appendChild(_divWrapperTotvsSkin);
}
else
this.Container.appendChild(_divWrapper);
}
},
PlusSlides(n) {
this.ShowSlides(this.SlideIndex += n);
},
CurrentSlide(n) {
this.ShowSlides(this.SlideIndex = n);
},
ShowSlides: function(n){
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var thumbs = document.getElementsByClassName("demo");
if(this.Auto){
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
this.SlideIndex++;
if (this.SlideIndex > slides.length) {this.SlideIndex = 1}
if(this.UseTotvsSkin){
var currentSlideIndex = (this.SlideIndex <= 0 || this.SlideIndex > slides.length) ? 1 : this.SlideIndex;
document.getElementById(this.Id + "_WrapperFooterInput").value = currentSlideIndex + "/" + slides.length;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
for (i = 0; i < thumbs.length; i++) {
thumbs[i].className = thumbs[i].className.replace(" active", "");
}
slides[this.SlideIndex-1].style.display = "block";
if(!this.UseTotvsSkin)
dots[this.SlideIndex-1].className += " active";
else{
if(this.Thumbs)
thumbs[this.SlideIndex-1].className += " active";
}
this.AutoTimeOut = setTimeout('TOTVS_Carousel.ShowSlides()', this.Time); // Change image every 2 seconds
}
else{
if(this.AutoTimeOut != null)
clearTimeout(this.AutoTimeOut);
if(this.UseTotvsSkin){
var currentSlideIndex = (this.SlideIndex <= 0 || this.SlideIndex > slides.length) ? 1 : this.SlideIndex;
document.getElementById(this.Id + "_WrapperFooterInput").value = currentSlideIndex + "/" + slides.length;
}
if (n == undefined || n == null) {n = 1; this.SlideIndex = 1; }
if (n > slides.length) {this.SlideIndex = 1}
if (n < 1) {this.SlideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
for (i = 0; i < thumbs.length; i++) {
thumbs[i].className = thumbs[i].className.replace(" active", "");
}
slides[this.SlideIndex-1].style.display = "block";
if(!this.UseTotvsSkin)
dots[this.SlideIndex-1].className += " active";
else{
if(this.Thumbs)
thumbs[this.SlideIndex-1].className += " active";
}
}
}
}
var _images = [];
var _imagesSettings1 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-1.png?version=1&modificationDate=1521744577627&api=v2',
Caption: 'Página 1'
}
var _imagesSettings2 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-2.png?version=1&modificationDate=1521744583301&api=v2',
Caption: 'Página 2'
}
var _imagesSettings3 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-3.png?version=1&modificationDate=1521744585793&api=v2',
Caption: 'Página 3'
}
var _imagesSettings4 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-4.png?version=1&modificationDate=1521744587348&api=v2',
Caption: 'Página 4'
}
var _imagesSettings5 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-5.png?version=1&modificationDate=1521744590331&api=v2',
Caption: 'Página 5'
}
var _imagesSettings6 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-6.png?version=1&modificationDate=1521744593147&api=v2',
Caption: 'Página 6'
}
var _imagesSettings7 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-7.png?version=1&modificationDate=1521744596596&api=v2',
Caption: 'Página 7'
}
var _imagesSettings8 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-8.png?version=1&modificationDate=1521744598581&api=v2',
Caption: 'Página 8'
}
var _imagesSettings9 = {
Url: '/download/attachments/330843097/TOTVS%20RM%20-Configura%C3%A7%C3%A3o%20Servi%C3%A7o%20de%20Cache%20Centralizado-9.png?version=1&modificationDate=1521744575616&api=v2',
Caption: 'Página 9'
}
_images.push(_imagesSettings1);
_images.push(_imagesSettings2);
_images.push(_imagesSettings3);
_images.push(_imagesSettings4);
_images.push(_imagesSettings5);
_images.push(_imagesSettings6);
_images.push(_imagesSettings7);
_images.push(_imagesSettings8);
_images.push(_imagesSettings9);
TOTVS_Carousel.Init('Carousel1', 'divContainer', 5000, _images, true, true, true, 'Cache Centralizado', 'black');
TOTVS_Carousel.ShowSlides();
</script>
|