Preciso criar um efeito de collapse para os conteúdos de meus documentos e artigos. O Fluig Style possui informações sobre o uso mas não mostra como fazer passo a passo, como instalar as dependencias, enfim, não estou conseguindo fazer funcionar. Alguém poderia me ajudar?
Atenção: Esta publicação foi transferida automaticamente do fórum antigo, mas os anexos não foram incluídos.
@Danilo,
Aqui nesse link explica como fazer:
https://style.fluig.com/javascript.html#collapse
Pelo que vi no seu HEAD, ele está assim:
Atenção: Esta publicação foi transferida automaticamente do fórum antigo, mas os anexos não foram incluídos.
<head>
<title></title>
<link href="/portal/resources/style-guide/css/fluig-style-guide.min.css" rel="stylesheet" type="text/css" />
</head>
O correto é assim:
<head>
<link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
<script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
</head>
Copie todo esse código e coloque lá:
<html>
<head>
<link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
<script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
</head>
<body>
<div class="fluig-style-guide">
<form name="form" role="form">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapse-icon up" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">
<h1>Apenas teste</h1>
<input type="text" name="txt_teste" id="txt_teste">
</div>
</form>
</div>
</body>
</html>
Ola Gabriel, ele solicita a instalação de um plugin conforme informação abaixo:
Plugin dependency
Collapse requires the transitions plugin to be included in your version of Style Guide.
Como fazer esta atualização?
Simplesmente copiar o codigo e colar no fonte do documento ou artigo não está funcionando.
Pode testar ele sem essa dependência que vai funcionar. Testei aqui em um Form e deu certo.
Ele até funcionou, mas não abre os topicos 2 e 3… e o topico um não fecha… o efeito de transição não está funcionando. Deve ser por causa que as referencias aos scripts java somem quanto salvo o documento. Tem alguma sugestão? Adicionei uma imagem collapse1.png.
Como está estrutura HTML?
Complementei na minha resposta, está faltando referências no head do seu HTML
Concordo com voce, mas quando insiro este trecho de codigo dos scripts o fluig limpa / apaga estas linhas mantendo somente “link href”… O que preciso fazer para manter o codigo dos caminhos dos scripts?
Qual o procedimento que está fazendo?
Está montando o formulário no eclipse e depois exportando ele para o Fluig?
Não, estou editando direto no fluig através do menu documentos → Novo Artigo ou Novo Documento. Ainda estamos utilizando tudo através dos recursos do Fluig e não Eclipse.
Fiz esse mesmo procedimento que você, fui em incluir novo artigo e coloquei o HTML com os links do head que passei e deu certo. Qual versão do Fluig está?
Estmos usando a Versão 1.6.0
Adicionei um código na minha resposta, copie ele e coloque lá pra ver se funciona.
Funciona quando eu publico a primeira vez. Se eu abrir para edição novamente, só o fato de eu editar o documento o fluig retira todas as referencias aos scripts.
Fiz essa simulação que falou. Inclui um artigo com esse HTML e publiquei. (FUNCIONOU)
Depois editei e publiquei novamente. (DEU O ERRO QUE MENCIONOU).
Abra um chamado na Totvs sobre esse problema.
Uma alternativa contorno seria de toda vez que você editar colocar o HEAD novamente.
Sim, já pensei nesta solução também… vou providenciar um chamado na Totvs… obrigado!