Objetivo:
Criar um slide show com gráficos.
- Criar uma
página em branco, ou com uma região html.
- Editar a
página e incluir os arquivos javascript e de CSS;
Inclua no campo JavaScript > File URLs os
arquivos:
#APP_IMAGES#bootstrap.min.js
#APP_IMAGES#holder.js
#APP_IMAGES#carousel.js
#APP_IMAGES#bootstrap.js
Inclua nos campos CSS > File URLs os
arquivos:
#APP_IMAGES#bootstrap.css
#APP_IMAGES#bootstrap.min.css
#APP_IMAGES#carousel.css
Obs.
Coloquei na frente dos arquivos #APP_IMAGES#, pois adicionei-os ao APEX na
parte de componentes compartilhados> Imagens, assim o APEX saberá onde está
os arquivos.
E no campo
HTML Header incluir:
<link
href="#APP_IMAGES#bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js
IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script
src="#APP_IMAGES#html5shiv.js"></script>
<script
src="#APP_IMAGES#respond.min.js"></script>
<![endif]-->
(veja nas
imagens abaixo, a estrutura da página e local para colocar os arquivos na
edição)
- Criar as
regiões que deseja apresentar no slide, no meu caso seriam gráficos, então
criei mais 4 regiões com gráficos. Nestes gráficos eu informei que a região Mãe
seria a do HTML que eu chamei de Slide.
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
Deve ser acrescentado caso deseje um novo slide. (veja na imagem abaixo)
* Nas
regiões de gráfico deve ser inserido no Header and Footeras informações:
No primeiro
gráfico, ou na primeira região que deverá ser apresentada no slide:
Region Header:
<div class="item active" align="center">
Demais regiões:
Region Header:
<div class="item"
align="center">
Region Footer:
</div>
Na última
região do gráfico inclui além do fechamento do div, o seguinte:
</div>
<!-- Controls -->
<a class="left carousel-control"
href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic"
data-slide="next">
<span class="glyphicon
glyphicon-chevron-right"></span>
</a>
</div>
O resultado
do slide dentro do APEX será o seguinte...
Todos os
direitos a get Bootstrap. http://getbootstrap.com/
Os arquivos estão disponíveis para downoad na página do Bootstrap.
Abraços
