Aplicando classes no Lumis MS com JQuery
No Lumis CMS versão Microsoft - ao contrário do Lumis Java - não é possível definir um nome de classe específico para as TDs estruturais das páginas. Conforme explicado no guia de protótipos de projetos, essas classes são aplicadas automaticamente na medida em que adicionamos linhas (monta uma TABLE com class="cEZTPageAreaX") e colunas (monta uma TD com class="cEZTPageAreaXColumnY") ao darmos drag and drop das interfaces dos serviços.
Entretanto, usando JQuery temos uma solução bastante simples para esse problema.
Ela consiste em inserirmos uma interface de serviço html a qualquer altura de uma coluna (mas fica melhor sendo a primeira interface), e nela inserirmos um marcador – como uma classe "anchor", por exemplo – para que através de um script bastante simples (usando o JQuery) busquemos as colunas (TDs) da página que possuem este tipo de marcador, e nelas apliquemos uma nova classe.
Na prática, equivale a aplicar a classe que quisermos na TD estrutural (ou TDs estruturais). Apenas dará um pouco mais de trabalho, e exigirá o uso do JQuery.
Veja no exemplo abaixo, um html que simula a estrutura do Lumis MS, com três interfaces lado a lado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery: Aplicando classes com uso de âncoras</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td[class^='cEZTPageArea']:has(div.anchor)").addClass("my-class");
});
</script>
<style type="text/css">
body.cLumBody {
margin:0;
background:#e9e9e9;
text-align:center;
position:relative;
}
div.cLumPage {
width:600px;
margin:0 auto;
text-align:left;
background:#fff;
}
div.interface {
width:200px;
}
div.interface p {margin:20px;}
td.my-class {
border-right:1px solid #ccc;
}
</style>
</head>
<body class="cLumBody">
<div class="cLumPage">
<table cellpadding="0" cellspacing="0" class="cEZTPageArea0">
<tr>
<td class="cEZTPageArea0Column0">
<div class="anchor"></div>
<div class="interface">
<p>Interface 01</p>
</div>
</td>
<td class="cEZTPageArea0Column1">
<div class="anchor"></div>
<div class="interface">
<p>Interface 02</p>
</div>
</td>
<td class="cEZTPageArea0Column2">
<div class="interface">
<p>Interface 03</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Repare no trecho de script destacado, é este trecho que adiciona a classe "my-class" a qualquer TD na página que (1) possua uma classe que contenha "cEZTPageArea" – ou seja, todas as classes estruturais do Lumis MS – e (2) que tenha em seu interior uma div com a classe "anchor", que é o nosso marcador. Dessa forma, esta alteração somente ocorrerá nas colunas em que inserirmos a interface de serviço html com este marcador.
***
Nota (1): este artigo não pretende encerrar o assunto em relação a boas práticas e/ou soluções para limitações do Lumis CMS, recomendamos consultar o suporte da Lumis ou o Lumis Information Exchange (LINX) para consultar outros artigos e soluções para problemas encontrados.
Nota (2): a solução descrita neste artigo foi originalmente elaborada pela WorkingMinds para um de seus projetos com Lumis MS, estamos apenas divulgando o conhecimento adiante...
Marcadores: avançado, jquery, js, Lumis, tutoriais, WorkingMinds
Publicado por raph - Link permanente
Translate this post to english
0 comentários:
Postar um comentário
<< Home