HTML
<script

Modificação Alertas

Para modificar os alertas originais do TDN, basta acrescentar um macro de HTML e adicionar os códigos abaixo, envoltos da TAG STYLE:

Bloco de código

language	xml
firstline	1
title	Tag Style
linenumbers	true

<style type="text/css">
/*Exemplos abaixo:*/
</style>

1 - Info

Modificações:

...

javascript" src="/download/attachments/330843097/TOTVS_Carousel.js?version=5&modificationDate=1521836856000&api=v2"></script>
<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>
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_DocumentSearcher.js?version=5&modificationDate=1521838432570&api=v2"></script>
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Keywords.js?version=10&modificationDate=1522346687000&api=v2"></script>
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_TDNNewModel.js?version=1&modificationDate=1522686091726&api=v2"></script>
<link rel="stylesheet" type="text/css" href="/download/attachments/330843097/TOTVS_Carousel.css?version=1&modificationDate=1521836856000&api=v2">
<link rel="stylesheet" type="text/css" href="/download/attachments/347442711/TOTVS_Accordion.css?version=10&modificationDate=1521826790000&api=v2">
<link rel="stylesheet" type="text/css" 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

language	xml
firstline	1
title	script
linenumbers	true

<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

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 = 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 != "")
						this.TitleImageUrl = optCollapsiblePanel.TitleImageUrl;

					if(optCollapsiblePanel.Groups != null && optCollapsiblePanel.Groups != undefined)
						this.Groups = optCollapsiblePanel.Groups ;
				}
					
				var ElementCollapsiblePanel = document.createElement('div');
				ElementCollapsiblePanel.id = this.Id + "_OuterDiv";
				ElementCollapsiblePanel.name = this.Id + "_OuterDiv";
				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

<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.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.

Image Added

Exibir filhos

all	true

2 - Adicione os scripts

Bloco de código

language	xml
firstline	1
title	script
linenumbers	true

<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

language	xml
firstline	1
title	script
linenumbers	true
collapse	true

<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

language	xml
firstline	1
title	HTML do Container
linenumbers	true

<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

language	xml
firstline	1
title	style
linenumbers	true

<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

language	xml
firstline	1
title	script

Bloco de código

language	css
firstline	1
title	Novo CSS Info
linenumbers	true

.confluence-information-macro {
    width: calc(100% - 25px);
    background: #fff !important; 
    border: 0;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    color: #333;
    margin: 10px 0 1em 0;
    min-height: 20px;
    padding: 10px;
    position: relative;
}

.confluence-information-macro p.title{
    padding-left: 20px;
    margin-top: 0px;
	margin-bottom: 5px;
}

.confluence-information-macro-information{
border: 1px solid #aab8c6 !important;
}

HTML

<style type="text/css">
.confluence-information-macro {
    width: calc(100% - 25px);
    background: #fff !important; 
    border: 0;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    color: #333;
    margin: 10px 0 1em 0;
    min-height: 20px;
    padding: 10px;
    position: relative;
}

.confluence-information-macro p.title{
    padding-left: 20px;
    margin-top: 0px;
	margin-bottom: 5px;
}


.confluence-information-macro-information{
border: 1px solid #aab8c6 !important;
}
</style>

Informações

title	Teste

Com o css acima, o macro de Informação ficou dessa forma!

2 - Warning

Modificações:

...

Bloco de código

language	css
firstline	1
title	Novo CSS Warning
linenumbers	true

.confluence-information-macro {
    width: calc(100% - 25px);
    background: #fff !important; 
    border: 0;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    color: #333;
    margin: 10px 0 1em 0;
    min-height: 20px;
    padding: 10px;
    position: relative;
}

.confluence-information-macro p.title{
    padding-left: 20px;
    margin-top: 0px;
	margin-bottom: 5px;
}

.confluence-information-macro .confluence-information-macro-icon.aui-iconfont-error{
	color: #fff;
}

.confluence-information-macro-warning{
	background-color: #d04437 !important;
	color: #fff;
}

HTML

<style type="text/css">
.confluence-information-macro {
    width: calc(100% - 25px);
    background: #fff !important; 
    border: 0;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    color: #333;
    margin: 10px 0 1em 0;
    min-height: 20px;
    padding: 10px;
    position: relative;
}

.confluence-information-macro p.title{
    padding-left: 20px;
    margin-top: 0px;
	margin-bottom: 5px;
}

.confluence-information-macro .confluence-information-macro-icon.aui-iconfont-error{
	color: #fff;
}

.confluence-information-macro-warning{
	background-color: #d04437 !important;
	color: #fff;
}
</style>

Aviso

title	Teste

Com o css acima, o macro de Atenção ficou dessa forma!

Collapsible Panels (Painéis Expansíveis)

Para se utilizar o Painel Expansível, alguns passos devem ser utilizados:

HTML

<script type="text/javascript" language="javascript">
/* @license ! jQuery-mutate - v0.0.2 - 
* Licensed under the MIT license
* http://www.opensource.org/licenses/mit-license.php
* Date: 2015-04-19 */

!function(t){mutate_event_stack=[{name:"width",handler:function(a){var e=t(a);return e.data("mutate-width")||e.data("mutate-width",e.width()),e.data("mutate-width")&&e.width()!=e.data("mutate-width")?(e.data("mutate-width",e.width()),!0):!1}},{name:"height",handler:function(a){var e=t(a);return e.data("mutate-height")||e.data("mutate-height",e.height()),e.data("mutate-height")&&e.height()!=e.data("mutate-height")?(e.data("mutate-height",e.height()),!0):void 0}},{name:"top",handler:function(a){var e=t(a);return e.data("mutate-top")||e.data("mutate-top",e.css("top")),e.data("mutate-top")&&e.css("top")!=e.data("mutate-top")?(e.data("mutate-top",e.css("top")),!0):void 0}},{name:"bottom",handler:function(a){var e=t(a);return e.data("mutate-bottom")||e.data("mutate-bottom",e.css("bottom")),e.data("mutate-bottom")&&e.css("bottom")!=e.data("mutate-bottom")?(e.data("mutate-bottom",e.css("bottom")),!0):void 0}},{name:"right",handler:function(a){var e=t(a);return e.data("mutate-right")||e.data("mutate-right",e.css("right")),e.data("mutate-right")&&e.css("right")!=e.data("mutate-right")?(e.data("mutate-right",e.css("right")),!0):void 0}},{name:"left",handler:function(a){var e=t(a);return e.data("mutate-left")||e.data("mutate-left",e.css("left")),e.data("mutate-left")&&e.css("left")!=e.data("mutate-left")?(e.data("mutate-left",e.css("left")),!0):void 0}},{name:"hide",handler:function(a){var e=t(a),r=e.is(":hidden"),d=void 0==e.data("prev-hidden")?r:e.data("prev-hidden");return e.data("prev-hidden",r),r&&r!=d?!0:void 0}},{name:"show",handler:function(a){var e=t(a),r=e.is(":visible"),d=void 0==e.data("prev-visible")?r:e.data("prev-visible");return e.data("prev-visible",r),r&&r!=d?!0:void 0}},{name:"scrollHeight",handler:function(a){var e=t(a);return e.data("prev-scrollHeight")||e.data("prev-scrollHeight",e[0].scrollHeight),e.data("prev-scrollHeight")&&e[0].scrollHeight!=e.data("prev-scrollHeight")?(e.data("prev-scrollHeight",e[0].scrollHeight),!0):void 0}},{name:"scrollWidth",handler:function(a){var e=t(a);return e.data("prev-scrollWidth")||e.data("prev-scrollWidth",e[0].scrollWidth),e.data("prev-scrollWidth")&&e[0].scrollWidth!=e.data("prev-scrollWidth")?(e.data("prev-scrollWidth",e[0].scrollWidth),!0):void 0}},{name:"scrollTop",handler:function(a){var e=t(a);return e.data("prev-scrollTop")||e.data("prev-scrollTop",e[0].scrollTop()),e.data("prev-scrollTop")&&e[0].scrollTop()!=e.data("prev-scrollTop")?(e.data("prev-scrollTop",e[0].scrollTop()),!0):void 0}},{name:"scrollLeft",handler:function(a){var e=t(a);return e.data("prev-scrollLeft")||e.data("prev-scrollLeft",e[0].scrollLeft()),e.data("prev-scrollLeft")&&e[0].scrollLeft()!=e.data("prev-scrollLeft")?(e.data("prev-scrollLeft",e[0].scrollLeft()),!0):void 0}}]}(jQuery);



/* @license ! jQuery-mutate - v0.0.1 - 
* Licensed under the MIT license
* http://www.opensource.org/licenses/mit-license.php
* Date: 2015-04-19 */

!function(a){function b(){var c=mutate;"undefined"!=c.event_stack&&c.event_stack.length&&a.each(c.event_stack,function(a,b){mutate.add_event(b)}),c.event_stack=[],a.each(c.stack,function(b,d){a(d.selector).each(function(a,b){c.events[d.event_name](b)===!0?d.callback&&d.callback(b,d):d.false_callback&&d.false_callback(b,d)})}),setTimeout(b,mutate.speed)}mutate={speed:100,event_stack:mutate_event_stack,stack:[],events:{},add_event:function(a){mutate.events[a.name]=a.handler},add:function(a,b,c,d){mutate.stack[mutate.stack.length]={event_name:a,selector:b,callback:c,false_callback:d}}},b(),a.fn.extend({mutate:function(){var b=!1,c=arguments[1],d=this,e=arguments[2]?arguments[2]:function(){};return"extend"==arguments[0].toLowerCase()?(mutate.add_event(c),this):(a.each(a.trim(arguments[0]).split(" "),function(a,f){b=f,mutate.add(b,d,c,e)}),this)}})}(jQuery);
</script>

1 - Utilizar o Script do JQuery.Mutate 0.0.2

Bloco de código

language	js
firstline	1
title	Mutate 0.0.2
linenumbers	true

<script type="text/javascript" languagesrc="javascript">
/* @license ! jQuery-mutate - v0.0.2 - 
* Licensed under the MIT license
* http://www.opensource.org/licenses/mit-license.php
* Date: 2015-04-19 */

!function(t){mutate_event_stack=[{name:"width",handler:function(a){var e=t(a);return e.data("mutate-width")||e.data("mutate-width",e.width()),e.data("mutate-width")&&e.width()!=e.data("mutate-width")?(e.data("mutate-width",e.width()),!0):!1}},{name:"height",handler:function(a){var e=t(a);return e.data("mutate-height")||e.data("mutate-height",e.height()),e.data("mutate-height")&&e.height()!=e.data("mutate-height")?(e.data("mutate-height",e.height()),!0):void 0}},{name:"top",handler:function(a){var e=t(a);return e.data("mutate-top")||e.data("mutate-top",e.css("top")),e.data("mutate-top")&&e.css("top")!=e.data("mutate-top")?(e.data("mutate-top",e.css("top")),!0):void 0}},{name:"bottom",handler:function(a){var e=t(a);return e.data("mutate-bottom")||e.data("mutate-bottom",e.css("bottom")),e.data("mutate-bottom")&&e.css("bottom")!=e.data("mutate-bottom")?(e.data("mutate-bottom",e.css("bottom")),!0):void 0}},{name:"right",handler:function(a){var e=t(a);return e.data("mutate-right")||e.data("mutate-right",e.css("right")),e.data("mutate-right")&&e.css("right")!=e.data("mutate-right")?(e.data("mutate-right",e.css("right")),!0):void 0}},{name:"left",handler:function(a){var e=t(a);return e.data("mutate-left")||e.data("mutate-left",e.css("left")),e.data("mutate-left")&&e.css("left")!=e.data("mutate-left")?(e.data("mutate-left",e.css("left")),!0):void 0}},{name:"hide",handler:function(a){var e=t(a),r=e.is(":hidden"),d=void 0==e.data("prev-hidden")?r:e.data("prev-hidden");return e.data("prev-hidden",r),r&&r!=d?!0:void 0}},{name:"show",handler:function(a){var e=t(a),r=e.is(":visible"),d=void 0==e.data("prev-visible")?r:e.data("prev-visible");return e.data("prev-visible",r),r&&r!=d?!0:void 0}},{name:"scrollHeight",handler:function(a){var e=t(a);return e.data("prev-scrollHeight")||e.data("prev-scrollHeight",e[0].scrollHeight),e.data("prev-scrollHeight")&&e[0].scrollHeight!=e.data("prev-scrollHeight")?(e.data("prev-scrollHeight",e[0].scrollHeight),!0):void 0}},{name:"scrollWidth",handler:function(a){var e=t(a);return e.data("prev-scrollWidth")||e.data("prev-scrollWidth",e[0].scrollWidth),e.data("prev-scrollWidth")&&e[0].scrollWidth!=e.data("prev-scrollWidth")?(e.data("prev-scrollWidth",e[0].scrollWidth),!0):void 0}},{name:"scrollTop",handler:function(a){var e=t(a);return e.data("prev-scrollTop")||e.data("prev-scrollTop",e[0].scrollTop()),e.data("prev-scrollTop")&&e[0].scrollTop()!=e.data("prev-scrollTop")?(e.data("prev-scrollTop",e[0].scrollTop()),!0):void 0}},{name:"scrollLeft",handler:function(a){var e=t(a);return e.data("prev-scrollLeft")||e.data("prev-scrollLeft",e[0].scrollLeft()),e.data("prev-scrollLeft")&&e[0].scrollLeft()!=e.data("prev-scrollLeft")?(e.data("prev-scrollLeft",e[0].scrollLeft()),!0):void 0}}]}(jQuery);



/* @license ! jQuery-mutate - v0.0.1 - 
* Licensed under the MIT license
* http://www.opensource.org/licenses/mit-license.php
* Date: 2015-04-19 */

!function(a){function b(){var c=mutate;"undefined"!=c.event_stack&&c.event_stack.length&&a.each(c.event_stack,function(a,b){mutate.add_event(b)}),c.event_stack=[],a.each(c.stack,function(b,d){a(d.selector).each(function(a,b){c.events[d.event_name](b)===!0?d.callback&&d.callback(b,d):d.false_callback&&d.false_callback(b,d)})}),setTimeout(b,mutate.speed)}mutate={speed:100,event_stack:mutate_event_stack,stack:[],events:{},add_event:function(a){mutate.events[a.name]=a.handler},add:function(a,b,c,d){mutate.stack[mutate.stack.length]={event_name:a,selector:b,callback:c,false_callback:d}}},b(),a.fn.extend({mutate:function(){var b=!1,c=arguments[1],d=this,e=arguments[2]?arguments[2]:function(){};return"extend"==arguments[0].toLowerCase()?(mutate.add_event(c),this):(a.each(a.trim(arguments[0]).split(" "),function(a,f){b=f,mutate.add(b,d,c,e)}),this)}})}(jQuery);
</script>

2 - Utilizar o CSS do CollapsiblePanel

HTML

<style type="text/css">
.expand-container{
margin-top:5px !important;
font-weight: normal !important;
}

.expand-control{
margin-bottom: 5px !important;
}

pre{
white-space: inherit !important;
}

table tr:nth-child(odd), table tr:nth-child(odd) > *{
   background: transparent !important;
border: 0 !important;
}

.pdl .codeContent .gutter{
    border-right: 1px solid #ccc !important;
}

.wiki-content .innerCell {
    overflow-y: hidden;
}

.HiddenDiv .confluence-information-macro .confluence-information-macro pre{
    display: none;
}
.HiddenDiv .wiki-content a:link, .HiddenDiv .wiki-content a, .HiddenDiv .tab-nav-link, .HiddenDiv .current{
     color: #000 !important; 
}

.wiki-content a:link {
    color: #000 !important;
}

.lastDiv + pre{
    font-family: inherit;
}

.white-container{
    -moz-box-shadow: 2px 2px 2px #aaa;
    -webkit-box-shadow: 2px 2px 2px #aaa;
    box-shadow: 2px 2px 2px #aaa;
}

.confluence-embedded-file-wrapper .confluence-embedded-image{
    max-width: 100% !important;
    max-height: 100%;
}

</style>

Bloco de código

language	css
firstline	1
title	CSS CollapsiblePanel
linenumbers	true

<style type="text/css">
.expand-container{
margin-top:5px !important;
font-weight: normal !important;
}

.expand-control{
margin-bottom: 5px !important;
}

pre{
white-space: inherit !important;
}

table tr:nth-child(odd), table tr:nth-child(odd) > *{
   background: transparent !important;
border: 0 !important;
}

.pdl .codeContent .gutter{
    border-right: 1px solid #ccc !important;
}

.wiki-content .innerCell {
    overflow-y: hidden;
}

.HiddenDiv .confluence-information-macro .confluence-information-macro pre{
    display: none;
}
.HiddenDiv .wiki-content a:link, .HiddenDiv .wiki-content a, .HiddenDiv .tab-nav-link, .HiddenDiv .current{
     color: #000 !important; 
}

.wiki-content a:link {
    color: #000 !important;
}

.lastDiv + pre{
    font-family: inherit;
}

.white-container{
    -moz-box-shadow: 2px 2px 2px #aaa;
    -webkit-box-shadow: 2px 2px 2px #aaa;
    box-shadow: 2px 2px 2px #aaa;
}

.confluence-embedded-file-wrapper .confluence-embedded-image{
    max-width: 100% !important;
    max-height: 100%;
}

</style>

3 - Adicionar o Script do Totvs.CollapsiblePanel

HTML

<script type="text/javascript">
Totvs = {
	CollapsiblePanel: function(optCollapsiblePanel){


	},


	CollapsiblePanelGroup: function(optCollapsiblePanelGroup){


	},


	CollapsiblePanelGroupItem: function(optCollapsiblePanelGroupItem){


	}
}
</script>

...

language	js
firstline	1
title	Totvs.CollapsiblePanel
linenumbers	true

4 - Adicionar o Script das Chamadas ao CollapsiblePanel

/download/attachments/330843097/TOTVS_Carousel.js?version=5&modificationDate=1521836856000&api=v2"></script>

3 - Adicione o HTML

Bloco de código

language	xml
firstline	1
title	html
linenumbers	true

<div id="divContainer"></div>

4 - Adicione o Script de Chamada

Bloco de código

language	xml
firstline	1
title	script chamada
linenumbers	true

<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

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

<script type="text/javascript">
optCollapsiblePanel1 = {


}


var _collapsiblePanel1 = new Totvs.CollapsiblePanel(optCollapsiblePanel1);
</script>

Atalhos

Páginas filhas

Versões comparadas

Versão antiga 19

Nova versão Atual

Chave

Modificação Alertas

1 - Info

TOTVS Accordion

TDN Document Searcher

TOTVS Carousel

2 - Warning

Collapsible Panels (Painéis Expansíveis)

TOTVS Keywords

TOTVS TDN Document New Model

TOTVS TDN API DOC

Atalhos

Páginas filhas

Histórico da Página

Versões comparadas

Versão antiga 19

Nova versão Atual

Chave

Modificação Alertas

1 - Info

TOTVS Accordion

TDN Document Searcher

TOTVS Carousel

2 - Warning

Collapsible Panels (Painéis Expansíveis)

TOTVS Keywords

TOTVS TDN Document New Model

TOTVS TDN API DOC