[TUTORIAL] Busca com TAGs nos tópicos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Busca com TAGs nos tópicos Empty [TUTORIAL] Busca com TAGs nos tópicos

Mensagem por BrunoH. em 13.07.14 17:23


[TUTORIAL] Busca com TAGs nos tópicos Pub

Busca com TAGs nos tópicos

Agora podemos aplicar um efeito JS, que ao criar um tópico, terá etiquetas para facilitar a busca por tópicos relacionados.


--> Tutoriais, dicas e astúcias <--
Busca com TAGs nos tópicos



- Conhecendo o código:
Código:
/***
 * Application: Tags Search
 * Description: This application can displays tags for searching.
 * Version: 1.09032014-jq1.9.1 - Thoth (Ermoúpoli -> Eshmunen)
 * Made and Optimizations by JScript - 2014/03/09
 * View more in: http://punbb.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    /***
    * User Definition Variables
    ***/
    /* Put here the limit of tag length!!! */
    var iTagLength = 4;
    /* Put here your tags tool tip!!! */
    var sTagTitle = 'Procurar por:';
    /* Put here your widget title!!! */
    var sTagToolTip = 'Localizar mais conteúdo com a tag';
    /* END */

    /***
    * System Defined Variables - Do not edit if you don't know!
    ***/
    var oConfig = {
        sInfo:
            '<!--' +
            '* Application: Tags Search' +
            '* Description: This application can displays tags for searching.' +
            '* Version: 1.09032014-jq1.9.1 - Thoth (Ermoúpoli -> Eshmunen)' +
            '* Made and Optimizations by JScript - 2014/03/09' +
            '* View more in: http://punbb.forumeiros.com/forum & http://ajuda.forumeiros.com' +
            '* Copyright (c) 2013 JScript <jscriptbrasil at live dot com>' +
            '* This work is free. You can redistribute it and/or modify it' +
            '* under the terms of the WTFPL, Version 2' +
            '-->',       
        sContent:
            '<span id="tags_search"><span>' + sTagTitle + ' </span></span>',
        sCSS:
            '<style>' +
            '#tags_search {' +
                'display: block;' +
                'margin-bottom: 20px;' +
                'margin-top: 20px;' +
            '}' +
            '.ipsTag {' +
                'background: url("http://i55.servimg.com/u/f55/18/17/62/92/tag_bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);' +
                'border-radius: 0 3px 3px 0;' +
                'color: #FFFFFF !important;' +
                'display: inline-block;' +
                'font-size: 11px;' +
                'height: 20px;' +
                'line-height: 20px;' +
                'margin: 5px 5px 0 0;' +
                'padding: 0 7px 0 15px;' +
                'text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);' +
            '}' +
            '</style>',
        sTarget: ''
    };
   
    jQuery(oConfig.sCSS).insertBefore('body');

    /* Forum versions! */
    var phpBB2 = jQuery('.bodyline');
    var phpBB3 = jQuery('#wrap');
    var punbb = jQuery('#pun-intro');
    var invision = jQuery('#ipbwrapper');
   
    if (phpBB2.length) {
        $('td.nav').parent().parent().parent().before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'h1.cattitle:first';
    } else if(phpBB3.length) {
        $('#main-content .post:first').before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'h1.page-title';
    } else if(punbb.length) {
        $('#main-content .main.paged').before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'p.crumbs strong:last';
    } else if(invision.length) {
        $('#main-content .borderwrap:first').before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'div.maintitle.floated h3';
    };

    var tags = jQuery(oConfig.sTarget).text().split(' ');

    jQuery.each(tags, function(index, data) {
        if(data.length > iTagLength) {
            $('#tags_search').append(
                '<a id="tag_search_' + index + '" class="ipsTag" title="' + sTagToolTip + ' ' + data + '" href="/search?search_keywords=' + data + '">' +
                '    <span>' + data + '</span>' +
                '</a>'
            );
        }
    });
});
  • Poderá definir o tamanho das palavras que farão parte das tags, para isso basta definir no código acima o valor da variável iTagLength, exemplo:
    Digamos que deseje mostrar palavras com até 5 caracteres, basta colocar o valor 5 na variável, ficando assim:
    var iTagLength = 5;

  • Para trocar o título que precede as tags, basta editar a variável sTagTitle com o valor que desejar, exemplo: var sTagTitle = 'Buscar por:';

  • Para trocar a dica (ToolTip) que aparece ao colocar o mouse em cima das tags, basta editar a variável sTagToolTip com o valor que desejar, exemplo: var sTagToolTip = 'Localizar mais conteúdo com a tag';



- Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
[TUTORIAL] Busca com TAGs nos tópicos Painel13
[TUTORIAL] Busca com TAGs nos tópicos 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Busca com TAGs nos tópicos 110210Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Busca com TAGs nos tópicos 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Busca com TAGs nos tópicos 110410Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:
    [TUTORIAL] Busca com TAGs nos tópicos 0Xkz2Pa




© Fórum dos Fóruns & JScript


[TUTORIAL] Busca com TAGs nos tópicos Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Busca com TAGs nos tópicos
BrunoH.

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum