Adicione Margem Passe o Texto para Qualquer Site Facilmente com Marginotes
Dicas de ferramentas inline são fantásticos, mas às vezes eles simplesmente não se encaixam bem com determinados conteúdos. A maioria dos sites deixa espaço nas margens ao longo do corpo da página e isso é perfeito para adicionar conteúdo estilo dica de ferramenta sem as dicas.
Entrar Marginotes, um plugin jQuery livre de código aberto que adiciona notas personalizadas às margens da sua página web. Você pode alternar essas notas com base em links ou determinados elementos na página, como imagens.
Este plugin é surpreendentemente fácil de configurar e vem com um folha de estilo padrão para as suas notas de margem. Estes aparecem para o lado de seu conteúdo e eles se alinham ao lado do elemento de parágrafo em sua página da web.
As notas de foco são adicionado manualmente aos seus elementos HTML, usando um desc
atributo. Eu nunca vi isso em HTML5, então não posso dizer se é totalmente compatível. Mas, ele é pego pelo JavaScript, que é tudo o que você realmente precisa.
Você também pode mude este atributo quando você corre o marginotes ()
função, então você pode mudá-lo para algo como data-desc
se você quer ser mais complacente.
Aqui está o uma linha de jQuery necessário para obter este plugin funcionando:
$ ("seletor"). marginotes ()
Você deve substituir "seletor"
com quaisquer elementos que você esteja segmentando. Então, se eles estão dentro do seu corpo da página, você pode usar ". span de corpo"
. Você também pode links de âncora de destino ou por certas classes adicionado a esses elementos.
Dentro de marginotes ()
função, você pode adicionar dois parâmetros opcionais para alterar o formato da nota de margem:
largura
- define a largura da nota (o padrão é 100px)campo
- define o atributo de conteúdo HTML (o padrão é"desc"
)
Além disso, se você não gosta de usar o jQuery, pode tentar baunilha Marginotes plugin. É executado em baunilha JS, então você tem zero dependências para obter todos os mesmos recursos.
Você também pode verificar isso demonstração ao vivo se você quiser ver isso em ação. Este é definitivamente um plugin único e é uma ótima maneira de adicione algum conteúdo extra para o seu site.