Download Smart Web App Banner - Smart Web App Banner de código fonte download

Smart Web App Banner

Dados do site

Version 1.5

Baixar

JQuery Smart Web App Banner

Projeto oficial URL: http://kurtzenisek.com/p/smart-web-banner/

Procurando o IOS 6 e 7+ Smart Banner, mas entristecido com ele apenas suportando aplicativos na App Store e não aplicativos da Web? Este pequeno roteiro movido a jQuery está aqui para ajudar. Adicione este pequeno script ao seu site e convide seus visitantes para salvar seu site na tela inicial deles ao lado do restante de seus aplicativos!

Visualização rápida

Disponível em: http://kurtzenisek.com/p/smart-web-banner/

Características

O IOS 6 & 7+ Smart Banner Look & Sense, mas fez aplicativos da web!
Mostra de maneira inteligente o design do banner IOS 6/7+, dependendo do que o visitante está usando.
Desliza o site inteiro para baixo, em vez de obstruir a página de seus visitantes com um pop -up.
Adicione CSS & JavaScript e chame o script ... é isso. Os gráficos utilizam o CSS 3 e usam ícones incorporados na Retina Resolution (que é perfeita para o Safari Mobile), para que não haja imagens para se preocupar.
Somente mostrado ao usar o Mobile Safari, pois esse é o único navegador com integração na tela inicial.
Defina quanto tempo levará antes que o banner seja mostrado novamente após o fechamento e depois que o visitante pressionar "Salvar" (evita visitantes irritantes).
A detecção automática de ícones via tag (não é mostrada se não estiver disponível, permite substituí -la facilmente, se desejar, e ele adiciona brilho ao ícone se detectar que não é pré -composto [também pode ser definido por meio de uma opção]).
Pode adicionar automaticamente <meta name="apple-mobile-web-app-capable" content="yes" /> se ainda não estiver presente (salva o site como um aplicativo da web quando adicionado à tela inicial e o faz com que o banner não seja mostrado ao revisitar o site).
Temas claros e escuros para fazê -lo se encaixar no design do seu site (eu realmente amo os dois). Visualize os temas com os botões em http://kurtzenisek.com/p/smart-web-banner/
Mostre/oculte o banner sob demanda usando <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> );
Evento Gatilhos para o SWB: mostrado, SWB: Fechado, SWB: Instruções-Bancos e SWB: Instruções: Fechado no elemento Banner para executar ações adicionais quando o banner ou as instruções são mostradas ou fechadas.
Adiciona classes ao elemento HTML da página com base no estado do banner para ajustar aspectos do site por meio de CSS com base no estado da bandeira.
Pode ser dimensionado/redimensionado para ajustar a viewport móvel do seu site, alterando o tamanho da fonte de #smartwebbanner & #swb-instructions via CSS para ter o resto escalas (adicione .ipad ao seletor para tamanhos específicos do iPad).
Instruções específicas do dispositivo ("Adicionar à tela inicial" está na parte superior de um iPad enquanto estiver na parte inferior de um iPhone). Até corresponde à aparência do pop -up nativo do dispositivo (diferença sutil de cor e tamanho).
Troque o URL da página com o URL especificado (usando o html5 replacestate), de modo que o ícone da tela inicial leva o visitante depois de salvá -lo, em vez da página em que eles estavam quando o adicionou à tela inicial (que é o comportamento padrão). Por exemplo, faça -o para que o botão da tela inicial seja sempre a sua página inicial.
Swaps o título da página com o título especificado, é assim que o rótulo padrão do ícone é ao adicioná-lo à tela inicial (que de outra forma usaria o meta tag Apple-Mobil-Web-Apple existente ou o título da página). Parece menor, mas isso pode ser impactante.
A opção de depuração útil (define o banner a ser mostrado em todos os navegadores e desconsidere os cookies já fechados/salvos) torna a visualização/teste do banner uma brisa.
Incrivelmente configurável por meio de muitas opções! *Veja o exemplo abaixo para uma lista completa.

Roteiro

Implemente o suporte e o estilo do Chrome para dispositivos Android.
Melhore o recurso AutoApp que adiciona a meta-App Mobile-Web-App, para que também impeça os links normais (não-AJAX) da abertura no Safari (a menos que saia do domínio ou vá para um arquivo de mídia [devido à falta de um botão de volta]). Altere a configuração padrão do AutoApp, pois agora é muito mais útil para sites padrão.
Considere a implementação do formulário do plug -in do WordPress para quem procura essa funcionalidade sem a capacidade/tempo para implementar o próprio script (faça com que ele puxe o nome do blog para o título e a descrição do "autor") e procure criar uma página de configurações de plug -in para as opções do script. Além disso, o script deve ser atualizado para acomodar automaticamente a barra de administração do WordPress.
Revisão de código/reescrita/limpeza.
Crie um sistema temático que permita que os arquivos CSS sejam fornecidos individualmente para determinar o design (separado dos estilos principais). Isso é tecnicamente possível, mas muitos dos estilos CSS existentes precisam ser substituídos para realizar um novo design.
Receba feedback da comunidade! (Envie -me um e -mail)

Changelog

Versão 1.5 - 11 de agosto de 2017

Adicionado swb:shown , swb:closed , swb:instructions-shown e swb:instructions-closed para o elemento $('#smartWebBanner') que são disparados quando o banner é mostrado e fechado, respectivamente. Isso permite que as ações ocorram quando o banner é mostrado/oculto (Ex. $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');});
Feito o elemento HTML ter .swb-shown e .swb-closed , dependendo se o banner for mostrado ou fechado. Isso permite que qualquer parte do site seja alterada com base no que o banner é mostrado ao referenciar essas classes CSS.
Script atualizado para seguir o jshint.
Implementou o SCSS para a folha de estilo de trabalho.
Garanta que o conteúdo/valor da meta tag Apple-Mobile-Web-Apptle "seja usado para a etiqueta/título de texto do ícone da tela inicial em vez da tag <title> da página quando presente (ainda usado como fallback).

Versão 1.4 - 24 de maio de 2014

Atualizado para usar o design do iOS 7 em iPhones e iPads executando iOS 7 (novos ícones, locais, pop -ups e design geral).
Agora, seleciona automaticamente o estilo iOS 6/7, quando apropriado. IMPORTANTE: Os nomes dos temas mudaram, pois agora há "Auto" (padrão), "iOS 6", "iOS 7" e "Dark". O Auto usará o iOS 6 e 7, dependendo do que o dispositivo está em execução.

20 de maio de 2014

O JQuery Smart Web App Banner já está disponível no CDNJS.com como uma opção CDN hospedada!

Versão 1.3 - 22 de março de 2013

Recurso adicionado que troca o URL da página com o URL especificado através das opções do script. Isso significa que você pode configurá -lo para a página inicial do seu site, para que o uso do recurso Adicionar na tela inicial salve a página inicial em vez da página em que o visitante está (o comportamento padrão).
Ainda preso no jQuery mais antigo que a versão 1.7? Esse recurso de troca de URL também foi adicionado a essa versão e está disponível aqui (é recomendável executar a versão mais recente encontrada abaixo).

Versão 1.2 - 20 de março de 2013

Alterou como o CSS é estruturado para usar apenas três valores de PX e usá -los para o resto. Isso permite que a escala do banner seja alterada enquanto ainda impedia que os tamanhos de fontes externos o afetem sem querer.

Versão 1.1.2 - 20 de março de 2013

Trocado .live () por .on () por JQuery 1.9+ Compatibilidade.
Agora requer o JQuery 1.7+, mas a versão anterior pode ser baixada aqui (usando o mais recente CSS funcionará).

Versão 1.1.1 - 3 de outubro de 2012

Opção adicionada para ativar a adição automática da meta-app móvel-web-app (desativada por padrão).

Versão 1.1 - 27 de setembro de 2012

Recurso adicionado que troca o atributo <title> da página com o título especificado através das opções do script.
Opção adicionada para desativar o novo recurso de troca de título.

Versão 1.0 - 19 de setembro de 2012

Liberação inicial (no mesmo dia do iOS 6).

Guia para iniciantes para iniciantes

Open Haunt Inits Guide

Exemplo (usando configurações padrão)

Exemplos/Basic.js

Exemplo (com opções completas)

Exemplos/Full-Options.js

Exemplo de execução de ações quando o banner é mostrado e/ou oculto

https://github.com/kzeni/smart-web-app-banner/blob/master/examples/perform-actions-on-toggle.js

Baixar agora

Download
Use CDNJS

É de código aberto: você pode visualizá -lo no Github e baixar a partir daí também!

Requer: jQuery v1.7 ou mais tarde ainda usando o jQuery 1.3.2 - 1.8.x? Use o arquivo jQuery.smartwebbanner.pre-1.7.min.js.

Apoiar

Envie -me um email

Perguntas frequentes

Precisa que ele salve a página inicial do seu site em vez da página em que o visitante está? Salvar uma página na tela inicial salva a página atual por padrão, mas você pode definir a opção URL para ser qualquer URL que você gostaria para salvar e o plug -in cuida do restante.

Dica: Defina o URL como '/' para que ele seja sempre a página inicial do seu site enquanto é independente do próprio domínio. Além disso, não pode ser um domínio diferente por razões de segurança.

Precisa ajustar o tamanho do banner para ajustar a escala do seu site? O CSS deste plug -in foi construído para se referir a dois elementos (com uma variante) que então determina o tamanho de todo o resto. Basta alterar o tamanho da fonte para #smartwebbanner & #swb-instructions (adicione .ipad para tamanhos específicos do iPad) em seu próprio CSS (ou edite o plug-in diretamente) para atender às suas necessidades.

Procurando usar isso para promover aplicativos Android não baseados na Web e/ou aplicativos iOS em versões mais antigas do iOS e/ou navegadores diferentes? Confira o Jasny's Fork para aplicativos Android Apps & ou iOS mais antigos que o iOS 6. Verifique também o IJason's Fork's, destinado a torná -lo disponível para aplicativos iOS em outros navegadores iOS (Google Chrome) e versões mais antigas. Nota: Ambos são para aplicativos que não são da Web. Este é o único plug -in destinado a aplicativos da web (a meu conhecimento).