Bom dia a todos! Gostaria de colocar uma caixa de texto expansível no meu site, entretanto o suporte telefônico do wix não dá auxílio e também os conteúdos na página do suporte são um pouco técnicos, dificultando nossa execução. Como vocês poderiam auxiliar nesse assunto?
Agradeço desde já!
O texto se encontra em um repetidor?
Olá Matheus. Tentei fazer exatamente como você descreveu e funcionou. Porém, quando faço o link do texto ao banco de dados, não funciona. Ou seja, ele não está aplicando a regra ao texto que é originado do meu banco de dados. Estou colando o código como está em meu editor. Pode me ajudar?
Olá, @viviane.ariede.
Eu posso te ajudar com isso.
Parte 1: Configurando o Elemento de Texto e o Botão
1. Adicione um elemento de texto à sua página.
* Se você exibir texto estático, poderá digitar o texto completo agora.
* Se você exibir o conteúdo da sua coleção, poderá deixar o elemento de texto como está ou digitar algo como [texto a ser exibido].
2. Adicione um botão e marque "Mostrar mais".
3. Posicione o botão abaixo da caixa de texto de forma que a borda superior esteja tocando a borda inferior do elemento de texto. Deve se parecer com a imagem abaixo.
https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b0387850-90c2-4f00-a761-a0c5104e1c8c/2018/05/08/969c6761-e8e0-4ae7-ab76-f25b36d0a151.png
4. Abra o painel Code da página (você pode simplesmente arrastá-lo de baixo para cima).
5. Copie o código abaixo e cole-o no topo do painel, acima de qualquer código que apareça lá.
let fullText; // variável para conter o texto completo let shortText; // variável para manter a versão curta do textoEste código define duas variáveis globais fullTexte shortText. fullTextarmazenará a versão completa do texto que será exibido depois que o visitante clicar no botão "Mostrar mais". shortTextarmazenará a versão do texto que aparece inicialmente na sua página (e será exibida novamente se você optar por criar um botão de alternância).
Parte 2: Controlando o texto que é exibido na carga da página
O código nesta parte do tutorial cria a versão curta do texto exibido no elemento de texto quando a página é carregada pela primeira vez. O código primeiro define o tamanho do texto abreviado e o armazena na shortTextLengthvariável. Neste tutorial, shortTextLengthestá definido como 40. O código lê o texto completo e o armazena na fullTextvariável. Em seguida, calcula a versão abreviada do texto, extraindo o primeiro shortTextLengthnúmero de caracteres e acrescentando reticências. Este texto é armazenado na shortTextvariável.
Você pode fazer isso com texto estático, que é o texto digitado diretamente no elemento de texto. Você também pode usar texto dinâmico , que é conteúdo de um campo de texto em uma de suas coleções.
Trabalhando com texto estático
Copie o código abaixo e cole-o acima da linha que diz "// TODO: escreva o código da sua página aqui ...". (Você pode excluir essa linha, se quiser.)
// quantos caracteres para incluir na versão abreviada const shortTextLength = 40; // leia o texto completo e armazene-o na variável fullText fullText = $w("#myTextElement").text; // pegue o número de caracteres definidos em shortTextLength e //armazene-os na variável shortText shortText = fullText.substr(0, shortTextLength) + "..."; // definir o conteúdo do elemento de texto para ser o texto curto $w("#myTextElement").text = shortText;2. Certifique-se de fazer esta substituição: "#myTextElement": o ID do elemento de texto que você adicionou na Etapa 1 da seção Configuração (passe o mouse sobre ele para ver seu ID).
3. Visualize sua página agora para ver como aparecem apenas os primeiros 40 caracteres do seu texto, com reticências no final. Não tente clicar no botão, porque você ainda não escreveu seu código
Entendendo o Código
A imagem abaixo mostra como é o código no Painel de código. Você pode clicar
na barra de ferramentas do painel de código para alinhar tudo.
https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b0387850-90c2-4f00-a761-a0c5104e1c8c/2018/05/06/722b648f-c640-4f19-bb8b-384bdf2438a3.png
A linha 4 chama a onReady()função. Isso define o código que será executado quando a página terminar de carregar.
A linha 6 define a shortTextLengthvariável e a define como 40. Esse é o número de caracteres a serem usados ao criar a versão abreviada do texto. Definir isso como uma variável torna seu código mais fácil de entender e também mais fácil de modificar posteriormente.
Na linha 8, a textpropriedade lê o conteúdo do elemento de texto e o armazena como uma string na fullTextvariável.
A linha 10 usa a função Javascript padrão substr para extrair os primeiros 40 caracteres da string na fullTextvariável (porque definimos shortTextLength40 na linha 6). Em seguida, anexa reticências ao final e armazena a cadeia inteira na shortTextvariável.
A linha 12 define a propriedade de texto do myTextElementpara ser o conteúdo da shortTextvariável. Em outras palavras, quando a página é carregada pela primeira vez, ela substitui o conteúdo do elemento de texto pela versão abreviada do texto.
Espero ter ajudado!