LOCAWEB STYLE

Documentação Locaweb Style

Listas complexas

Listas de exibição de grande quantidade de informações.

São bem usadas em listagens de planos, hospedagens e outros serviços similares.

<ul class="listOptions">
	<li>
		<p>Identificador: <strong>
			123456789</strong> | Nome:
			<strong>Lojinha com divisões na observação</strong>
		</p>
		<span class="actLnk fright">
			<a href="#" class="lnkSeta">Administrar</a>
		</span>
		<span class="fRight spanObs">Status: <strong>Ativo</strong></span>
		<span class="fRight spanObs">
			Período de renovação: <strong>1 ano</strong>
			<a href="#" class="lnkSeta">Alterar</a>
		</span>
		<p class="pObs"><strong>Gateway de pagamentos:</strong> (1000 transações)</p>
	</li>
</ul>
Regra 2
Servidor

Incremental

Peridiocidade

Toda Terça as djfklajsdka

Status

Ativo

<div class="messageInfo overflowVisible">
	<header class="headerInfo  noBorder">
		<span class="span6"><b>Regra 2</b></span>
		<div class="span4">
			<h5>Servidor</h5>
			<p>Incremental</p>
		</div>
		<div class="span3">
			<h5>Peridiocidade</h5>
			<p>Toda Terça as djfklajsdka</p>
		</div>
		<div class="span3">
			<h5>Status</h5>
			<p>Ativo</p>
		</div>
	</header>
	<div class="messageContent">
		<ul class="actionsTable">
			<li>
				<a href="#" aria-label="Administrar Cliente X" class="ico-right-circle" tabindex="3" title="Administrar Cliente X">Administrar</a>
			</li>
			<li>
				<a href="#" aria-label="Reativar Cliente X" class="ico-plus-circle" data-disable-with="Reativando ..." data-remote="true" tabindex="3" title="Reativar">Reativar</a>
			</li>
			<li><a href="#" aria-label="Excluir Cliente" class="ico-trash btn_delete" id="modalDestroy" tabindex="3" title="Excluir">Excluir</a>
			</li>
		</ul>
	</div>
</div>
Regra 2
Servidor

Incremental

Peridiocidade

Toda Terça as djfklajsdka

Status

Ativo

Aqui podemos inserir qualquer conteúdo utilizando a mesma lista de informações.

Caso não tenha reparado, existe usando uma classe funcional noBgHover 

<div class="messageInfo overflowVisible noBgHover">
	<header class="headerInfo noBorder">
		<span class="span6"><b>Regra 2</b></span>
		<div class="span4">
			<h5>Servidor</h5>
			<p>Incremental</p>
		</div>
		<div class="span3">
			<h5>Peridiocidade</h5>
			<p>Toda Terça as djfklajsdka</p>
		</div>
		<div class="span3">
			<h5>Status</h5>
			<p>Ativo</p>
		</div>
	</header>
	<div class="messageContent">
		<ul class="actionsTable">
			<li>
				<a href="#" aria-label="Administrar Cliente" class="ico-right-circle" tabindex="3" title="Administrar Cliente">Administrar</a>
			</li>
			<li>
				<a href="#" aria-label="Reativar Cliente" class="ico-plus-circle" data-disable-with="Reativando ..." data-remote="true" tabindex="3" title="Reativar Cliente">Reativar</a>
			</li>
			<li>
				<a href="#" aria-label="Excluir Cliente" class="ico-trash btn_delete" id="modalDestroy" tabindex="3" title="Excluir Cliente">Excluir</a>
			</li>
		</ul>
		<p>Aqui podemos inserir qualquer conteúdo utilizando a mesma lista de informações.</p>
		<p>Caso não tenha reparado, existe usando uma classe funcional <b>noBgHover</b></p>
	</div>
</div>
envios expiram em
27/03/2013
Cliente

dvd

Status: Ativo
<div class="messageInfo">
	<div class="span2 countViews gradient">
		<h5>envios expiram em</h5>
		<h6>27/03/2013</h6>
	</div>
	<div class="span7">
		<h5>Cliente</h5>
		<p class="ellipsis overflowHidden"><a href="#" data-clickable=".messageInfo">dvd</a></p>
	</div>
	<div class="span2 status enabled">
		<h5>Status: <b>Ativo</b></h5>
	</div>
</div>
Cliente de teste Não recorrente
Ativo
5.747
até 01/01/2013
Editar 
<div class="messageInfo overflowVisible">
	<div class="span7">
		<b>Cliente de teste</b>
		<span class="label label-info fright">Não recorrente</span>
	</div>
	<div class="span2 status enabled txtCenter">
		<b>Ativo</b>

	</div>
	<div class="span4 txtCenter">
		<b>5.747</b>
		<div class="progress progress-striped " rel="popover" data-title="Informação" data-html="true" data-placement="left" data-original-title="">
			<div class="bar" style="width:66%"></div>
		</div>
		<small>até 01/01/2013</small>
	</div>
	<div class="span4 txtCenter">
		<a href="#" class="btn" tabindex="3" role="button">Editar</a>
	</div>
</div>
Banco de dados Descrição com texto editável pelo usuário  

Status: Ativo

Em uso: 132.81 MB

Login: xxx

Servidor: d.server.co

18.4.1.1

<div class="messageInfo">
	<div class="span2 countViews gradient">
		<img src="http://placehold.it/100x60&text=[Logo]">
	</div>
	<div class="span14">
		<div class="headerInfo noMarginBottom">
			<span class="name"><strong>Banco de dados</strong></span>
			<span>Descrição com texto editável pelo usuário</span>
			<span class="status enabled fRight noBorder"> </span>
		</div>
		<div class="contentDescription overflowHidden">
			<p class="span2"><span>Status:</span> Ativo</p>
			<p class="span2"><span>Em uso:</span> 132.81 MB</p>
			<p class="span3"><span>Login:</span> base_mysql_01</p>
			<p class="span4"><span>Servidor:</span> dbmy0004.whservidor.com</p>
			<p class="span2"><span>187.45.196.13</span></p>
		</div>
		<ul class="actionsTable noMarginTop">
			<li>
				<a href="#" class="ico-right-circle">Administrar</a>
			</li>
			<li>
				<a href="#" class="warning ico-trash">Excluir</a>
			</li>
		</ul>
	</div>
</div>
Status
Ativo
meusite.dominioprovisorio.ws Site principal  

Caminho: /centraldereports/teste

Registrado por: Locaweb

Expira em: 21.08.12

<div class="messageInfo">
	<div class="span2 countViews gradient">
		Status<br><strong>Ativo</strong>
	</div>
	<div class="span14">
		<div class="headerInfo noMarginBottom">
			<span class="name"><strong>meusite.dominioprovisorio.ws</strong></span>
			<span>Site principal</span>
			<span class="status enabled fRight noBorder"> </span>
		</div>
		<div class="contentDescription overflowHidden">
			<p class="span7"><span>Caminho:</span> /centraldereports/teste</p>
			<p class="span3"><span>Registrado por:</span> Locaweb</p>
			<p class="span3"><span>Expira em:</span> 21.08.12</p>
		</div>
		<div class="contentDescription with_border">
			<ul class="actionsTable">
				<li><a href="#" class="ico-open">Editar</a></li>
				<li><a href="#" class="warning ico-blocked">Suspender</a></li>
				<li><a href="#" class="warning ico-trash">Excluir</a></li>
				<li><a href="#" class="ico-right-circle">Painel</a></li>
			</ul>
		</div>
	</div>
</div>

testenointernetexplorer.com.br

Status: Em instalação

Hospedagem Max

 
<div class="listOptions">
	<a href="#" class="lnkAll" tabindex="3">
		<p><strong>testenointernetexplorer.com.br</strong></p>
		<span class="fRight spanObs">
			Status: <strong>Em instalação</strong>
		</span>
		<p class="pObs"><strong>Hospedagem Max</strong></p>
	</a>
</div>

Lista selecionável

Basta deixar o input com atributo checked

Banco de dados de fácil administração e otimizado para aplicações web.

Recomendado para uso em:
  • Uso de Wordpress, Joomla!, SugarCRM, Drupal e outros aplicativos web;
  • Desenvolvimento de aplicações onde a velocidade em consultas e adição de dados são importantes;
  • Baixo consumo de recursos de processamento.
8

bancos disponíveis

Com o MS SQL Server 2008, você otimiza a gestão de dados e aplicações do seu site.

Recomendado para uso em:
  • Desenvolvimento utilizando framework .Net;
  • Ideal para grandes volumes de dados e de transações;
  • Banco de dados robusto e usado por sistemas corporativos dos mais diversos portes.
8

bancos disponíveis

Banco de dados mais robusto e com mais recursos para adminstração.

Recomendado para uso em:
  • Desenvolvimento de aplicações com fortes componentes transacionais;
  • Banco de dados otimizado para aplicações complexas

a partir de

R$ 30,00

por mês

<div class="messageInfo selectable">
  <header class="headerInfo">
    <label for="data1" class="span3">
      <input id="data1" checked="checked" class="selectableCheck" type="radio" name="data">
      <img alt="linux" src="http://assets.locaweb.com.br/locastyle/1.2.22/images/bd/logo-mysql-mini.png" alt="logo Mysql">
      <span class="selectableTitle">MySQL</span>
    </label>
    <div class="span6">
      <p>Banco de dados de fácil administração e otimizado para aplicações web.</p>
      <strong>Recomendado para uso em:</strong>
      <ul>
        <li>Uso de Wordpress, Joomla!, SugarCRM, Drupal e outros aplicativos web;</li>
        <li>Desenvolvimento de aplicações onde a velocidade em consultas e adição de dados
      são importantes;</li>
        <li>Baixo consumo de recursos de processamento.</li>
      </ul>
    </div>
    <div class="span3 txtCenter">
        <strong class="selectableTitle">8</strong>
        <p>bancos disponíveis</p>
    </div>
  </header>
</div>

Lista selecionável desabilitada

Basta inserir o classe disabled + o da mensagem de alerta.

Banco de dados de fácil administração e otimizado para aplicações web.

Recomendado para uso em:
  • Uso de Wordpress, Joomla!, SugarCRM, Drupal e outros aplicativos web;
  • Desenvolvimento de aplicações onde a velocidade em consultas e adição de dados são importantes;
  • Baixo consumo de recursos de processamento.
8

bancos disponíveis

Você atingiu o limite de bancos de dados inclusos no site dominio.com.br.

Remova um banco de dados existente neste site ou instale um novo banco em outro site.

<div class="messageInfo selectable disabled">
  <header class="headerInfo">
    <label for="data11" class="span3">
      <input id="data11" disabled="disabled"  class="selectableCheck" type="radio" name="data2">
      <img alt="linux" src="http://assets.locaweb.com.br/locastyle/1.2.22/images/bd/logo-mysql-mini.png" alt="logo Mysql">
      <span class="selectableTitle">MySQL</span>
    </label>
    <div class="span6">
      <p>Banco de dados de fácil administração e otimizado para aplicações web.</p>
      <strong>Recomendado para uso em:</strong>
      <ul>
        <li>Uso de Wordpress, Joomla!, SugarCRM, Drupal e outros aplicativos web;</li>
        <li>Desenvolvimento de aplicações onde a velocidade em consultas e adição de dados
      são importantes;</li>
        <li>Baixo consumo de recursos de processamento.</li>
      </ul>
    </div>
    <div class="span3 txtCenter">
        <strong class="selectableTitle">8</strong>
        <p>bancos disponíveis</p>
    </div>
  </header>
   <div class="messageContent txtCenter">
    <p>Você atingiu o limite de bancos de dados inclusos no site <strong>dominio.com.br</strong>.</p>
    <p><a href="">Remova um banco de dados</a> existente neste site ou <a href="">instale um novo banco</a> em outro site.</p>
    </div>
</div>