Histórico da Página
| 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 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<style type="text/css"> /*Exemplos abaixo:*/ </style>javascript" src="/download/attachments/330843097/TOTVS_Carousel.js |
...
1 - Info
Modificações:
...
?version=1&modificationDate=1521836856000&api=v2"></script>
<script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.mutate.js?version=1&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" 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=1&modificationDate=1521826790000&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 type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.mutate.js?version=1&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 |
|---|
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
.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 | ||
|---|---|---|
| ||
Com o css acima, o macro de Informação ficou dessa forma! |
2 - Warning
Modificações:
...
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
.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 | ||
|---|---|---|
| ||
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 - Adicione o Script do JQuery.Mutate 0.0.2
| Bloco de código | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<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> |
2 - Adicione 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%;
}
div.outerDiv{
border:1px solid #aab8c6;
padding:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #f7f7f7;
}
div.outerDivWrapper{
background:#f7f7f7;
width:calc(100% - 10px);
height:30px;color: #000;
font-weight:bold;
font-size: 16px;
padding:5px;
border-bottom: 1px solid #aab8c6;
margin-bottom:14px;
}
div.groupOuterDiv{
border: 1px solid #aab8c6
}
div.groupOuterDivWrapper{
background:#f7f7f7;
width:calc(100% - 10px);
height:30px;color: #000;
font-weight:bold;
font-size: 16px;
padding:5px;
border-bottom: 0px;
}
span.outerDivWrapperTitleSpan{
float: left;
}
span.groupOuterDivWrapperTitleSpan{
float: left;
margin-top: 4px;
}
img.outerDivWrapperTitleSpanImg{
width: 16px;
height: 16px;
margin-top:3px
}
span.outerDivWrapperTitleSpanText{
float:left;
font-size:inherit;
padding-left:5px;
}
span.groupOuterDivWrapperTitleSpanText{
float:left;
font-size:inherit;
padding-left:5px;
margin-top: 3px;
}
div.paddingDiv{
padding:7px;
}
</style> |
| HTML |
|---|
<script type="text/javascript">
Totvs = {
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 != "")
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> |
| Bloco de código | |
|---|---|
| language | js |
| firstline | 1 |
| title | Totvs.CollapsiblePanel |
| linenumbers | true | collapse | true
<script type="text/javascript">
Totvs = {
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 != "")
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> |
4 3 - Adicione o Script das Chamadas ao CollapsiblePanelTOTVS_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> |
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas