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>
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_DocumentSearcher.js?version=15&modificationDate=1521838432570&api=v2"></script>
<link rel="stylesheet"<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Keywords.js?version=10&modificationDate=1522346687000&api=v2"></script>
<script type="text/cssjavascript" hrefsrc="/download/attachments/330843097/TOTVS_CarouselTDNNewModel.cssjs?version=1&modificationDate=15218368560001522686091726&api=v2">></script>
<link rel="stylesheet" type="text/css" href="/download/attachments/347442711330843097/TOTVS_AccordionCarousel.css?version=1&modificationDate=15218267900001521836856000&api=v2"> |
TOTVS Accordion
Para se utilizar o TOTVS Accordion, alguns passos devem ser utilizados:
1 - Adicione os Scripts
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | script |
---|
linenumbers | true |
---|
|
<script
<link rel="stylesheet" type="text/javascriptcss" srchref="/download/attachments/347442711/TOTVS_Accordion.mutate.jscss?version=110&modificationDate=15218270270001521826790000&api=v2"></script>
<script>
<link rel="stylesheet" type="text/javascriptcss" srchref="/download/attachments/347442711330843097/TOTVS_AccordionKeywords.jscss?version=12&modificationDate=15218272110001522346687000&api=v2"></script> |
2 - Adicione os CSSs
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | css |
---|
linenumbers | true |
---|
|
>
<link rel="stylesheet" type="text/css" href="/download/attachments/347442711330843097/TOTVS_AccordionTDNNewModel.css?version=1&modificationDate=15218267900001522686091289&api=v2"> |
html |
TOTVS Accordion
...
Para se utilizar o TOTVS Accordion, alguns passos devem ser utilizados:
1 - Adicione os Scripts
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | script |
---|
linenumbers | true |
---|
|
<script type="text/javascript">
Totvs 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 |
---|
language | xml |
---|
firstline | 1 |
---|
title | css |
---|
linenumbers | true |
---|
|
<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= {
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)){this.Id = "CollapsiblePanel1";
if(optCollapsiblePanel.Id != null && optCollapsiblePanel.Id != undefined && optCollapsiblePanel.Id != "")
this.ElementToAttach = window.body;
this.TitleMark = "titlemark";
this.IdTitle = optCollapsiblePanel.Id"";
this.TitleImageUrl = "";
this.Groups = [];
this.LoadComponents = function(optCollapsiblePanel){
if(optCollapsiblePanel.ElementToAttach != null && optCollapsiblePanel.ElementToAttach != undefined)
this.ElementToAttach = optCollapsiblePanel.ElementToAttach;
&& !$.isEmptyObject(optCollapsiblePanel)){
if(optCollapsiblePanel.TitleId != null && optCollapsiblePanel.TitleId != undefined && optCollapsiblePanel.TitleId != "")
this.TitleId = optCollapsiblePanel.TitleId;
if(optCollapsiblePanel.TitleMarkElementToAttach != null && optCollapsiblePanel.TitleMarkElementToAttach != undefined && optCollapsiblePanel.TitleMark != "")
this.TitleMarkElementToAttach = optCollapsiblePanel.TitleMark.replace("<").replace(">")ElementToAttach;
if(optCollapsiblePanel.TitleImageUrlTitle != null && optCollapsiblePanel.TitleImageUrlTitle != undefined && optCollapsiblePanel.TitleImageUrlTitle != "")
this.TitleImageUrlTitle = optCollapsiblePanel.TitleImageUrlTitle;
if(optCollapsiblePanel.GroupsTitleMark != null && optCollapsiblePanel.GroupsTitleMark != undefined && optCollapsiblePanel.TitleMark != "")
this.GroupsTitleMark = optCollapsiblePanel.Groups ;
}
var ElementCollapsiblePanel = document.createElement('div');
.TitleMark.replace("<").replace(">");
ElementCollapsiblePanel.id = this.Id + "_OuterDiv";
ElementCollapsiblePanel.name = this.Id + "_OuterDiv";
ElementCollapsiblePanel.className = "outerDiv";
if(optCollapsiblePanel.TitleImageUrl != null && optCollapsiblePanel.TitleImageUrl != undefined && optCollapsiblePanel.TitleImageUrl != "")
this.TitleImageUrl = optCollapsiblePanel.TitleImageUrl;
if(optCollapsiblePanel.Groups != null && optCollapsiblePanel.Groups != undefined)
this.Groups = optCollapsiblePanel.Groups ;
}
var ElementCollapsiblePanelWrapperElementCollapsiblePanel = document.createElement('div');
ElementCollapsiblePanelWrapperElementCollapsiblePanel.id = this.Id + "_OuterDivWrapperOuterDiv";
ElementCollapsiblePanelWrapperElementCollapsiblePanel.name = this.Id + "_OuterDivWrapperOuterDiv";
ElementCollapsiblePanel.className = "outerDiv";
var ElementCollapsiblePanelWrapper = document.createElement('div');
ElementCollapsiblePanelWrapper.id = this.Id + "_OuterDivWrapper";
ElementCollapsiblePanelWrapper.name = this.Id + "_OuterDivWrapper";
ElementCollapsiblePanelWrapper.className = "outerDivWrapper";
if(this.Title != null && this.Title != undefined && this.Title != ""){
if(this.TitleImageUrl != null && this.TitleImageUrl != undefined && this.TitleImageUrl != ""){
var ElementCollapsiblePanelWrapperTitleSpan = document.createElement('span');
ElementCollapsiblePanelWrapperTitleSpan.id = this.Id + "_OuterDivWrapperTitleSpan";
ElementCollapsiblePanelWrapperTitleSpan.name = this.Id + "_OuterDivWrapperTitleSpan";
ElementCollapsiblePanelWrapperTitleSpan.className = "outerDivWrapperTitleSpan";
var ElementCollapsiblePanelWrapperTitleSpanImg = document.createElement('img');
ElementCollapsiblePanelWrapperTitleSpanImg.id = this.Id + "_OuterDivWrapperTitleSpanImg";
ElementCollapsiblePanelWrapperTitleSpanImg.name = this.Id + "_OuterDivWrapperTitleSpanImg";
ElementCollapsiblePanelWrapperTitleSpanImg.className = "outerDivWrapperTitleSpanImg";
ElementCollapsiblePanelWrapperTitleSpanImg.src = this.TitleImageUrl;
ElementCollapsiblePanelWrapperTitleSpan.appendChild(ElementCollapsiblePanelWrapperTitleSpanImg);
var ElementCollapsiblePanelWrapperTitleSpanText = document.createElement('span');
ElementCollapsiblePanelWrapperTitleSpanText .id = this.Id + "_OuterDivWrapperTitleSpanText";
ElementCollapsiblePanelWrapperTitleSpanText .name = this.Id + "_OuterDivWrapperTitleSpanText";
ElementCollapsiblePanelWrapperTitleSpanText .className = "outerDivWrapperTitleSpanText";
ElementCollapsiblePanelWrapperTitleSpanText.innerHTML = this.Title;
ElementCollapsiblePanelWrapper.appendChild(ElementCollapsiblePanelWrapperTitleSpan);
ElementCollapsiblePanelWrapper.appendChild(ElementCollapsiblePanelWrapperTitleSpanText);
}
else
ElementCollapsiblePanelWrapper.innerHTML = this.Title;
}
else{
if($(window.document).find(this.TitleMark).length > 0)
ElementCollapsiblePanelWrapper.innerHTML = $(window.document).find(this.TitleMark)[0].innerHTML;
}
ElementCollapsiblePanel.appendChild(ElementCollapsiblePanelWrapper);
for(var i = 0; i < this.Groups.length; i++){
ElementCollapsiblePanel.appendChild(this.Groups[i]);
if(this.Groups.length > 1 && i < this.Groups.length - 1){
var _paddingDiv = document.createElement("div");
_paddingDiv.className = "paddingDiv";
ElementCollapsiblePanel.appendChild(_paddingDiv);
}
}
if(typeof this.ElementToAttach === "string")
this.ElementToAttach = document.getElementById(this.ElementToAttach);
this.ElementToAttach.appendChild(ElementCollapsiblePanel);
return this;
}
return this.LoadComponents(optCollapsiblePanel);
}
return new oCollapsiblePanel(optCollapsiblePanel);
},
CollapsiblePanelGroup: function(optCollapsiblePanelGroup){
var oCollapsiblePanelGroup = function(optCollapsiblePanelGroup){
this.Id = "CollapsiblePanelGroup1";
this.Parent = null;
this.GroupTitleMark = "grouptitlemark{0}"
this.GroupTitle = "";
this.GrouptTitleImageUrl = "";
this.LoadComponents = function(optCollapsiblePanelGroup){
if(optCollapsiblePanelGroup!= null && optCollapsiblePanelGroup!= undefined && !$.isEmptyObject(optCollapsiblePanelGroup)){
if(optCollapsiblePanelGroup.GroupTitle != null && optCollapsiblePanelGroup.GroupTitle != undefined && optCollapsiblePanelGroup.GroupTitle != "")
this.GroupTitle = optCollapsiblePanelGroup.GroupTitle;
if(optCollapsiblePanelGroup.GroupTitleImageUrl!= null && optCollapsiblePanelGroup.GroupTitleImageUrl != undefined && optCollapsiblePanelGroup.GroupTitleImageUrl!= "")
this.GroupTitleImageUrl = optCollapsiblePanelGroup.GroupTitleImageUrl;
if(optCollapsiblePanelGroup.GroupTitleMark != null && optCollapsiblePanelGroup.GroupTitleMark != undefined && optCollapsiblePanelGroup.GroupTitleMark != "")
this.GroupTitleMark = optCollapsiblePanelGroup.GroupTitleMark.replace("<").replace(">");
}
var ElementCollapsiblePanelGroup = document.createElement('div');
ElementCollapsiblePanelGroup.id = this.Id + "_GroupOuterDiv";
ElementCollapsiblePanelGroup.name = this.Id + "_GroupOuterDiv";
ElementCollapsiblePanelGroup.className = "groupOuterDiv";
var ElementCollapsiblePanelGroupWrapper = document.createElement('div');
ElementCollapsiblePanelGroupWrapper.id = this.Id + "_GroupOuterDivWrapper";
ElementCollapsiblePanelGroupWrapper.name = this.Id + "_GroupOuterDivWrapper";
ElementCollapsiblePanelGroupWrapper.className = "groupOuterDivWrapper";
if(this.GroupTitle != null && this.GroupTitle != undefined && this.GroupTitle != ""){
if(this.GroupTitleImageUrl != null && this.GroupTitleImageUrl != undefined && this.GroupTitleImageUrl != ""){
var ElementCollapsiblePanelGroupWrapperTitleSpan = document.createElement('span');
ElementCollapsiblePanelGroupWrapperTitleSpan.id = this.Id + "_GroupOuterDivWrapperTitleSpan";
ElementCollapsiblePanelGroupWrapperTitleSpan.name = this.Id + "_GroupOuterDivWrapperTitleSpan";
ElementCollapsiblePanelGroupWrapperTitleSpan.className = "groupOuterDivWrapperTitleSpan";
var ElementCollapsiblePanelGroupWrapperTitleSpanImg = document.createElement('img');
ElementCollapsiblePanelGroupWrapperTitleSpanImg.id = this.Id + "_GroupOuterDivWrapperTitleSpanImg";
ElementCollapsiblePanelGroupWrapperTitleSpanImg.name = this.Id + "_GroupOuterDivWrapperTitleSpanImg";
ElementCollapsiblePanelGroupWrapperTitleSpanImg.className = "outerDivWrapperTitleSpanImg";
ElementCollapsiblePanelGroupWrapperTitleSpanImg.src = this.GroupTitleImageUrl;
ElementCollapsiblePanelGroupWrapperTitleSpan.appendChild(ElementCollapsiblePanelGroupWrapperTitleSpanImg);
var ElementCollapsiblePanelGroupWrapperTitleSpanText = document.createElement('span');
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 |
---|
language | js |
---|
firstline | 1 |
---|
title | Totvs.CollapsiblePanel Chamada |
---|
linenumbers | true |
---|
collapse | true |
---|
|
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.CollapsiblePanelAccordion(optCollapsiblePanel1);
</script>
<div id="divContent"><div>></div> |
Bloco de código |
---|
language | js |
---|
firstline | 1 |
---|
title | Totvs.CollapsiblePanel Chamada |
---|
linenumbers | true |
---|
collapse | true |
---|
|
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);
optCollapsiblePanel1optAccordion1 = {
ElementToAttach: "divContentdivAccordion",
Groups: _groups,
TitleImageUrl: "/download/attachments/309398329/transfer3.png?version=2&modificationDate=1509366835358&api=v2",
Title: "Título de Teste"
}
var _collapsiblePanel1 = Totvs.CollapsiblePanelAccordion(optCollapsiblePanel1optAccordion1);
</script>
<div id="divContent"><div> |
TDN TDN Document Searcher
...
Para se utilizar o TDN Document Searcher, alguns passos devem ser utilizados:
...
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | script |
---|
linenumbers | true |
---|
|
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_DocumentSearcher.js?version=15&modificationDate=1521838432570&api=v2"></script> |
...
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | script |
---|
linenumbers | true |
---|
collapse | true |
---|
|
<style>
.changeSelection::selection {
background:rgba(0,0,0,0.2);
}
</style> |
...
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | htmlscript |
---|
linenumbers | true |
---|
|
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Carousel.js?version=25&modificationDate=1521836856000&api=v2"></script> |
...
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | scripthtml |
---|
linenumbers | true |
---|
|
<div id="divContainer"></div> |
...
Para se utilizar o TOTVS Keywords, alguns passos devem ser utilizados:
1 - Adicione o Style
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | style |
---|
linenumbers | true |
---|
|
<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 |
---|
language | xml |
---|
firstline | 1 |
---|
title | script |
---|
linenumbers | true |
---|
|
<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 |
---|
language | xml |
---|
firstline | 1 |
---|
title | html |
---|
linenumbers | true |
---|
|
<div id="keyWordContainerDiv" style="padding-top: 10px;"></div> |
4 - Adicione o Script de Chamada
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | script chamada |
---|
linenumbers | true |
---|
|
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 |
---|
language | xml |
---|
firstline | 1 |
---|
title | style |
---|
linenumbers | true |
---|
|
<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 |
---|
language | xml |
---|
firstline | 1 |
---|
title | script |
---|
linenumbers | true |
---|
|
<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 |
---|
language | xml |
---|
firstline | 1 |
---|
title | html |
---|
linenumbers | true |
---|
|
<div id="newModelContent" style="width:100%; height: 100%;"></div> |
4 - Adicione o Script de Chamada
Bloco de código |
---|
language | xml |
---|
firstline | 1 |
---|
title | script chamada |
---|
linenumbers | true |
---|
|
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 |
---|
<div id="keyWordContainerDiv"></div>
<style>
.Keyword-Container-Wrapper{
width: 100%;
height: auto;
min-height: 30px;
}
.Keyword-Container-Wrapper-Span{
padding: 5px;
background-color: #3572b0;
color: #fff;
}
</style>
<script>
TOTVS_Keywords = {
Id: 'KeyWord1',
Container: null,
Tags: [],
Init: function(id, nameOfContainer, tags){
this.Id = id;
this.Container = nameOfContainer;
this.Tags = tags;
},
Build: function(id, nameOfContainer, tags){
this.Init(id, nameOfContainer, tags);
this.Container = (typeof this.Container === "string") ? document.getElementById(this.Container) : this.Container;
var _keyWordContainerWrapper = document.createElement('div');
_keyWordContainerWrapper.id = this.Id + "_ContainerWrapper";
_keyWordContainerWrapper.className = "Keyword-Container-Wrapper";
var _keyWordContainerWrapperInput = document.createElement('input');
_keyWordContainerWrapperInput.id = _keyWordContainerWrapper.id + "_Input";
_keyWordContainerWrapperInput.name = _keyWordContainerWrapperInput.id;
_keyWordContainerWrapperInput.type = "text";
_keyWordContainerWrapperInput.onkeypress = function(e){
var _evt = e || window.event;
if (event.which == 13 || event.keyCode == 13) {
TOTVS_Keywords.Tags.push(this.value);
var _span = document.createElement('span');
this.parentNode.insertBefore(_span, this);
return false;
}
}
_keyWordContainerWrapper.appendChild(_keyWordContainerWrapperInput);
this.Container.appendChild(_keyWordContainerWrapper);
}
}
TOTVS_Keywords.Build('TOTVS_KeyWord', 'keyWordContainerDiv', [])
</script> |