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> )

Exemplo: Portal PMC, Portal Comunidade Escola, Site Agência Curitiba
    <head> 
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/ici/ativa_flash/ativa.flash-1.0.js"></script> 
    </head> 
    <body>  
        <div id="banner"> 
            <script type="text/javascript">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.

Exemplo: Bumerangue, Prefeitura em Ação, Repositório Web
    <head> 
        <script type="text/javascript" src="http://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.

Exemplo:
    <head> 
        <script type="text/javascript" src="http://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/

Exemplo:
    <head>
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/mobile/jquery.mobile-1.0.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://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/

Exemplo:
    <head>
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/autocomplete/autocomplete-1.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://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

Exemplo:
    <head>  
        <script type="text/javascript" src="http://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/

Exemplo:
    <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

Exemplo:
    <head>  
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/easyslider/easyslider-1.7.js"></script> 
        <script type="text/javascript">  
            $(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/

Exemplo:
    <head> 
        <script type="text/javascript" src="http://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/

Exemplo:
    <head> 
        <script src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/limit/limit-1.2.js" type="text/javascript"></script> 
        <script type="text/javascript">  
            $('#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/

Exemplo:
    <head> 
        <script src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/maskedinput/maskedinput-1.3.min.js" type="text/javascript"></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:
<!-- Exemplo Versão 2.0 --> 
    <head> 
        <link rel="stylesheet" type="text/css" href="http://cdn.ici.curitiba.org.br/css/jquery/plugins/nyromodal/nyroModal-2.0.css" />
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/nyromodal/nyroModal-2.0.min.js"></script>
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/nyromodal/nyroModal-2.0.ie6.min.js"></script>
        <script type="text/javascript"> 
            $(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/

Exemplo:
    <head> 
        <title>Meu Site</title> 
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/pngfix/pngFix-1.2.js"></script>
        <script language="JavaScript" type="text/javascript"> 
            $(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/

Exemplo:
   <head> 
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/plugins/ddlevelsmenu/ddlevelsmenu-3.01.js"></script>
        <script language="JavaScript" type="text/javascript"> 
            $(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/

Exemplo:
    <head> 
        <script type="text/javascript" src="http://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/

Exemplo:
    <head> 
        <script type="text/javascript" src="http://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/

Exemplo:
    <head> 
        <script type="text/javascript" src="http://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.

Exemplo:
    <head> 
        <script type="text/javascript" src="http://cdn.ici.curitiba.org.br/scripts/jquery/ui/jquery.ui-1.8.16.full.min.js"></script> 
    </head> 
                                

© ICI - Instituto das Cidades Inteligentes