Bom dia galera do GUJ,
Estou com um probleminha… Tenho uma aplicacao que utiliza o ICEFaces e tenho uma pagina que tenho q fazer um accordion. Primeiro fiz em html + javascript e funciona perfeitamente. Facil e pratico.
<html>
<head>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a > 01. Quais os tipos de pagamento para o exterior podem ser efetuados via PAGUE LÁ FORA? </a></h3>
<div>
<p>
<b>01. Quais os tipos de pagamento para o exterior podem ser efetuados via PAGUE LÁ FORA?</b><br/><br/>
Qualquer operação, limitada ao valor de US$ 50.000 ou seu equivalente em outras moedas que não sujeitas ou vinculadas a registro no Banco Central. Dentre elas:<br/><br/>
- Câmbio simplificado de importação - DSI;<br/>
- Câmbio simplificado de exportação - DSE;<br/>
- Importação geral SIMPLIM;<br/>
- Exportação pronta SIMPLEX;<br/>
- Fretes e afretamentos;<br/>
- Assinaturas de jornais e revistas, etc;<br/>
- Comissões contratuais;<br/>
- Cursos e congressos;<br/>
- Publicidade e propaganda;<br/>
- Seguros;<br/>
- Serviços técnicos especializados;<br/>
- Heranças;<br/>
- Doações;<br/>
- Contribuições a entidades de classe e associativas;<br/>
- Manutenção de Residentes;<br/>
- Transferência de Patrimônio;<br/>
- Aposentadoria e pensões;<br/>
- Vencimentos e ordenados;<br/>
- Viagens de negócios, serviço e treinamento;<br/>
- Despesas administrativas;<br/>
- Encomendas internacionais;<br/>
- Honorários profissionais;<br/>
- Lucros e perdas em transações mercantis;<br/>
- Pequenos Compromissos até US$ 3.000,00;<br/>
- Outros...<br/>
</p>
</div>
<h3><a > 02. Quais os documentos necessários para efetuar um pagamento no exterior?</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a > 03. O PAGUE LÁ FORA é um meio legal de efetuar pagamentos e envios para o exterior?</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a > 04. Qual a garantia que meu beneficiário/credor receberá o valor da operação em questão no exterior? Quando isso ocorrerá?</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
Estou utilizando:
libs: jquery.min.js, jquery-ui.min.js
css: jquery-ui.css
Mas meu problema é quando coloco no projeto com ICEFaces.
Tenho um template:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<f:loadBundle basename="br.com.xxx.message.default" var="msg"/>
<head>
<title><ui:insert name="title">#{msg['app']}</ui:insert></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/css/#{logonController.empresaPath}/jquery-ui.css" media="screen"/>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/scripts/jquery.min.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/scripts/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<ice:outputConnectionStatus showPopupOnDisconnect="false"/>
<table align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr valign="top">
<td align="left" valign="top"><ui:insert name="conteudo"></ui:insert></td>
</tr>
</table>
</body>
</html>
A pagina que chamo o accordion é : teste.jspx
<?xml version="1.0" encoding="ISO-8859-1"?>
<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ice="http://www.icesoft.com/icefaces/component" template="/pages/comuns/template.jspx">
<ui:define name="title">#{msg['cambioApp']} - #{msg['about.titulo']}</ui:define>
<ui:define name="conteudo">
<f:view>
<ice:form id="faq">
<div class="#{logonController.styleClassFormulario}">
<table class="conteudo_tab_titulo" style="width: 100%;">
<tr>
<td style="padding-top: 10px" valign="top" class="conteudo-titulo">   
<img /> #{msg['faq.titulo']}
</td>
</tr>
<tr height="10px">
<td colspan="2"><!-- --></td>
</tr>
</table>
<div class="conteudo-campos" style="width: 100%;">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="10px"></td>
<td>
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td>
<H2> ------------------ TESTANDO ACCORDION --------------------------</H2>
<div id="accordion">
<h3><a >Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a >Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a >Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a >Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</td>
</tr>
</table>
</td>
<td width="10px"></td>
</tr>
</table>
</div>
</div>
</ice:form>
</f:view>
</ui:define>
</ui:composition>
O ponto critico é que ele nao acha a div…
$(document).ready(function() {
//nao acha esse div #accordion????
$("#accordion").accordion();
});
SErá que ta faltando algo???
se alguem poder me ajudar??
bom agradeço… 