Scripts
Adapters
É um script para proporcionar a navegação de menus via mouse e teclado para acessibilidade total.
Exemplo: Portal FAS, Portal PMC, Portal IPMC
Ativa Flash
É um script para "ativação" do flash no IE7 (mostra um SWF sem precisar utilizar o <embed> )
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/ici/ativa_flash/ativa.flash-1.0.js"></script>
</head>
<body>
<div id="banner">
<script>AtivarFlash("<caminho do swf>" , "<ID do controle>" , <largura em pixels> , <altura em pixels> );</script>
</div>
</body>
Barra IE6
A barra mostra sugestões de navegadores mais modernos para download quando o usuário utilizar um navegador IE5.5 ou IE6.
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/ici/barra_ie6/barra.ie6-1.0.js"></script>
</head>
Redimensionar Fonte
É um script que proporciona ao usuário redimensionar a fonte do texto para garantir maior acessibilidade.
Exemplo: Framework ICI
Jquery-XXX.min.js
Esta é a biblioteca Jquery, a qual permite que você utilize todas as facilidades do JQuery no seu site. No Repositório Web ela está disponível em várias versões, sendo recomendado usar a mais atual.
Para usar Jquery em todo o site sem precisar chamar este arquivo em cada página, basta adicioná-lo na Master Page do mesmo. Caso queira também, pode adicionar em apenas algumas páginas específicas.
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/jquery-1.7.1.min.js"></script>
</head>
Mobile
Esta é a biblioteca Jquery Mobile, a qual permite que você faça um site na versão mobile, para celulares e tablets, de maneira muito mais fácil e prática. No Repositório Web ela está disponível em várias versões, sendo recomendado usar a mais atual.
É necessário chamar o devido arquivo css para melhor visualização e funcionamento.
No site do jquery existe uma opção de customização, depois de obter o resultado desejado baixe o tema e inclua no seu projeto.
Para mais informações acesse o site: http://jquerymobile.com/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/mobile/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.ici.curitiba.org.br/css/jquery/mobile/jquery.mobile.structure-1.0.1.min.css" />
</head>
AutoComplete
O Autocomplete fornece sugestões enquanto você digita no campo. Quando adicionado a um campo de entrada, o Autocomplete permite aos usuários rapidamente encontrar e selecionar um item de uma lista pré-populada de valores.
É necessário chamar o devido arquivo css para melhor visualização e funcionamento.
Para mais informações acesse o site: http://jqueryui.com/demos/autocomplete/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/autocomplete/autocomplete-1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.ici.curitiba.org.br/css/jquery/plugins/autocomplete/autocomplete-1.1.css" />
<script>
$(function () {
var availableTags = [ "Asp", "BASIC", "C++", "Erlang", "Fortran", "Groovy", "Haskell", "JavaScript", "Lisp", "PHP", "Ruby", "Scheme" ];
$("#tags").autocomplete({ source: availableTags });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags:</label>
<input id="tags">
</div>
</body>
Cycle
O plugin JQuery Cycle é um slideshow que suporta vários tipos diferentes de transição e pode ser usado para grandes quantidades de imagens.
Para mais informações acesse: http://jquery.malsup.com/cycle/begin.html
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/cycle/cycle-2.6.5.min.js"></script>
<script>
$(document).ready(function () {
$('#s1').cycle('fade');
});
</script>
</head>
<body>
<div class="pics" id="s1">
<img src="images/01.jpg" width="200" height="200" />
<img src="images/02.jpg" width="200" height="200" />
<img src="images/03.jpg" width="200" height="200" />
</div>
</body>
Easing
Este plugin permite usar e configurar opções avançadas para animações.
Para mais informações acesse o site: http://gsgd.co.uk/sandbox/jquery/easing/
<head>
<script>
$(document).ready(function() {
var top = '-' + $('#slidedown_content .content').css('height');
var easing = 'easeOutBounce';
$('#slidedown_top').mouseover(function() {
$('#slidedown_content').animate({'top': 0}, {queue:false, duration:1000, easing: easing});
});
$('#slidedown_bottom').mouseover(function() {
$('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});
});
});
</script>
</head>
EasySlider
EasySlider é um plugins Jquery que permite que imagens ou qualquer conteúdo deslize horizontalmente ou verticalmente através do clique e é configurável com css.
Para mais informações acesse o site: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/easyslider/easyslider-1.7.js"></script>
<script>
$(document).ready(function () {
$("#slider").easySlider();
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/05.jpg" alt="" /></li>
</ul>
</div>
</body>
JCarouselLite
jCarousel Lite é um plugin Jquery que te leva em um passeio de carrossel cheio de imagens e conteúdo HTML. Simplificando, você pode navegar por imagens e/ou HTML em um widget. É muito flexível e personalizável para atender a maioria de nossas necessidades.
Para mais informações acesse o site: http://www.gmarwaha.com/jquery/jcarousellite/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/jcarousellite/jcarousellite-1.0.1.js"></ script>
<script>
$(function() {
$(".imagens").JCarouselLite({
btnNext:".seguinte",
btnPrev:".prev"
});
});
</script>
</head>
<body>
<button class="prev"> << </button>
<button class="next"> >> </button>
<div class="imagens">
<ul>
<li><img src="images/01.jpg" alt="" width="100" height="100" /></li>
<li><img src="images/02.jpg" alt="" width="100" height="100" /></li>
<li><img src="images/03.jpg" alt="" width="100" height="100" /></li>
<li><img src="images/04.jpg" alt="" width="100" height="100" /></li>
</ul>
</div>
</body>
Jdialog(OBSOLETO)
O Plugin Jdialog permite adicionar janelas modais em seus conteúdos. É usado por portais mais antigos, porém não dispõe mais de suporte.
Recomenda-se a utilização do plugin NyroModal para substituição deste.
Limit
O plugin Limit limita o número de caracteres que podem ser inseridos em um campo de texto e ainda pode mostrar a quantidade de caracteres que faltam para atingir o máximo permitido.
Para mais informações acesse : http://www.unwrongest.com/projects/limit/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/limit/limit-1.2.js"></script>
<script>
$('#comentario').limit('140', '#carac_faltam');
</script>
</head>
<body>
<p>Você tem <span id="carac_faltam"> </span> caracteres sobrando.</p>
<textarea id="comentario"></textarea>
</body>
MaskedInput
O plugin Masked Input é responsável por criar máscaras para campos de dados, para que fiquem de acordo com um formato pré - estabelecido ( datas, telefones,números, etc).
Para mais informações acesse : http://digitalbush.com/projects/masked-input-plugin/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/maskedinput/maskedinput-1.3.min.js"></script>
<script>
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Date</td>
<td><input type="text" tabindex="1" id="date"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" tabindex="3" id="phone"></td>
</tr>
</tbody>
</table>
</body>
NyroModal
O NyroModal Jquery Plugin permite que seja adicionado janelas modais para vários tipos de conteúdo e mensagens, incluindo: imagens, galerias, chamadas AJAX, vídeos,etc.
É necessário chamar o devido arquivo css para melhor visualização e funcionamento.
Para mais informações acesse: http://nyromodal.nyrodev.com/
<!-- Exemplo Versão 2.0 -->
<head>
<link rel="stylesheet" type="text/css" href="//cdn.ici.curitiba.org.br/css/jquery/plugins/nyromodal/nyroModal-2.0.css" />
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/nyromodal/nyroModal-2.0.min.js"></script>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/nyromodal/nyroModal-2.0.ie6.min.js"></script>
<script>
$(function() {
$('.nyroModal').nyroModal();
});
</script>
</head>
<body>
<a href="images/01.jpg" class="nyroModal" title="3rd Street Promenade" />Image</a>
</body>
PngFix
O PngFix Jquery Plugin corrige um erro que ocorre no Internet Explorer 6 e inferior, que faz com que os PNG's que devem ficar com o fundo transparente fiquem azuladas.
Para mais informações acesse: http://jquery.andreaseberhard.de/pngFix/
<head>
<title>Meu Site</title>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/pngfix/pngFix-1.2.js"></script>
<script>
$(document).ready(function() {
$(document).pngFix(); //Executa o pngFix em todos os elementos do site
});
</script>
</head>
Ddlevelsmenu
O Plugin ddlevelsmenu é um menu de lista que suporta infinitos sub-menus utliza para tanto apenas HTML e CSS, servindo assim para muitas plataformas. É simples e fácil de implementar.
É necessário chamar o devido arquivo css para melhor visualização e funcionamento.
Para mais informações acesse: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/plugins/ddlevelsmenu/ddlevelsmenu-3.01.js"></script>
<script>
$(document).ready(function() {
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
customtheme: ["#55748F", "#384A5D"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});
});
</script>
</head>
<body>
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
</ul>
</li>
</ul>
</body>
Accordion
O Accordion Jquery UI é um widget que é usado para a criação de menus e sub-menus. Ele pode ser muito útil para exibir vários dados em um pequeno espaço.
Para mais informações acesse : http://jqueryui.com/demos/accordion/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/ui/jquery.ui.accordion-1.8.4.min.js"></script>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3><a href="#">Item 1</a></h3>
<div>Conteúdo 1.1</div>
<h3><a href="#">Item 2</a></h3>
<div>Conteúdo 2.2</div>
</div>
</body>
DatePicker
O Datepicker Jquery UI é um plugin altamente configurável que adciona funcionalidade de datas para as suas páginas. Você pode personalizar o formato da data e da linguagem, restringir os intervalos de datas selecionáveis e adicionar botões e outras opções de navegação facilmente.
Para mais informações acesse : http://jqueryui.com/demos/datepicker/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/ui/jquery.ui.datepicker-1.8.4.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input id="datepicker" type="text" /></p>
</div>
</body>
Tabs
O Tabs Jquery UI é um plugin que é usado para criar abas , assim como o accordion, mas difere deste pois cria apenas abas ao invez de menus e sub-menus.
Para mais informações acesse : http://jqueryui.com/demos/tabs/
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/ui/jquery.ui.tabs-1.8.4.min.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo,vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sitamet mauris. Nam elementum quam ullamcorper ante.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
</div>
</div>
</body>
Full
O arquivo de Jquery UI Full é a união dos três plugins apresentados acima: accordion, datepicker e tabs.
Caso precise utilizar todos estes plugins basta chamar o arquivo full e adicionar os scripts de cada um dos plugins, conforme explicado nos itens anteriores.
<head>
<script src="//cdn.ici.curitiba.org.br/scripts/jquery/ui/jquery.ui-1.8.16.full.min.js"></script>
</head>
© ICI - Instituto das Cidades Inteligentes