Linha RM

Atalhos

Páginas filhas
  • Macros JS / CSS

Versões comparadas

Versão antiga 286

changes.mady.by.user Carlos Philippe de Farias Marques

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Carlos Philippe de Farias Marques

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
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
languagexml
firstline1
titlescript
linenumberstrue
<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

html
Bloco de código
languagexml
firstline1
titlecss
linenumberstrue
>
<link rel="stylesheet" type="text/css" href="/download/attachments/347442711330843097/TOTVS_AccordionTDNNewModel.css?version=1&modificationDate=15218267900001522686091289&api=v2">
TOTVS Accordion 
...
Para se utilizar o TOTVS Accordion, alguns passos devem ser utilizados:
1 - Adicione os Scripts
 Bloco de código
languagexml
firstline1
titlescript
linenumberstrue
<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
languagexml
firstline1
titlecss
linenumberstrue
<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
html
 Bloco de código
languagejs
firstline1
titleTotvs.CollapsiblePanel Chamada
linenumberstrue
collapsetrue
<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
languagejs
firstline1
titleTotvs.CollapsiblePanel Chamada
linenumberstrue
collapsetrue
 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
languagexml
firstline1
titlescript
linenumberstrue
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_DocumentSearcher.js?version=15&modificationDate=1521838432570&api=v2"></script>
...
 Bloco de código
languagexml
firstline1
titlescript
linenumberstrue
collapsetrue
<style>
	.changeSelection::selection {
		background:rgba(0,0,0,0.2);
	}
</style>
...
 Bloco de código
languagexml
firstline1
titlehtmlscript
linenumberstrue
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Carousel.js?version=25&modificationDate=1521836856000&api=v2"></script>
...
 Bloco de código
languagexml
firstline1
titlescripthtml
linenumberstrue
<div id="divContainer"></div>
...
Para se utilizar o TOTVS Keywords, alguns passos devem ser utilizados:
1 - Adicione o Style
 Bloco de código
languagexml
firstline1
titlestyle
linenumberstrue
<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
languagexml
firstline1
titlescript
linenumberstrue
<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
languagexml
firstline1
titlehtml
linenumberstrue
<div id="keyWordContainerDiv" style="padding-top: 10px;"></div>
4 - Adicione o Script de Chamada
 Bloco de código
languagexml
firstline1
titlescript chamada
linenumberstrue
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
languagexml
firstline1
titlestyle
linenumberstrue
<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
languagexml
firstline1
titlescript
linenumberstrue
<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
languagexml
firstline1
titlehtml
linenumberstrue
<div id="newModelContent" style="width:100%; height: 100%;"></div>
4 - Adicione o Script de Chamada
 Bloco de código
languagexml
firstline1
titlescript chamada
linenumberstrue
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,
	Init: function(id, nameOfContainer){
		this.Id = id;
		this.Container = nameOfContainer;
	},
	Build: function(id, nameOfContainer){
			this.Init(id, nameOfContainer);


			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";
			_keyWordContainerWrapper.contentEditable = true;
			_keyWordContainerWrapper.onkeypress = function(e){
				var _evt = e || window.event;
				
				var keywords = this.innerHTML.replace(/<span[^>]*>|<\/span>/gi).split(' ');

				if(keywords.length > 0)
				{
					for(var i = 0; i < keywords.length; i++){
						var _span = document.createElement(); 
						_span.id = this.id + "_" + (i+1) + _span;
						_span.name = _span.id;
						_span.className = 'Keyword-Container-Wrapper-Span';


						this.appendChild(_span);
					}
				}
			}


			this.Container.appendChild(_keyWordContainerWrapper);
	}
}


TOTVS_Keywords.Build('TOTVS_KeyWord', 'keyWordContainerDiv')


</script>